Twenty Twenty-One Theme Design<\/h2>\n
At its core, Twenty Twenty-One uses a modified version of the Seedlet theme<\/a>. This base makes creating child themes easier than ever thanks to nested CSS variables (a simple overview of these terms is provided at the end of this article).<\/p>\n
The theme is designed to use a pastel green background with two shades of gray for text. The default color palettes are pastels, which are growing in popularity, but using the color picker you can select any background color you’d like.<\/p>\n
What is the theme’s screenshot going to look like? The starter content is still being worked on, so it’s hard to tell, but make sure you follow this ticket<\/a> to be one of the first to know!<\/p>\n
$\"Twenty$ <\/a><\/p>\n

<\/td>\n	GTMetrix<\/b><\/td>\n	PageSpeed Insights<\/b><\/td>\n<\/tr>\n
<\/td>\n	Fully Loaded Time<\/span><\/td>\n	Total Page Size<\/span><\/td>\n	Requests<\/span><\/td>\n	Mobile<\/span><\/td>\n	Desktop<\/span><\/td>\n<\/tr>\n
Twenty Twenty<\/span><\/td>\n	3.6s<\/span><\/td>\n	1.36MB<\/span><\/td>\n	23<\/span><\/td>\n	83<\/span><\/td>\n	93<\/span><\/td>\n<\/tr>\n
Twenty Twenty-One<\/span><\/td>\n	2.4s<\/span><\/td>\n	1.13MB<\/span><\/td>\n	22<\/span><\/td>\n	96<\/span><\/td>\n	99<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Accessibility<\/h2>\n It looks like Accessibility is also an important feature of the Twenty Twenty-One theme. You can see various questions and tasks within the Twenty Twenty-One GitHub Accessibility project<\/a>.<\/p>\n $\"Twenty$ <\/a><\/p>\n All of the current 16 cards in this project were created by the wonderful Carolina Nymark<\/a> (shout out to her themes site<\/a>!), so you can tell she’s taking Accessibility in Twenty Twenty-One very seriously.<\/p>\n Languages<\/h2>\n Looking at GitHub, we can also see a change in the languages used between Twenty Twenty and Twenty Twenty-One. As you can see there’s a new language used this year – SCSS – which is how we utilize nested CSS. In Twenty Twenty-One almost 85%<\/strong> of the code is CSS or SCSS.<\/p>\n \n \n Twenty Twenty<\/strong><\/p>\n \n CSS 58.3%<\/li>\n PHP 34.3%<\/li>\n JavaScript 7.4%<\/li>\n<\/ul>\n<\/div>\n \n \n Twenty Twenty-One<\/strong><\/p>\n \n CSS 64.8%<\/li>\n SCSS 19.9%<\/li>\n PHP 14.2%<\/li>\n JavaScript 1.1%<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n $\"twenty$ <\/a><\/p>\n What is SCSS?<\/h2>\n SCSS, or Sass, is CSS on the next level and the official documentation can be found here<\/a>. In this article we will go over the specific features of SCSS used in the Twenty Twenty-One theme – Variables and Nesting.<\/p>\n What Are SCSS Variables?<\/h3>\n Using consistent fonts and colors is easier than ever before with variables. When writing your own code you won’t have to remember the exact hex of a color or how to spell a font. You can declare a variable once and use the variable in place of the hex or font name.<\/p>\n Variables also makes design changes significantly easier – since the font name and color only appear one time in the stylesheet, they only need to be changed one time. This one change will cause everywhere the variable is used across your site to update accordingly.<\/p>\n $\"SCSS$ <\/a><\/p>\n Nesting<\/h3>\n When using CSS it’s up to the author to group similar code together, like in the example below on the right. There are 3 elements related to nav<\/strong> that are being styled but they need to be completely separate.<\/p>\n This same code is written in SCSS on the left. Notice nav<\/strong> only appears once and the styling for the 3 elements is nested inside. This provides cleaner, easier to read code.<\/p>\n $\"SCSS$ <\/a><\/p>\n Frequently Asked Questions<\/h2>\n Will There Be a Dark Mode?<\/h3>\n The Twenty Twenty-One theme will include a Dark Mode, however we are unsure how this functionality will be implemented. A recent Core post<\/a> is asking for user feedback on whether Dark Mode should be included with the theme itself, or if moving the feature to a plugin makes more sense.<\/p>\n The WordPress 5.6 Beta 4 has a new Colors & Dark Mode<\/strong> panel. Here you can decide if your site will opt-in to Dark Mode Support, which uses the visitor’s device setting. When using Dark Mode, a button appears on the front end of your website and in the Customizer to turn Dark Mode on or off. When Dark Mode is enabled, the background will be a dark grey with light text and images have a lower contrast.<\/p>\n How Does Dark Mode Work?<\/span> \nHere is a video showing how enabling Dark Mode changes the front end design:<\/p>\n \n https:\/\/make.wordpress.org\/core\/files\/2020\/11\/darkmode-web.mp4<\/a><\/video><\/div>\n<\/div>\n Can the Twenty Twenty-One Theme be Translated?<\/h3>\n Recently the translatable strings were pushed to GlotPress, so Twenty Twenty-One can now be translated<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":" We’ve known for a while that WordPress 5.6 will include a new default theme and today we get our first look! The Twenty Twenty-One theme has a minimalist design – a blank canvas for the block editor – and sets the stage for Full Site Editing. Twenty Twenty-One Theme Design At its core, Twenty Twenty-One […]<\/p>\n","protected":false},"author":215,"featured_media":27429,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Twenty Twenty-One Theme for WordPress 5.6","bgseo_description":"WordPress 5.6 and its new default Twenty Twenty-One theme are scheduled to release on December 8, 2020. The Twenty Twenty-One theme has a minimalist design and sets the stage for Full Site Editing. Learn about the design, theme speed, starter content, accessibility and more today! ","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[],"class_list":["post-27424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=27424"}],"version-history":[{"count":78,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27424\/revisions"}],"predecessor-version":[{"id":46721,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/27424\/revisions\/46721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media\/27429"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=27424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=27424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=27424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

New Block Patterns<\/h2>\nWhile support for patterns is currently available in WordPress 5.5, the Twenty Twenty-One theme will include unique patterns perfectly designed to match.<\/p>\n

New Block Patterns<\/h2>\n
While support for patterns is currently available in WordPress 5.5, the Twenty Twenty-One theme will include unique patterns perfectly designed to match.<\/p>\n