Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Extreme Makeover: The Homepage Edition

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.

Job

October 03, 2019
Tweet

More Decks by Job

Other Decks in Programming

Transcript

  1. Extreme Make-over: The Homepage Edition
    WordCamp Johannesburg

    @jobtex | @woocommerce | job.blog

    View full-size slide

  2. Animations - Example of data.blog

    View full-size slide

  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; 

    }

    View full-size slide

  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:

    View full-size slide

  5. Variable fonts

    View full-size slide

  6. non-serif > serif !

    View full-size slide

  7. 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); 

    }

    View full-size slide

  8. 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;

    }

    View full-size slide

  9. Grid & Subgrid

    View full-size slide

  10. Media-queries 4
    .menu li {

    display: block;

    }
    @media (hover:hover) {

    {

    .menu > li {

    display: none; 

    } 

    .menu:hover > li {

    display: block; 

    } 

    } 

    }

    View full-size slide

  11. Attribute selectors
    a {

    color: yellow; 

    }
    a[href^="https://jhb.mystagingwebsite.com/"] { 

    color: red; 

    }

    View full-size slide

  12. Units & calculations
    .header {

    min-height: 100vh; 

    }
    .side-bar {

    width: calc( 100% / 3 ); 

    }

    View full-size slide

  13. Other things
    • Children
    • Gradients
    • Curve text
    • Flexbox vs Grid
    • Browser support

    View full-size slide