Slide 1
Slide 1 text
Extreme Make-over: The Homepage Edition
WordCamp Johannesburg
@jobtex | @woocommerce | job.blog
Slide 2
Slide 2 text
Animations - Example of data.blog
Slide 3
Slide 3 text
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;
}
Slide 4
Slide 4 text
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:
Slide 5
Slide 5 text
Variable fonts
Slide 6
Slide 6 text
non-serif > serif !
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
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);
}
Slide 9
Slide 9 text
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;
}
Slide 10
Slide 10 text
Grid & Subgrid
Slide 11
Slide 11 text
Media-queries 4
.menu li {
display: block;
}
@media (hover:hover) {
{
.menu > li {
display: none;
}
.menu:hover > li {
display: block;
}
}
}
Slide 12
Slide 12 text
Attribute selectors
a {
color: yellow;
}
a[href^="https://jhb.mystagingwebsite.com/"] {
color: red;
}
Slide 13
Slide 13 text
Units & calculations
.header {
min-height: 100vh;
}
.side-bar {
width: calc( 100% / 3 );
}
Slide 14
Slide 14 text
Other things
• Children
• Gradients
• Curve text
• Flexbox vs Grid
• Browser support