Extreme Makeover: The Homepage Edition

999ec503c62c8972cbbc00f0aa932f4f?s=47 Job
October 03, 2019

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.

999ec503c62c8972cbbc00f0aa932f4f?s=128

Job

October 03, 2019
Tweet

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 !

  7. None
  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