[{"id":167612,"date":"2018-08-15T09:00:20","date_gmt":"2018-08-15T16:00:20","guid":{"rendered":"https:\/\/www.sitepoint.com\/?p=167612"},"modified":"2018-08-14T20:10:29","modified_gmt":"2018-08-15T03:10:29","slug":"css-grid-retrofit","status":"publish","type":"post","link":"https:\/\/www.sitepoint.com\/css-grid-retrofit\/","title":{"rendered":"Redesigning a Site to Use CSS Grid Layout"},"content":{"rendered":"<p><strong>In this article, we\u2019re going to see CSS Grid in action by creating a responsive multi-column website layout.<\/strong><\/p>\n<p>CSS Grid is a new, hot trend in web development these days. Forget about table layouts and floats: a new way to design websites is already here! This technology introduces two-dimensional grids which define multiple areas of layout with a handful of CSS rules.<\/p>\n<p>Grid can make third-party frameworks such as <a href=\"https:\/\/960.gs\/\">960gs<\/a> or <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/layout\/grid\/\">Bootstrap grid<\/a> redundant, as you may easily do everything yourself! This feature <a href=\"https:\/\/caniuse.com\/#feat=css-grid\">is supported by all major browsers<\/a>, though Internet Explorer implements an older version of the specification.<\/p>\n<h2 id=\"whatweregoingtobuild\">What We\u2019re Going to Build<\/h2>\n<p>So, we were asked to create a typical website layout with a header, main content area, sidebar to the right, a list of sponsors, and a footer:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342982501_initial-960x1024.png\" alt=\"The initial starting point\" width=\"960\" height=\"1024\" class=\"aligncenter size-large wp-image-167614\" \/><\/p>\n<p>Another developer has already tried to solve this task and came up with a solution that involves floats, <code>display: table<\/code>, and some clearfix hacks. We\u2019re going to refer to this existing layout as &#8220;initial&#8221;:<\/p>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"oMRjda\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"SP: Multi-Column Layout With Floats\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/oMRjda\/\">SP: Multi-Column Layout With Floats<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Until recently, floats were considered to be the best option to create such layouts. Prior to that, we had to utilize HTML tables, but they had a number of downsides. Specifically, such table layout is very rigid, requiring lots of tags (<code>table<\/code>, <code>tr<\/code>, <code>td<\/code>, <code>th<\/code> etc), and semantically these tags are used to present table data, not to design layouts.<\/p>\n<p>But CSS continues to evolve, and now we have CSS Grid. Conceptually, it\u2019s similar to an old table layout but can use semantic HTML elements with a more flexible layout.<\/p>\n<h2 id=\"planningthegrid\">Planning the Grid<\/h2>\n<p>First things first: we need to define a basic HTML structure for our document. Before that, let\u2019s briefly talk about how the initial example works. It has the following main blocks:<\/p>\n<ul>\n<li><code>.container<\/code> is the global wrapper that has small margins to the left and to the right.<\/li>\n<li><code>.main-header<\/code> is the header that contains the <code>.logo<\/code> (occupying 20% of the space, floating to the left) and the <code>.main-menu<\/code> (occupying 79% of the space, floating to the right). The header is also assigned a hacky fix to clear the floats.<\/li>\n<li><code>.content-area-wrapper<\/code> wraps the main <code>.content-area<\/code> (occupying 66.6% of the space minus <code>1rem<\/code> reserved for margin, floating to the left) and the <code>.sidebar<\/code> (occupying 33.3% of the space, floating to the right). The wrapper itself is also assigned with a clearfix.<\/li>\n<li><code>.sponsors-wrapper<\/code> contains the logos of the sponsors. Inside, there\u2019s a <code>.sponsors<\/code> section with the <code>display<\/code> property set to <code>table<\/code>. Each sponsor, in turn, is displayed as a table cell.<\/li>\n<li><code>.footer<\/code> is our footer and spans to 100% of the space.<\/li>\n<\/ul>\n<p>Our new layout will be very similar to the initial one, but with one exception: we won\u2019t add the <code>.main-header<\/code> and <code>.content-area-wrapper<\/code> wrappers because the clearfixes won\u2019t be required anymore. Here is the new version of the HTML:<\/p>\n<pre><code class=\"markup language-markup\">&lt;div class=\"container\"&gt;\r\n  &lt;header class=\"logo\"&gt;\r\n    &lt;h1&gt;&lt;a href=\"#\"&gt;DemoSite&lt;\/a&gt;&lt;\/h1&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;nav class=\"main-menu\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Our clients&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Products&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n\r\n  &lt;main class=\"content-area\"&gt;\r\n    &lt;h2&gt;Welcome!&lt;\/h2&gt;\r\n\r\n    &lt;p&gt;\r\n      Content\r\n    &lt;\/p&gt;\r\n  &lt;\/main&gt;\r\n\r\n  &lt;aside class=\"sidebar\"&gt;\r\n    &lt;h3&gt;Additional stuff&lt;\/h3&gt;\r\n\r\n    &lt;ul&gt;\r\n      &lt;li&gt;Items&lt;\/li&gt;\r\n      &lt;li&gt;Are&lt;\/li&gt;\r\n      &lt;li&gt;Listed&lt;\/li&gt;\r\n      &lt;li&gt;Here&lt;\/li&gt;\r\n      &lt;li&gt;Wow!&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/aside&gt;\r\n\r\n  &lt;section class=\"sponsors-wrapper\"&gt;\r\n    &lt;h2&gt;Our sponsors&lt;\/h2&gt;\r\n\r\n    &lt;section class=\"sponsors\"&gt;\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/150x150\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/200x150\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/100x200\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/100x100\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/200x200\"&gt;\r\n      &lt;\/figure&gt;\r\n    &lt;\/section&gt;\r\n\r\n  &lt;\/section&gt;\r\n\r\n  &lt;footer class=\"footer\"&gt;\r\n    &lt;p&gt;\r\n      &amp;copy; 2018 DemoSite. White&amp;amp;Sons LLC. All rights (perhaps) reserved.\r\n    &lt;\/p&gt;\r\n  &lt;\/footer&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>Note that you may utilize the <code>body<\/code> as the global <code>.container<\/code>; that\u2019s just a matter of preference in this case. All in all, we have six main areas:<\/p>\n<ol>\n<li>Logo<\/li>\n<li>Menu<\/li>\n<li>Main content<\/li>\n<li>Sidebar<\/li>\n<li>Sponsors<\/li>\n<li>Footer<\/li>\n<\/ol>\n<p>Usually it\u2019s recommended that you implement a mobile-first approach. That is, you start from the mobile layout and then add styles for larger screens. This isn\u2019t necessary in this case, since we\u2019re adapting an initial layout that already falls back to a linearized view on small-screen devices. Therefore, let\u2019s start by focusing on the grid\u2019s implementation, and after that talk about responsiveness and fallback rules. So, return to our scheme and see how the grid columns can be arranged:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342987132_columns-960x1024.png\" alt=\"Grid column arrangement\" width=\"960\" height=\"1024\" class=\"aligncenter size-large wp-image-167615\" \/><\/p>\n<p>So, I propose having three columns (highlighted in red) and four rows (highlighted in blue). Some areas, like the logo, are going to occupy only one column, whereas others, like main content, are going to span multiple columns. Later we can easily modify the layout, move the areas around, or add new ones.<\/p>\n<p>Following the scheme, give each area a unique name. These will be used in the layout defined below:<\/p>\n<pre><code class=\"css language-css\">.logo {\r\n  grid-area: logo;\r\n}\r\n\r\n.main-menu {\r\n  grid-area: menu;\r\n}\r\n\r\n.content-area {\r\n  grid-area: content;\r\n}\r\n\r\n.sidebar {\r\n  grid-area: sidebar;\r\n}\r\n\r\n.sponsors-wrapper {\r\n  grid-area: sponsors;\r\n}\r\n\r\n.footer {\r\n  grid-area: footer;\r\n}\r\n<\/code><\/pre>\n<p>Now set the <code>display<\/code> property to <code>grid<\/code>, define three columns and add small margins to the left and right of the main container:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  display: grid;\r\n  margin: 0 2rem;\r\n  grid-template-columns: 2fr 6fr 4fr;\r\n}\r\n<\/code><\/pre>\n<p><code>display: grid<\/code> defines a grid container and sets a special formatting context for its children. <code>fr<\/code> is a special unit that means &#8220;fraction of the free space of the grid container&#8221;. <code>2 + 6 + 4<\/code> gives us <code>12<\/code>, and <code>6 \/ 12 = 0.5<\/code>. It means that the middle column is going to occupy 50% of the free space.<\/p>\n<p>I would also like to add some spacing between the rows and columns:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-gap: 2rem 1rem;\r\n}\r\n<\/code><\/pre>\n<p>Having done this, we can work with individual areas. But before wrapping up this section, let\u2019s quickly add some common styles:<\/p>\n<pre><code class=\"css language-css\">* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  font-size: 16px;\r\n  font-family: Georgia, serif;\r\n}\r\n\r\nbody {\r\n  background-color: #fbfbfb;\r\n}\r\n\r\nh1, h2, h3 {\r\n  margin-top: 0;\r\n}\r\n\r\nheader h1 {\r\n  margin: 0;\r\n}\r\n\r\nmain p {\r\n  margin-bottom: 0;\r\n}\r\n<\/code><\/pre>\n<p>Good! Now we can proceed to the first target, which is going to be the header.<\/p>\n<h2 id=\"designingtheheader\">Designing the Header<\/h2>\n<p>Our header occupies the first row that should have a specific height set to <code>3rem<\/code>. In the initial layout this is solved by assigning the <code>height<\/code> property for the header wrapper:<\/p>\n<pre><code class=\"css language-css\">.main-header {\r\n  height: 3rem;\r\n}\r\n<\/code><\/pre>\n<p>Also note that the logo and the menu are vertically aligned to the middle, which is achieved using the <code>line-height<\/code> trick:<\/p>\n<pre><code class=\"css language-css\">.logo {\r\n  \/\/ ...\r\n  height: 100%;\r\n  line-height: 3rem;\r\n}\r\n<\/code><\/pre>\n<p>With CSS Grid, however, things are going to be simpler: we won\u2019t require any CSS hacks.<\/p>\n<p>Start by defining the first row:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-template-rows: 3rem;\r\n}\r\n<\/code><\/pre>\n<p>Our logo should occupy only one column, whereas the menu should span two columns. We can express our intent with the help of the <code>grid-template-areas<\/code> property, which references the <code>grid-area<\/code> names assigned above:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-template-areas:\r\n    \"logo menu menu\";\r\n}\r\n<\/code><\/pre>\n<p>What\u2019s going on here? Well, by saying <code>logo<\/code> only once, we\u2019re making sure that it occupies only one \u2014 the left-most column. <code>menu menu<\/code> means that the menu occupies two columns: the middle and the right-most one. See how straightforward this rule is!<\/p>\n<p>Now align the logo on the Y axis:<\/p>\n<pre><code class=\"css language-css\">.logo {\r\n  grid-area: logo;\r\n  align-self: center;\r\n}\r\n<\/code><\/pre>\n<p>The menu should be centered vertically and pulled to the right:<\/p>\n<pre><code class=\"css language-css\">.main-menu {\r\n  grid-area: menu;\r\n  align-self: center;\r\n  justify-self: end;\r\n}\r\n<\/code><\/pre>\n<p>Our menu is built with the <code>ul<\/code> and <code>li<\/code> tags, so let\u2019s also style them a bit by removing markers, nullifying margins\/paddings, and setting the menu to a flex container:<\/p>\n<pre><code class=\"css language-css\">.main-menu ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n}\r\n\r\n.main-menu__item {\r\n  list-style-type: none;\r\n  padding: 0;\r\n  font-size: 1.1rem;\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n.main-menu .main-menu__item:last-of-type {\r\n  margin-right: 0;\r\n}\r\n<\/code><\/pre>\n<p>That\u2019s pretty much it. To observe the result, I\u2019m going to use Firefox with a handy CSS Grid highlighter tool enabled. (There are similar tools for other browsers available: for instance, <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/gridman-css-grid-inspecto\/cmplbmppmfboedgkkelpkfgaakabpicn\">Gridman<\/a> for Chrome.) To gain access to this tool, press <code>F12<\/code> and select the <code>.container<\/code> element, which should have a <code>grid<\/code> label:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342992433_grid_label.png\" alt=\"Element with a grid label\" width=\"370\" height=\"161\" class=\"aligncenter size-full wp-image-167616\" \/><\/p>\n<p>After that, proceed to the CSS rules tab, and find the <code>display: grid<\/code> property. By pressing on the small icon next to the <code>grid<\/code> value, you can enable or disable the highlighter:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342993084_grid_icon.png\" alt=\"The grid icon\" width=\"323\" height=\"177\" class=\"aligncenter size-full wp-image-167618\" \/><\/p>\n<p>Here is the result:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342993665_highlighter.png\" alt=\"Grid highlighter in action\" width=\"626\" height=\"74\" class=\"aligncenter size-full wp-image-167619\" \/><\/p>\n<p>The highlighter displays all your rows and columns, as well as the margins between them and the areas\u2019 names. You can customize the output inside the Layout section, which also lists all the grids on the page:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342994526_customize.png\" alt=\"Customizing Layout section output\" width=\"330\" height=\"377\" class=\"aligncenter size-full wp-image-167620\" \/><\/p>\n<p>So, we\u2019ve dealt with the header, so let\u2019s proceed to the main content area and the sidebar.<\/p>\n<h2 id=\"maincontentandsidebar\">Main Content and Sidebar<\/h2>\n<p>Our main content area should span two columns, whereas the sidebar should occupy only one. As for the row, I\u2019d like its height to be set automatically. We can update the <code>.container<\/code> grid accordingly:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/  ...\r\n  grid-template-rows: 3rem auto;\r\n  grid-template-areas:\r\n          \"logo menu menu\"\r\n          \"content content sidebar\";\r\n}\r\n<\/code><\/pre>\n<p>I\u2019d like to add some padding for the sidebar to give it some more visual space:<\/p>\n<pre><code class=\"css language-css\">.sidebar {\r\n  grid-area: sidebar;\r\n  padding: 1rem;\r\n}\r\n<\/code><\/pre>\n<p>Here\u2019s the result, as viewed in Firefox\u2019s Grid tool:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342995857_main.png\" alt=\"Container layout result\" width=\"776\" height=\"296\" class=\"aligncenter size-full wp-image-167622\" \/><\/p>\n<h2 id=\"sponsors\">Sponsors<\/h2>\n<p>The sponsors section should contain five items with equal widths and heights. Each item, in turn, will have one image.<\/p>\n<p>In the initial layout, this block is styled with <code>display: table<\/code>, but we won\u2019t rely on it. Actually, the sponsors section may be a great candidate for applying CSS grid as well!<\/p>\n<p>First of all, tweak the <code>grid-template-areas<\/code> to include the <code>sponsors<\/code> area:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-template-areas:\r\n          \"logo menu menu\"\r\n          \"content content sidebar\"\r\n          \"sponsors sponsors sponsors\"\r\n}\r\n<\/code><\/pre>\n<p>Now turn the <code>.sponsors<\/code> section into a grid as well:<\/p>\n<pre><code class=\"css language-css\">.sponsors {\r\n  display: grid;\r\n}\r\n<\/code><\/pre>\n<p>As long as we need five items with equal widths, a <code>repeat<\/code> function can be utilized to define the columns:<\/p>\n<pre><code class=\"css language-css\">.sponsors {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n}\r\n<\/code><\/pre>\n<p>As for the row, its height should be set automatically. The gap between the columns should be equal to <code>1rem<\/code>:<\/p>\n<pre><code class=\"css language-css\">.sponsors {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  grid-template-rows: auto;\r\n  grid-column-gap: 1rem;\r\n}\r\n<\/code><\/pre>\n<p>Style each item:<\/p>\n<pre><code class=\"css language-css\">.sponsor {\r\n  margin-left: 0;\r\n  margin-right: 0;\r\n  background-color: #fff;\r\n  border-radius: 0.625rem;\r\n}\r\n<\/code><\/pre>\n<p>Here\u2019s the intermediate result:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342997398_sponsors.png\" alt=\"Sponsors section progress\" width=\"600\" height=\"274\" class=\"aligncenter size-full wp-image-167623\" \/><\/p>\n<p>This example illustrates that you can nest grids without any problems. Another solution might be using Flexbox, but in this case the sponsors may wrap if there\u2019s not enough width for them.<\/p>\n<p>Now I would like to center the images both vertically and horizontally. We might try doing the following:<\/p>\n<pre><code class=\"css language-css\">.sponsor {\r\n  place-self: center;\r\n}\r\n<\/code><\/pre>\n<p><code>place-self<\/code> aligns the element on the X and Y axes. It\u2019s a shorthand property to <code>align-self<\/code> and <code>justify-self<\/code>.<\/p>\n<p>The images will indeed be aligned, but unfortunately the white background is gone. This is because each <code>.sponsor<\/code> now has width and height equal to the image\u2019s dimensions:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342998909_place_self.png\" alt=\"Results of a place-self layout\" width=\"628\" height=\"262\" class=\"aligncenter size-full wp-image-167624\" \/><\/p>\n<p>It means that we need a different approach here, and one of the possible solutions is to employ Flexbox:<\/p>\n<pre><code class=\"css language-css\">.sponsor {\r\n  \/\/ ...\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n<\/code><\/pre>\n<p>Now everything is displayed properly, and now we know that Grid plays nicely with Flexbox:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153429999810_flexbox.png\" alt=\"Sponsor layout using flexbox\" width=\"621\" height=\"261\" class=\"aligncenter size-full wp-image-167625\" \/><\/p>\n<h2 id=\"footer\">Footer<\/h2>\n<p>Our last section is the footer, and it\u2019s actually the simplest section. All we have to do is span it to all three columns:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-template-areas:\r\n          \"logo menu menu\"\r\n          \"content content sidebar\"\r\n          \"sponsors sponsors sponsors\"\r\n          \"footer footer footer\";\r\n}\r\n<\/code><\/pre>\n<p>Basically, the layout is finished! However, we\u2019re not done yet: the site also has to be responsive. So, let\u2019s take care of this task in the next section.<\/p>\n<h2 id=\"makingthelayoutresponsive\">Making the Layout Responsive<\/h2>\n<p>Having CSS Grid in place, it\u2019s actually very easy to introduce responsiveness, because we can quickly reposition the areas.<\/p>\n<h3 id=\"largescreens\">Large Screens<\/h3>\n<p>Let\u2019s start with large screens (in this article I\u2019ll be sticking to the <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/layout\/grid\/#grid-options\">same breakpoints as defined in Bootstrap 4<\/a>). I\u2019d like to decrease the horizontal margin of the main container and the gap between individual sponsors:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 992px) {\r\n  .container {\r\n    margin: 0 1rem;\r\n  }\r\n\r\n  .sponsors {\r\n    grid-column-gap: 0.5rem;\r\n  }\r\n}\r\n<\/code><\/pre>\n<h3 id=\"mediumscreens\">Medium Screens<\/h3>\n<p>On the medium screens, I\u2019d like the main content area and the sidebar to occupy all three columns:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 768px) {\r\n  .container {\r\n    grid-template-areas:\r\n            \"logo menu menu\"\r\n            \"content content content\"\r\n            \"sidebar sidebar sidebar\"\r\n            \"sponsors sponsors sponsors\"\r\n            \"footer footer footer\";\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>Let\u2019s also decrease font size and stack the sponsors so they\u2019re displayed one beneath another. The gap between the columns should be zero (because actually there will be only one column). Instead, I\u2019ll set a gap between the rows:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 768px) {\r\n  \/\/ ...\r\n  html {\r\n    font-size: 14px;\r\n  }\r\n\r\n  .sponsors {\r\n    grid-template-columns: 1fr;\r\n    grid-column-gap: 0;\r\n    grid-row-gap: 1rem;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>This is how the layout looks on medium screens now:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153430016611_stacked.png\" alt=\"A view of the layout on medium screens\" width=\"691\" height=\"548\" class=\"aligncenter size-full wp-image-167627\" \/><\/p>\n<h3 id=\"smallscreens\">Small Screens<\/h3>\n<p>On small screens, we\u2019re going to display each area on a separate row, which means that there will be only one column now:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 540px) {\r\n  .container {\r\n    grid-template-columns: 1fr;\r\n    grid-template-rows: auto;\r\n    grid-template-areas:\r\n            \"logo\"\r\n            \"menu\"\r\n            \"content\"\r\n            \"sidebar\"\r\n            \"sponsors\"\r\n            \"footer\";\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>The menu should not be pulled to the right in this case, and we also don\u2019t need the gap between the columns:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 540px) {\r\n  .container {\r\n    \/\/ ...\r\n    grid-gap: 2rem 0;\r\n  }\r\n\r\n  .main-menu {\r\n    justify-self: start;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>The job is done:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153430024913_everything_stacked.png\" alt=\"Elenets stacking in mobile view\" width=\"484\" height=\"432\" class=\"aligncenter size-full wp-image-167628\" \/><\/p>\n<p>Note that you may even rearrange the grid items easily for various screens. Suppose we\u2019d like to put the menu at the bottom on small screens (so that the visitors don\u2019t have to scroll up after they\u2019ve finished reading material on the page). To do that, simply tweak the <code>grid-template-areas<\/code>:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 540px) {\r\n  .container {\r\n    \/\/ ...\r\n    grid-template-areas:\r\n            \"logo\"\r\n            \"content\"\r\n            \"sidebar\"\r\n            \"sponsors\"\r\n            \"footer\"\r\n            \"menu\";\r\n  }\r\n}\r\n<\/code><\/pre>\n<h3 id=\"doingwithoutmediaqueries\">Doing Without Media Queries<\/h3>\n<p>It\u2019s worth mentioning that we can make the sponsors block responsive without any media queries at all. This is possible with the help of <code>auto-fit<\/code> property and <code>minmax<\/code> function. To see them in action, tweak the styles for the <code>.sponsors<\/code> like this:<\/p>\n<pre><code class=\"css language-css\">.sponsors {\r\n  \/\/ ...\r\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n}\r\n<\/code><\/pre>\n<p>The <code>repeat<\/code> function, as you already know, repeats the columns as many times as necessary.<\/p>\n<p><code>auto-fill<\/code> means \u201cfill the row with as many columns as possible\u201d. If there\u2019s not enough space for the column, it will be placed to the next line.<\/p>\n<p><code>minmax<\/code> allows us to specify the minimum and maximum value for the columns\u2019 widths. In this case, each column should span 1 fraction of free space, but no less than 200 pixels.<\/p>\n<p>All this means that on smaller screens the columns may be shrunk down to at most <code>200px<\/code> each. If there\u2019s still not enough space, one or multiple columns will be moved to a separate line. Here\u2019s the result of applying the above CSS rules:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153430051812_auto_fill.png\" alt=\"The sponsors block layout using auto-fill instead of media queries\" width=\"634\" height=\"482\" class=\"aligncenter size-full wp-image-167630\" \/><\/p>\n<h2 id=\"fallbacks\">Fallbacks<\/h2>\n<p>Unfortunately, CSS Grid is not yet fully supported by all browsers, and you may guess which one is still implementing an older version of the specification. Yeah, it\u2019s Internet Explorer 10 and 11. If you open the demo in those browsers, you\u2019ll see that the grid doesn\u2019t work at all, and the areas are simply stacked:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153430060214_ie.png\" alt=\"Layout sections stacked in IE\" width=\"511\" height=\"566\" class=\"aligncenter size-full wp-image-167631\" \/><\/p>\n<p>Of course, this isn\u2019t the end of the world, as the site is still usable, but let\u2019s add at least some fallback rules. The good news is that if the element is floated and also has grid assigned, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\/CSS_Grid_and_Progressive_Enhancement\">the grid takes precedence<\/a>. Also, the <code>display<\/code>, <code>vertical-align<\/code>, and some other properties <a href=\"https:\/\/rachelandrew.co.uk\/css\/cheatsheets\/grid-fallbacks\">also have no effect on grid items<\/a>, so let\u2019s take advantage of that fact.<\/p>\n<p>The stacked menu looks nice as is, but the sidebar should probably be placed next to the main content, not below it. We can achieve this by using <code>display: inline-block<\/code>:<\/p>\n<pre><code class=\"css language-css\">.content-area {\r\n  display: inline-block;\r\n  vertical-align: top;\r\n}\r\n\r\n.sidebar {\r\n  display: inline-block;\r\n  vertical-align: top;\r\n}\r\n<\/code><\/pre>\n<p>In all browsers that support grid, these properties will have no effect, but in IE they\u2019ll be applied as expected. One more property we need to tweak is the <code>width<\/code>:<\/p>\n<pre><code class=\"css language-css\">.content-area {\r\n  width: 69%;\r\n  display: inline-block;\r\n  vertical-align: top;\r\n}\r\n\r\n.sidebar {\r\n  width: 30%;\r\n  display: inline-block;\r\n  vertical-align: top;\r\n}\r\n<\/code><\/pre>\n<p>But having added these styles, our grid layout will now look much worse, because the <code>width<\/code> property <em>isn\u2019t<\/em> ignored by grid items. This can be fixed with the help of the <code>@supports<\/code> CSS query. <a href=\"https:\/\/caniuse.com\/#feat=css-supports-api\">IE doesn\u2019t understand these queries<\/a>, but it doesn\u2019t need to: we\u2019ll use it to fix the grid!<\/p>\n<pre><code class=\"css language-css\">@supports (display: grid) {\r\n  .content-area, .sidebar  {\r\n    width: auto;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>Now let\u2019s take care of the sponsor items and add some top margin for each block:<\/p>\n<pre><code class=\"css language-css\">.sponsor {\r\n  vertical-align: middle;\r\n}\r\n\r\n.main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer  {\r\n  margin-top: 2rem;\r\n}\r\n<\/code><\/pre>\n<p>We don\u2019t need any top margin when the grid is supported, so nullify it inside the <code>@supports<\/code> query:<\/p>\n<pre><code class=\"css language-css\">@supports (display: grid) {\r\n  \/\/ ...\r\n  .main-menu, .content-area, .sidebar, .sponsors-wrapper, .footer, .sponsor {\r\n    margin-top: 0;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>Lastly, let\u2019s add some responsiveness for IE. We\u2019ll simply stretch the main content, sidebar, and each sponsor to full width on smaller screens:<\/p>\n<pre><code class=\"css language-css\">@media all and (max-width: 760px) {\r\n  .content-area, .sidebar {\r\n    display: block;\r\n    width: 100%;\r\n  }\r\n\r\n  .sponsor {\r\n    width: 100%;\r\n    margin-top: 1rem;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>Don\u2019t forget to fix the sponsor\u2019s width for the browsers that support grid:<\/p>\n<pre><code class=\"css language-css\">@supports (display: grid) {\r\n  \/\/ ..\r\n\r\n  .sponsor {\r\n    width: auto;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>Here\u2019s how the layout looks in Internet Explorer now:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/153430082215_fallback.png\" alt=\"The final layout in Internet Explorer\" width=\"786\" height=\"701\" class=\"aligncenter size-full wp-image-167632\" \/><\/p>\n<p>You can view the final result on CodePen:<\/p>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"xJNZqB\" data-default-tab=\"css,result\" data-user=\"SitePoint\" data-pen-title=\"SP: Multi-Column Layout With Grid\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/xJNZqB\/\">SP: Multi-Column Layout With Grid<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>In this article, we\u2019ve seen CSS Grid in action and utilized it to redesign an existing float-based layout. Comparing these two solutions, we can see that the HTML and CSS code of the \u201cgrid\u201d solution is smaller (not counting the fallbacks, of course), simpler, and more expressive. With the help of the <code>grid-template-areas<\/code> property, it\u2019s easy to understand how individual areas are laid out, and we can quickly reposition them or adjust their sizes. On top of that, we don\u2019t need to rely on various hacky tricks like clearfix.<\/p>\n<p>So, as you see, CSS Grid is a great alternative to floats, and it\u2019s very much production-ready. You may need to provide some fallback rules for Internet Explorer (that implements an older version of the specification), but as you\u2019ve seen, they\u2019re not very complex, and in general the site is still usable even without any backwards compatibility at all.<\/p>\n<p>Have you already tried creating websites with CSS Grid? What are your impressions? Share your thoughts in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p><strong>In this article, we\u2019re going to see CSS Grid in action by creating a responsive multi-column website layout.<\/strong><\/p>\n<p>CSS Grid is a new, hot trend in web development these days. Forget about table layouts and floats: a new way to design websites is already here! This technology introduces two-dimensional grids which define multiple areas of layout with a handful of CSS rules.<\/p>\n<p>Grid can make third-party frameworks such as <a href=\"https:\/\/960.gs\/\">960gs<\/a> or <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/layout\/grid\/\">Bootstrap grid<\/a> redundant, as you may easily do everything yourself! This feature <a href=\"https:\/\/caniuse.com\/#feat=css-grid\">is supported by all major browsers<\/a>, though Internet Explorer implements an older version of the specification.<\/p>\n<h2 id=\"whatweregoingtobuild\">What We\u2019re Going to Build<\/h2>\n<p>So, we were asked to create a typical website layout with a header, main content area, sidebar to the right, a list of sponsors, and a footer:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342982501_initial-960x1024.png\" alt=\"The initial starting point\" width=\"960\" height=\"1024\" class=\"aligncenter size-large wp-image-167614\" \/><\/p>\n<p>Another developer has already tried to solve this task and came up with a solution that involves floats, <code>display: table<\/code>, and some clearfix hacks. We\u2019re going to refer to this existing layout as &#8220;initial&#8221;:<\/p>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"oMRjda\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"SP: Multi-Column Layout With Floats\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/oMRjda\/\">SP: Multi-Column Layout With Floats<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Until recently, floats were considered to be the best option to create such layouts. Prior to that, we had to utilize HTML tables, but they had a number of downsides. Specifically, such table layout is very rigid, requiring lots of tags (<code>table<\/code>, <code>tr<\/code>, <code>td<\/code>, <code>th<\/code> etc), and semantically these tags are used to present table data, not to design layouts.<\/p>\n<p>But CSS continues to evolve, and now we have CSS Grid. Conceptually, it\u2019s similar to an old table layout but can use semantic HTML elements with a more flexible layout.<\/p>\n<h2 id=\"planningthegrid\">Planning the Grid<\/h2>\n<p>First things first: we need to define a basic HTML structure for our document. Before that, let\u2019s briefly talk about how the initial example works. It has the following main blocks:<\/p>\n<ul>\n<li><code>.container<\/code> is the global wrapper that has small margins to the left and to the right.<\/li>\n<li><code>.main-header<\/code> is the header that contains the <code>.logo<\/code> (occupying 20% of the space, floating to the left) and the <code>.main-menu<\/code> (occupying 79% of the space, floating to the right). The header is also assigned a hacky fix to clear the floats.<\/li>\n<li><code>.content-area-wrapper<\/code> wraps the main <code>.content-area<\/code> (occupying 66.6% of the space minus <code>1rem<\/code> reserved for margin, floating to the left) and the <code>.sidebar<\/code> (occupying 33.3% of the space, floating to the right). The wrapper itself is also assigned with a clearfix.<\/li>\n<li><code>.sponsors-wrapper<\/code> contains the logos of the sponsors. Inside, there\u2019s a <code>.sponsors<\/code> section with the <code>display<\/code> property set to <code>table<\/code>. Each sponsor, in turn, is displayed as a table cell.<\/li>\n<li><code>.footer<\/code> is our footer and spans to 100% of the space.<\/li>\n<\/ul>\n<p>Our new layout will be very similar to the initial one, but with one exception: we won\u2019t add the <code>.main-header<\/code> and <code>.content-area-wrapper<\/code> wrappers because the clearfixes won\u2019t be required anymore. Here is the new version of the HTML:<\/p>\n<pre><code class=\"markup language-markup\">&lt;div class=\"container\"&gt;\r\n  &lt;header class=\"logo\"&gt;\r\n    &lt;h1&gt;&lt;a href=\"#\"&gt;DemoSite&lt;\/a&gt;&lt;\/h1&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;nav class=\"main-menu\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Our clients&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Products&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"main-menu__item\"&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n\r\n  &lt;main class=\"content-area\"&gt;\r\n    &lt;h2&gt;Welcome!&lt;\/h2&gt;\r\n\r\n    &lt;p&gt;\r\n      Content\r\n    &lt;\/p&gt;\r\n  &lt;\/main&gt;\r\n\r\n  &lt;aside class=\"sidebar\"&gt;\r\n    &lt;h3&gt;Additional stuff&lt;\/h3&gt;\r\n\r\n    &lt;ul&gt;\r\n      &lt;li&gt;Items&lt;\/li&gt;\r\n      &lt;li&gt;Are&lt;\/li&gt;\r\n      &lt;li&gt;Listed&lt;\/li&gt;\r\n      &lt;li&gt;Here&lt;\/li&gt;\r\n      &lt;li&gt;Wow!&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/aside&gt;\r\n\r\n  &lt;section class=\"sponsors-wrapper\"&gt;\r\n    &lt;h2&gt;Our sponsors&lt;\/h2&gt;\r\n\r\n    &lt;section class=\"sponsors\"&gt;\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/150x150\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/200x150\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/100x200\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/100x100\"&gt;\r\n      &lt;\/figure&gt;\r\n\r\n      &lt;figure class=\"sponsor\"&gt;\r\n        &lt;img src=\"https:\/\/via.placeholder.com\/200x200\"&gt;\r\n      &lt;\/figure&gt;\r\n    &lt;\/section&gt;\r\n\r\n  &lt;\/section&gt;\r\n\r\n  &lt;footer class=\"footer\"&gt;\r\n    &lt;p&gt;\r\n      &amp;copy; 2018 DemoSite. White&amp;amp;Sons LLC. All rights (perhaps) reserved.\r\n    &lt;\/p&gt;\r\n  &lt;\/footer&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>Note that you may utilize the <code>body<\/code> as the global <code>.container<\/code>; that\u2019s just a matter of preference in this case. All in all, we have six main areas:<\/p>\n<ol>\n<li>Logo<\/li>\n<li>Menu<\/li>\n<li>Main content<\/li>\n<li>Sidebar<\/li>\n<li>Sponsors<\/li>\n<li>Footer<\/li>\n<\/ol>\n<p>Usually it\u2019s recommended that you implement a mobile-first approach. That is, you start from the mobile layout and then add styles for larger screens. This isn\u2019t necessary in this case, since we\u2019re adapting an initial layout that already falls back to a linearized view on small-screen devices. Therefore, let\u2019s start by focusing on the grid\u2019s implementation, and after that talk about responsiveness and fallback rules. So, return to our scheme and see how the grid columns can be arranged:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/15342987132_columns-960x1024.png\" alt=\"Grid column arrangement\" width=\"960\" height=\"1024\" class=\"aligncenter size-large wp-image-167615\" \/><\/p>\n<p>So, I propose having three columns (highlighted in red) and four rows (highlighted in blue). Some areas, like the logo, are going to occupy only one column, whereas others, like main content, are going to span multiple columns. Later we can easily modify the layout, move the areas around, or add new ones.<\/p>\n<p>Following the scheme, give each area a unique name. These will be used in the layout defined below:<\/p>\n<pre><code class=\"css language-css\">.logo {\r\n  grid-area: logo;\r\n}\r\n\r\n.main-menu {\r\n  grid-area: menu;\r\n}\r\n\r\n.content-area {\r\n  grid-area: content;\r\n}\r\n\r\n.sidebar {\r\n  grid-area: sidebar;\r\n}\r\n\r\n.sponsors-wrapper {\r\n  grid-area: sponsors;\r\n}\r\n\r\n.footer {\r\n  grid-area: footer;\r\n}\r\n<\/code><\/pre>\n<p>Now set the <code>display<\/code> property to <code>grid<\/code>, define three columns and add small margins to the left and right of the main container:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  display: grid;\r\n  margin: 0 2rem;\r\n  grid-template-columns: 2fr 6fr 4fr;\r\n}\r\n<\/code><\/pre>\n<p><code>display: grid<\/code> defines a grid container and sets a special formatting context for its children. <code>fr<\/code> is a special unit that means &#8220;fraction of the free space of the grid container&#8221;. <code>2 + 6 + 4<\/code> gives us <code>12<\/code>, and <code>6 \/ 12 = 0.5<\/code>. It means that the middle column is going to occupy 50% of the free space.<\/p>\n<p>I would also like to add some spacing between the rows and columns:<\/p>\n<pre><code class=\"css language-css\">.container {\r\n  \/\/ ...\r\n  grid-gap: 2rem 1rem;\r\n}\r\n<\/code><\/pre>\n<p>Having done this, we can work with individual areas. But before wrapping up this section, let\u2019s quickly add some common styles:<\/p>\n<pre><code class=\"css language-css\">* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  font-size: 16px;\r\n  font-family: Georgia, serif;\r\n}\r\n\r\nbody {\r\n  background-color: #fbfbfb;\r\n}\r\n\r\nh1, h2, h3 {\r\n  margin-top: 0;\r\n}\r\n\r\nheader h1 {\r\n  margin: 0;\r\n}\r\n\r\nmain p {\r\n  margin-bottom: 0;\r\n}\r\n<\/code><\/pre>\n<p>Good! Now we can proceed to the first target, which is going to be the header.<\/p>\n","protected":false},"author":71724,"featured_media":167615,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[408,409,6523],"tags":[11873,11874,7404,9841],"_links":{"self":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/167612"}],"collection":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/users\/71724"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/comments?post=167612"}],"version-history":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/167612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media\/167615"}],"wp:attachment":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media?parent=167612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/categories?post=167612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/tags?post=167612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":167596,"date":"2018-08-14T09:00:23","date_gmt":"2018-08-14T16:00:23","guid":{"rendered":"https:\/\/www.sitepoint.com\/?p=167596"},"modified":"2018-08-13T20:41:21","modified_gmt":"2018-08-14T03:41:21","slug":"variable-fonts-introduction","status":"publish","type":"post","link":"https:\/\/www.sitepoint.com\/variable-fonts-introduction\/","title":{"rendered":"Variable Fonts: What They Are, and How to Use Them"},"content":{"rendered":"<p><strong>In this article, we&#8217;ll take a look at the exciting new possibilities surrounding variable fonts \u2014 now bundled with the OpenType scalable font format \u2014 which allows a single font to behave like multiple fonts.<\/strong><\/p>\n<h2 id=\"howwegothere\">How We Got Here<\/h2>\n<p>When HTML was created, fonts and styles were controlled exclusively by the settings of each web browser. In the mid \u201990s, the first typefaces for screen-based media were created: Georgia and Verdana. These, together with the system fonts \u2014 Arial, Times New Roman, and Helvetica \u2014 were the only fonts available for web browsers (not exactly the only ones, but the ones we could find in every operating system).<\/p>\n<p><a href=\"https:\/\/thehistoryoftheweb.com\/web-fonts\/\">With the evolution of web browsers<\/a>, innovations like the <code>&lt;font&gt;<\/code> tag on Netscape Navigator and the first CSS specification allowed web pages to control what font was displayed. However, these fonts needed to be installed on the user&#8217;s computer.<\/p>\n<p>In 1998, the CSS working group proposed the support of the <code>@font-face<\/code> rule to allow any typeface to be rendered on web pages. IE4 implemented the technology but the distribution of fonts to every user&#8217;s browser raised licensing and piracy issues.<\/p>\n<p>The early 2000s saw the rise of image replacement techniques which substituted HTML content with styled-text images. Each piece of text had to be sliced in programs like Photoshop. This technique had the major advantage of allowing designers to use any typeface available without having to deal with font licensing.<\/p>\n<p>In 2008, <code>@font-face<\/code> finally made a comeback when Apple Safari and Mozilla Firefox implemented it. This came out of the necessity of providing a simple way for designers and developers to use custom fonts rather than inaccessible images.<\/p>\n<p>It wasn&#8217;t until the arrival of the <a href=\"https:\/\/www.w3.org\/TR\/css-fonts-3\/\">CSS3 Fonts Module<\/a>  in 2012 that font downloading became viable. Once implemented, a font downloaded by a web page could only be used on that page and not copied to the operating system. Font downloading allowed remote fonts to be downloaded and used by the browser, meaning that web designers could now use fonts that were not installed on the user&#8217;s computer. When web designers found the font they wished to use, they just needed to include the font file on the web server, and it would be automatically downloaded to the user when needed. These fonts were referenced using the <code>@font-face<\/code> rule.<\/p>\n<p>To use the <code>@font-face<\/code> rule we have to define a font name and point to the font file:<\/p>\n<pre><code class=\"css language-css\">@font-face {\r\n  font-family: Avenir Next Variable;\r\n  src: url(AvenirNext_Variable.woff);\r\n}\r\n<\/code><\/pre>\n<p>The font file can be one of five different formats: TTF, WOFF, WOFF2, SVG or EOT. Each has its own <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_typography#File_formats\">advantages and disadvantages<\/a>. Putting it simply, EOT was created by Microsoft and only is supported by Internet Explorer. TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere. SVG is based on image replacement techniques and is only suitable for the Web. Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.<\/p>\n<h2 id=\"variablefonts\">Variable Fonts<\/h2>\n<p>Version 1.8 of OpenType (the computer scalable font format) was released in 2016. A brand new technology shipped with it: OpenType font variations, also known as <strong>variable fonts<\/strong>.<\/p>\n<p>This technology allows a single font to behave like multiple fonts. It&#8217;s done by defining variations within the font. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave. It\u2019s not necessary to define multiple font weights because they can be interpolated between very narrow and very wide definitions. This also makes it possible to generate styles in between \u2014 for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A.<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534214388letter-a.png\" alt=\"Interpolation over the letter A\" width=\"555\" height=\"327\" class=\"aligncenter size-full wp-image-167598\" \/><\/p>\n<h3 id=\"whyarevariablefontsrelevant\">Why are Variable Fonts Relevant?<\/h3>\n<p>Variable fonts can bring both simplicity to our font structure and performance improvements. Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files.<\/p>\n<h2 id=\"usingvariablefonts\">Using Variable Fonts<\/h2>\n<p>There are currently two different ways to use variable fonts. First, we&#8217;ll look at the modern way of implementing those. The CSS specification <a href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#font-variation-settings-def\">strongly prefers<\/a> using <code>font-optical-sizing<\/code>, <code>font-style<\/code>, <code>font-weight<\/code> and <code>font-stretch<\/code> for controlling any of the standard axes.<\/p>\n<h3 id=\"fontopticalsizing\"><code>font-optical-sizing<\/code><\/h3>\n<p>This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value <code>none<\/code>, for when the browser cannot modify the shape of glyphs, or <code>auto<\/code> for when it can. On a browser that supports <code>font-optical-sizing<\/code>, a font where the value is set to <code>auto<\/code> can vary like the font in the image below:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534214562font-optical-sizing.png\" alt=\"Font-optical-sizing example\" width=\"900\" height=\"576\" class=\"aligncenter size-full wp-image-167599\" \/><\/p>\n<p>With the value set to <code>none<\/code> there would be no variation to the font.<\/p>\n<h3 id=\"fontstyle\"><code>font-style<\/code><\/h3>\n<p>This property specifies whether a font should be styled with a normal, italic, or oblique face from its font family. It can take the <code>normal<\/code>, <code>italic<\/code> or <code>oblique<\/code> values.<\/p>\n<h3 id=\"fontweight\"><code>font-weight<\/code><\/h3>\n<p>This property specifies the weight (or boldness) of the font. One thing to note is that, with normal fonts, named instances can be defined. For example, <code>bold<\/code> is the same as <code>font-weight: 700<\/code> or <code>extra-light<\/code> is the same as <code>font-weight: 200<\/code>. The <code>font-weight<\/code> property can also be any number between 1 and 1000, but when using variable fonts, due to the interpolarity, we can have a much finer granularity. For example, a value like <code>font-weight: 200.01<\/code> is now possible.<\/p>\n<h3 id=\"fontstretch\"><code>font-stretch<\/code><\/h3>\n<p>This property selects a normal, condensed, or expanded face from a font. Just like the <code>font-weight<\/code> property, it can be a named instance like <code>extra-condensed<\/code> or <code>normal<\/code> or a percentage between 0% and 100%. Also, named instances will map to known percentages. For example, <code>extra-condensed<\/code> will map to 62.5%.<\/p>\n<p>For this example, I created a very simple page with a single <code>&lt;h1&gt;<\/code> heading and <code>&lt;p&gt;<\/code> paragraph.<\/p>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"JBVXQM\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"Variable Fonts HTML\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/JBVXQM\/\">Variable Fonts HTML<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Currently, our unstyled webpage looks like this:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534214875unstyled-page-1024x189.png\" alt=\"Simple webpage\" width=\"1024\" height=\"189\" class=\"aligncenter size-large wp-image-167601\" \/><\/p>\n<p>To use a variable font, we must find a suitable file. The <a href=\"https:\/\/v-fonts.com\/\">v-fonts project<\/a> provides a font repository where we can search and experiment with all type of variable fonts. I decided to use the <code>AvenirNext<\/code> font and link it from its <a href=\"https:\/\/github.com\/Monotype\/Monotype_prototype_variable_fonts\/tree\/master\/AvenirNext\">official GitHub page<\/a>.<\/p>\n<p>Then we need to create a CSS file to load this new font:<\/p>\n<pre><code class=\"css language-css\">@font-face {\r\n  font-family: 'Avenir Next Variable';\r\n  src: url('AvenirNext_Variable.ttf') format('truetype');\r\n}\r\n\r\nbody {\r\n  font-family: 'Avenir Next Variable', sans-serif;\r\n}\r\n<\/code><\/pre>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"vaMKBV\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"Loaded variable font\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/vaMKBV\/\">Loaded variable font<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Due to browser support issues, this example will only apply font variations in Safari and Chrome.<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534215058font-loaded-1024x176.png\" alt=\"Variable font being loaded\" width=\"1024\" height=\"176\" class=\"aligncenter size-large wp-image-167602\" \/><\/p>\n<p>With our font loaded, we can now use the <code>font-weight<\/code> property to manipulate the weight axis of our variable font.<\/p>\n<pre><code class=\"css language-css\">h1 {\r\n  font-family: 'Avenir Next Variable';\r\n  font-weight: 430;\r\n}\r\n<\/code><\/pre>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"mjgEdv\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"SourceSans variable font\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/mjgEdv\/\">SourceSans variable font<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Most of the time we\u2019ll also need two different font files: one for italic and one for regular fonts (roman). This happens because the construction of these fonts can be radically different.<\/p>\n<h2 id=\"usingfontvariationsettings\">Using font-variation-settings<\/h2>\n<p>The second way of using variable fonts is by using the <code>font-variation-settings<\/code> CSS property. This property was introduced to provide <a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/dvaraxisreg\">control over OpenType or TrueType font variations<\/a>, by specifying the four-letter axis names of the features you want to vary along with their variation values. Currently, we have access to the following aspects of the font:<\/p>\n<ul>\n<li><strong>wght<\/strong> \u2014 weight, which is identical to the <code>font-weight<\/code> CSS property. The value can be anything from 1 to 999.<\/li>\n<li><strong>wdth<\/strong> \u2014 width, which is identical to by the <code>font-stretch<\/code> CSS property. It can take a keyword or a percentage value. This axis is normally defined by the font designer to expand or condense elegantly.<\/li>\n<li><strong>opsz<\/strong> \u2014 optical sizing, which can be turned on and off using the <code>font-optical-sizing<\/code> property.<\/li>\n<li><strong>ital<\/strong> \u2014 italicization, which is controlled by the <code>font-style<\/code> CSS property when is set to <code>italic<\/code>.<\/li>\n<li><strong>slnt<\/strong> \u2014 slant, which is identical to the <code>font-style<\/code> CSS property when it\u2019s set to <code>oblique<\/code>. It will default to a 20 degree slant, but it can also accept a specified degree between -90deg and 90deg.<\/li>\n<\/ul>\n<p>According to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-variation-settings\">specification<\/a>, this property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists. Because of that, we should try to use <code>@font-face<\/code> instead.<\/p>\n<p>Using the same webpage and font as above, let&#8217;s try to set the weight and width on our font using the low-level controller:<\/p>\n<pre><code class=\"css language-css\">p {\r\n  font-variation-settings: 'wght' 630, 'wdth' 88;\r\n}\r\n<\/code><\/pre>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"oMOLXy\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"Variable fonts 1\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/oMOLXy\/\">Variable fonts 1<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534215386font-variation-setting-example-1024x174.png\" alt=\"Font variation setting example\" width=\"1024\" height=\"174\" class=\"aligncenter size-large wp-image-167603\" \/><\/p>\n<p>The declaration is equivalent to the following CSS declaration:<\/p>\n<pre><code class=\"css language-css\">p {\r\n  font-weight: 630;\r\n  font-stretch: 88;\r\n}\r\n<\/code><\/pre>\n<h2 id=\"performance\">Performance<\/h2>\n<p>Performance is a key advantage of variable fonts. The <code>AvenirNext_Variable.ttf<\/code> font file is only 89kB but creates a range of weights. A comparable standard font may have a smaller file but would only support one weight and style. Further options require additional files and raise the page weight accordingly.<\/p>\n<p>But we can go even further. When we talked about font formats, we said that WOFF2 files are essentially TTF files with extra compression. WOFF2 files are smaller because they use custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.<\/p>\n<p>Google offers a command line tool that will compress our file converting it to a <code>woff2<\/code> format.<\/p>\n<p>On the tool&#8217;s <a href=\"https:\/\/github.com\/google\/woff2\">official GitHub page<\/a>, we can find all the information about it. To install it on a Unix environment, we can use the following commands:<\/p>\n<pre><code class=\"bash language-bash\">git clone --recursive https:\/\/github.com\/google\/woff2.git\r\ncd woff2\r\nmake clean all\r\n<\/code><\/pre>\n<p>After installing it, we can use it to compress our variable font file by using:<\/p>\n<pre><code class=\"bash language-bash\">woff2_compress AvenirNext_Variable.ttf\r\n<\/code><\/pre>\n<p>And we end up with a 42kb file, which halved the file size. To use this file, we just need to modify the sourced file and its format to accommodate this new file:<\/p>\n<pre><code class=\"CSS language-CSS\">src: url('AvenirNext_Variable.woff2') format('woff2');\r\n<\/code><\/pre>\n<p>We now have a single 42Kb file which could be used for all the font weights on our page. The only downside to the <code>woff2<\/code> format is that it&#8217;s not supported by Internet Explorer.<\/p>\n<h3 id=\"servingdifferentfilesfordifferentbrowsers\">Serving Different Files for Different Browsers<\/h3>\n<p>While some modern browsers already support variable fonts (Firefox developer editions have some level of support, Chrome 62, Chrome Android, Safari iOS, and Safari), there might be the case where we find one that doesn&#8217;t.<\/p>\n<p>To get around this, we&#8217;ll need to either serve non-variable for those browsers or use an operating system font fallback.<\/p>\n<p>Browsers that support variable fonts will download the file marked as <code>format('woff2-variations')<\/code>, while browsers that don&#8217;t will download the single style font marked as <code>format('ttf')<\/code>. This is possible because we can repeat references to variables in each rule. If the first fails, the second will be loaded. Just like the following:<\/p>\n<pre><code class=\"css language-css\">@font-face {\r\n  font-family: 'Avenir Next Variable';\r\n  src: url('AvenirNext_Variable.woff2') format('woff2-variations');\r\n  src: url('AvenirNextLTPro-Bold.otf') format('truetype');\r\n}\r\n\r\nhtml {\r\n  font-family: 'Avenir Next Variable', sans-serif;\r\n}\r\n\r\nh1 {\r\n  font-family: 'Avenir Next Variable';\r\n  font-weight: 430;\r\n}\r\n\r\nh2 {\r\n  font-family: 'Avenir Next Variable';\r\n  font-weight: 630;\r\n}\r\n<\/code><\/pre>\n<p>The next example uses a different file format from the one we&#8217;re working with, but uses the same principle:<\/p>\n<p data-height=\"300\" data-theme-id=\"6441\" data-slug-hash=\"VBNjaE\" data-default-tab=\"html,result\" data-user=\"SitePoint\" data-pen-title=\"Multiple fonts\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/SitePoint\/pen\/VBNjaE\/\">Multiple fonts<\/a> by SitePoint (<a href=\"https:\/\/codepen.io\/SitePoint\">@SitePoint<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>If we check the result on a browser that supports variable fonts, like Chrome, we can see the following:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534215684chrome-variable-1024x160.png\" alt=\"Chrome with variable fonts\" width=\"1024\" height=\"160\" class=\"aligncenter size-large wp-image-167605\" \/><\/p>\n<p>On a browser that doesn&#8217;t support variable fonts, like Firefox, the second font will be loaded and the result will look like this:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534215760no-variable-firefox-1024x159.png\" alt=\"Firefox without variable fonts\" width=\"1024\" height=\"159\" class=\"aligncenter size-large wp-image-167606\" \/><\/p>\n<p>But if we still have to serve non-variable fonts to browsers that don&#8217;t support variable ones, don&#8217;t we lose all the performance we just gained with the variable font? If a browser can only load the standard font, we lose the performance and rendering benefits of variable fonts. In those situations, it may be preferable to fallback to a comparable operating system font rather than substitute it with many fixed fonts.<\/p>\n<h3 id=\"conclusion\">Conclusion<\/h3>\n<p>Despite being available for several years now, variable fonts are still in their infancy. Browser support is scarce and there are few fonts to choose from. However, the potential is enormous, and variable fonts will permit better performance while simplifying development. For example, SitePoint&#8217;s own front page currently loads eight font files with a total of 273kB. Variable fonts could reduce this dependency and cut page weight further.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><strong>In this article, we&#8217;ll take a look at the exciting new possibilities surrounding variable fonts \u2014 now bundled with the OpenType scalable font format \u2014 which allows a single font to behave like multiple fonts.<\/strong><\/p>\n<h2 id=\"howwegothere\">How We Got Here<\/h2>\n<p>When HTML was created, fonts and styles were controlled exclusively by the settings of each web browser. In the mid \u201990s, the first typefaces for screen-based media were created: Georgia and Verdana. These, together with the system fonts \u2014 Arial, Times New Roman, and Helvetica \u2014 were the only fonts available for web browsers (not exactly the only ones, but the ones we could find in every operating system).<\/p>\n<p><a href=\"https:\/\/thehistoryoftheweb.com\/web-fonts\/\">With the evolution of web browsers<\/a>, innovations like the <code>&lt;font&gt;<\/code> tag on Netscape Navigator and the first CSS specification allowed web pages to control what font was displayed. However, these fonts needed to be installed on the user&#8217;s computer.<\/p>\n<p>In 1998, the CSS working group proposed the support of the <code>@font-face<\/code> rule to allow any typeface to be rendered on web pages. IE4 implemented the technology but the distribution of fonts to every user&#8217;s browser raised licensing and piracy issues.<\/p>\n<p>The early 2000s saw the rise of image replacement techniques which substituted HTML content with styled-text images. Each piece of text had to be sliced in programs like Photoshop. This technique had the major advantage of allowing designers to use any typeface available without having to deal with font licensing.<\/p>\n<p>In 2008, <code>@font-face<\/code> finally made a comeback when Apple Safari and Mozilla Firefox implemented it. This came out of the necessity of providing a simple way for designers and developers to use custom fonts rather than inaccessible images.<\/p>\n<p>It wasn&#8217;t until the arrival of the <a href=\"https:\/\/www.w3.org\/TR\/css-fonts-3\/\">CSS3 Fonts Module<\/a>  in 2012 that font downloading became viable. Once implemented, a font downloaded by a web page could only be used on that page and not copied to the operating system. Font downloading allowed remote fonts to be downloaded and used by the browser, meaning that web designers could now use fonts that were not installed on the user&#8217;s computer. When web designers found the font they wished to use, they just needed to include the font file on the web server, and it would be automatically downloaded to the user when needed. These fonts were referenced using the <code>@font-face<\/code> rule.<\/p>\n<p>To use the <code>@font-face<\/code> rule we have to define a font name and point to the font file:<\/p>\n<pre><code class=\"css language-css\">@font-face {\r\n  font-family: Avenir Next Variable;\r\n  src: url(AvenirNext_Variable.woff);\r\n}\r\n<\/code><\/pre>\n<p>The font file can be one of five different formats: TTF, WOFF, WOFF2, SVG or EOT. Each has its own <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_typography#File_formats\">advantages and disadvantages<\/a>. Putting it simply, EOT was created by Microsoft and only is supported by Internet Explorer. TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere. SVG is based on image replacement techniques and is only suitable for the Web. Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.<\/p>\n<h2 id=\"variablefonts\">Variable Fonts<\/h2>\n<p>Version 1.8 of OpenType (the computer scalable font format) was released in 2016. A brand new technology shipped with it: OpenType font variations, also known as <strong>variable fonts<\/strong>.<\/p>\n<p>This technology allows a single font to behave like multiple fonts. It&#8217;s done by defining variations within the font. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave. It\u2019s not necessary to define multiple font weights because they can be interpolated between very narrow and very wide definitions. This also makes it possible to generate styles in between \u2014 for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A.<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534214388letter-a.png\" alt=\"Interpolation over the letter A\" width=\"555\" height=\"327\" class=\"aligncenter size-full wp-image-167598\" \/><\/p>\n<h3 id=\"whyarevariablefontsrelevant\">Why are Variable Fonts Relevant?<\/h3>\n<p>Variable fonts can bring both simplicity to our font structure and performance improvements. Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files.<\/p>\n<h2 id=\"usingvariablefonts\">Using Variable Fonts<\/h2>\n<p>There are currently two different ways to use variable fonts. First, we&#8217;ll look at the modern way of implementing those. The CSS specification <a href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#font-variation-settings-def\">strongly prefers<\/a> using <code>font-optical-sizing<\/code>, <code>font-style<\/code>, <code>font-weight<\/code> and <code>font-stretch<\/code> for controlling any of the standard axes.<\/p>\n<h3 id=\"fontopticalsizing\"><code>font-optical-sizing<\/code><\/h3>\n<p>This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value <code>none<\/code>, for when the browser cannot modify the shape of glyphs, or <code>auto<\/code> for when it can. On a browser that supports <code>font-optical-sizing<\/code>, a font where the value is set to <code>auto<\/code> can vary like the font in the image below:<\/p>\n<p><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2018\/08\/1534214562font-optical-sizing.png\" alt=\"Font-optical-sizing example\" width=\"900\" height=\"576\" class=\"aligncenter size-full wp-image-167599\" \/><\/p>\n<p>With the value set to <code>none<\/code> there would be no variation to the font.<\/p>\n","protected":false},"author":72315,"featured_media":167610,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[408,409,6523,3859],"tags":[11873,11874,11552,3860,11877],"_links":{"self":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/167596"}],"collection":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/users\/72315"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/comments?post=167596"}],"version-history":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/167596\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media\/167610"}],"wp:attachment":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media?parent=167596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/categories?post=167596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/tags?post=167596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":63469,"date":"2018-08-14T08:00:40","date_gmt":"2018-08-14T15:00:40","guid":{"rendered":"http:\/\/www.sitepoint.com\/?p=63469"},"modified":"2018-08-14T06:15:08","modified_gmt":"2018-08-14T13:15:08","slug":"7-code-playgrounds","status":"publish","type":"post","link":"https:\/\/www.sitepoint.com\/7-code-playgrounds\/","title":{"rendered":"7 of the Best Code Playgrounds"},"content":{"rendered":"<p><strong>A variety of front-end code playgrounds have appeared over the years. The majority offer a quick and dirty way to experiment with client-side code and share with others. In this article, we take a quick look at seven of the best.<\/strong><\/p>\n<p>Typical features of these online playgrounds include:<\/p>\n<ul>\n<li>color-coded HTML, CSS and JavaScript editors<\/li>\n<li>a preview window \u2014 many update on the fly without a refresh<\/li>\n<li>HTML pre-processors such as HAML<\/li>\n<li>LESS, SASS and Stylus CSS pre-processing<\/li>\n<li>inclusion of popular JavaScript libraries<\/li>\n<li>developer consoles and code validation tools<\/li>\n<li>sharing via a short URL<\/li>\n<li>embedding demonstrations in other pages<\/li>\n<li>code forking<\/li>\n<li>zero cost (or payment for premium services only)<\/li>\n<li>showing off your coding skills to the world!<\/li>\n<\/ul>\n<p>The best feature: they allow you to test and keep experimental front-end code snippets without the rigmarole of creating files, firing up your IDE or setting up a local server.<\/p>\n<h2 style=\"clear:both\"><a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a><\/h2>\n<p><a href=\"https:\/\/jsfiddle.net\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-jsfiddle.png\" width=\"360\" height=\"225\" alt=\"JSFiddle\" class=\"right\" \/><\/a><a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a> was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It&#8217;s looking a little basic today, but still offers advanced functionality such as Ajax simulation.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/codepen.io\/\">CodePen<\/a><\/h2>\n<p><a href=\"http:\/\/codepen.io\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-codepen.png\" width=\"360\" height=\"225\" alt=\"CodePen\" class=\"right\" \/><\/a>The prize for the best-looking feature-packed playground goes to <a href=\"http:\/\/codepen.io\/\">CodePen<\/a>. The service, co-founded by Chris Coyier, highlights popular demonstrations (&#8220;Pens&#8221;) and <a href=\"https:\/\/blog.codepen.io\/2017\/03\/20\/codepen-projects-is-here\/\">Projects<\/a>, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature added in March 2017. It offers advanced functionality such as sharing and embedding of Pens, adding external JS and CSS libraries, popular preprocessors, and tons more. The PRO service provides cross-browser testing, pair-programming and teaching options starting from just $9 per month.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/cssdeck.com\/\">CSS Deck<\/a><\/h2>\n<p><a href=\"http:\/\/cssdeck.com\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-cssdeck.png\" width=\"360\" height=\"225\" alt=\"CSS Deck\" class=\"right\" \/><\/a>This may be named <a href=\"http:\/\/cssdeck.com\/\">CSS Deck<\/a>, but it&#8217;s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It&#8217;s similar to CodePen (I don&#8217;t know who influenced who!) but you might prefer it.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/jsbin.com\/\">JS Bin<\/a><\/h2>\n<p><a href=\"http:\/\/jsbin.com\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-jsbin.png\" width=\"360\" height=\"225\" alt=\"JS Bin\" class=\"right\" \/><\/a><a href=\"http:\/\/jsbin.com\/\">JS Bin<\/a> was started by JS guru <a href=\"http:\/\/remysharp.com\/\">Remy Sharp<\/a>. It concentrates on the basics and handles them exceedingly well. It also offers a handy JavaScript console. Recommended.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/dabblet.com\/\">Dabblet<\/a><\/h2>\n<p><a href=\"http:\/\/dabblet.com\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-dabblet.png\" width=\"360\" height=\"225\" alt=\"Dabblet\" class=\"right\" \/><\/a>Another early playground, <a href=\"http:\/\/dabblet.com\/\">Dabblet<\/a> started life as an HTML5\/CSS3 demonstration system by <a href=\"http:\/\/lea.verou.me\/\">Lea Verou<\/a> with JavaScript facilities. It looks gorgeous and autoprefixes all your CSS if needed.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/plnkr.co\/\">Plunker<\/a><\/h2>\n<p><a href=\"http:\/\/plnkr.co\/\"><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2013\/02\/1499879078plunker-300x169.png\" alt=\"Fron-end Code Playgrounds: Plunker\" width=\"300\" height=\"169\" class=\"right alignright size-medium wp-image-157200\" \/><\/a><a href=\"http:\/\/plnkr.co\/\">Plunker<\/a> lets you add multiple files, including community generated templates, to kick-start your project. Just like CodePen, with Plunker you can create working demos, also in collaboration with other devs, and share your work. Plunker&#8217;s source code is free and lives on its <a href=\"https:\/\/github.com\/filearts\/plunker\">GitHub repository<\/a>.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/liveweave.com\/\">Liveweave<\/a><\/h2>\n<p><a href=\"http:\/\/liveweave.com\/\"><img src=\"https:\/\/www.sitepoint.com\/wp-content\/uploads\/2013\/02\/1499880200liveweave-code-playground-300x164.png\" alt=\"Liveweave Code Playground\" width=\"300\" height=\"164\" class=\"right alignright size-medium wp-image-157203\" \/><\/a><a href=\"http:\/\/liveweave.com\/\">Liveweave<\/a> is one more online HTML5, CSS3 &#038; JavaScript editor with live preview capabilities. It offers code-hinting for HTML5, CSS3, JavaScript and jQuery and lets you download your project as a zip file.<\/p>\n<p>You can also add external libraries such as jQuery, AndgularJS, Bootstrap etc. quite easily in your workspace. Furthermore, Liveweave offers a ruler to help you code responsive designs and a \u201cTeam Up\u201d feature which has the same features as JSFiddle&#8217;s collaborative editing.<\/p>\n<h2>Other Options<\/h2>\n<p>There are, of course other options out there. Did we miss your favorite? Tell us about it!<\/p>\n<p>We haven&#8217;t talked here about online code playgrounds that will let you share back-end code too, such as <a href=\"https:\/\/codesandbox.io\">CodeSandbox<\/a>. For more on those, head over to James Hibbard&#8217;s <a href=\"https:\/\/www.sitepoint.com\/round-up-online-code-playgrounds\/\">round-up of online back-end code playgrounds<\/a> for more information.<\/p>\n<p>If you&#8217;d rather host your own online development environment, check out <a href=\"https:\/\/icecoder.net\/\">ICEcoder<\/a> (we have an article on it <a href=\"https:\/\/www.sitepoint.com\/edit-code-in-the-browser-with-icecoder\/\">here<\/a>).<\/p>\n<p>And if you&#8217;d rather not be online when messing with code, but want something similar, check out something like <a href=\"https:\/\/webmakerapp.com\/\">Web Maker<\/a> (we have an article on it <a href=\"https:\/\/www.sitepoint.com\/web-maker-an-offline-browser-based-codepen-alternative\/\">here<\/a>).<\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p><strong>A variety of front-end code playgrounds have appeared over the years. The majority offer a quick and dirty way to experiment with client-side code and share with others. In this article, we take a quick look at seven of the best.<\/strong><\/p>\n<p>Typical features of these online playgrounds include:<\/p>\n<ul>\n<li>color-coded HTML, CSS and JavaScript editors<\/li>\n<li>a preview window \u2014 many update on the fly without a refresh<\/li>\n<li>HTML pre-processors such as HAML<\/li>\n<li>LESS, SASS and Stylus CSS pre-processing<\/li>\n<li>inclusion of popular JavaScript libraries<\/li>\n<li>developer consoles and code validation tools<\/li>\n<li>sharing via a short URL<\/li>\n<li>embedding demonstrations in other pages<\/li>\n<li>code forking<\/li>\n<li>zero cost (or payment for premium services only)<\/li>\n<li>showing off your coding skills to the world!<\/li>\n<\/ul>\n<p>The best feature: they allow you to test and keep experimental front-end code snippets without the rigmarole of creating files, firing up your IDE or setting up a local server.<\/p>\n<h2 style=\"clear:both\"><a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a><\/h2>\n<p><a href=\"https:\/\/jsfiddle.net\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-jsfiddle.png\" width=\"360\" height=\"225\" alt=\"JSFiddle\" class=\"right\" \/><\/a><a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a> was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It&#8217;s looking a little basic today, but still offers advanced functionality such as Ajax simulation.<\/p>\n<h2 style=\"clear:both\"><a href=\"http:\/\/codepen.io\/\">CodePen<\/a><\/h2>\n<p><a href=\"http:\/\/codepen.io\/\"><img src=\"http:\/\/blogs.sitepointstatic.com\/images\/tech\/789-code-playgrounds-codepen.png\" width=\"360\" height=\"225\" alt=\"CodePen\" class=\"right\" \/><\/a>The prize for the best-looking feature-packed playground goes to <a href=\"http:\/\/codepen.io\/\">CodePen<\/a>. The service, co-founded by Chris Coyier, highlights popular demonstrations (&#8220;Pens&#8221;) and <a href=\"https:\/\/blog.codepen.io\/2017\/03\/20\/codepen-projects-is-here\/\">Projects<\/a>, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature added in March 2017. It offers advanced functionality such as sharing and embedding of Pens, adding external JS and CSS libraries, popular preprocessors, and tons more. The PRO service provides cross-browser testing, pair-programming and teaching options starting from just $9 per month.<\/p>\n","protected":false},"author":515,"featured_media":157189,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[408,409,755,411,6523,407,746,420],"tags":[997,9773,822,3073,10395],"_links":{"self":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/63469"}],"collection":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/users\/515"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/comments?post=63469"}],"version-history":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/posts\/63469\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media\/157189"}],"wp:attachment":[{"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/media?parent=63469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/categories?post=63469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitepoint.com\/wp-json\/wp\/v2\/tags?post=63469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]