Extreme Makeover: The Homepage Edition

In this workshop, we at tweaking a homepage with the newest CSS3 trends. We focused on CSS animations, variable fonts, variables, grid, media-queries 4, units and calculations. A more details recap can be found on my website.

Contrary to the other Extreme Makeover, we did not guarantee tears of joy. And we didn't get any of those either.

This is a workshop and we used the same homepage and the Stylus browser extension to add a CSS layer on top of that.

Transcript

1. Extreme Make-over: The Homepage Edition WordCamp Johannesburg @jobtex | @woocommerce | job.blog
2. Animations - Example of data.blog
3. Animations @keyframes traffic-light {
 0% { color: black; } 
 25% { color: red; } 
 50% { color: orange; } 
 75% { color: green; } 
 100% { color: black; } 
 } h1.entry-title {
 animation: 3s traffic-light infinite; 
 }
4. Variable fonts @import url('https:// fonts.googleapis.com/css? family=Open+Sans:300,300i, 400,400i,600,600i,700,700i, 800,800i'); h1 {
 font-family: 'Open Sans'; 
 font-weight: 400;
 } h2 {
 font-family: 'Open Sans'; 
 font-weight: 500;
 } To: @font-face { 
 font-family:'Font Name'; 
 src:url('url');
 } h1 {
 font-family: 'Font Name'; 
 font-weight: 192;
 } h2 {
 font-family: 'Font Name'; 
 font-weight: 356;
 } From: To:
5. Variable fonts
6. non-serif > serif !
8. Variables Cascading variables: :root {
 --color1: pink; 
 } body {
 color: var(—color1); 
 } :root {
 --color_name: pink; 
 } .entry-content {
 --color_name: green;
 } body {
 color: var(--color_name); 
 } h1.entry-content {
 color: var(--color_name); 
 }
9. Grid & Subgrid div {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 justify-items: center;
 align-content: center;
 } div p:nth-child(2) {
 grid-column: 2 / 4;
 }
10. Grid & Subgrid
11. Media-queries 4 .menu li {
 display: block;
 } @media (hover:hover) {
 {
 .menu > li {
 display: none; 
 } 
 .menu:hover > li {
 display: block; 
 } 
 } 
 }
12. Attribute selectors a {
 color: yellow; 
 } a[href^="https://jhb.mystagingwebsite.com/"] { 
 color: red; 
 }
13. Units & calculations .header {
 min-height: 100vh; 
 } .side-bar {
 width: calc( 100% / 3 ); 
 }
14. Other things • Children • Gradients • Curve text • Flexbox vs Grid • Browser support