Web_Designer_UK__May_2018

Tutorials
Shrink your code with CSS4 variables
7. Going responsive
At present the design is not responsive so let’s set up a
way to do that and use a CSS variable to control the width
of the card layout. This means all that needs to be
updated in media queries is the width variable. Add the
width variable to the code you had in step 1.
--width: 25%;
8. Boxing clever
Now find the ‘box’ CSS class, where the width is being
calculated from 25% minus 40 pixels. Remove the
‘25%’ and replace it with the width variable. This can
now be controlled dynamically by changing the width
CSS variable.
.box {
float: left;
width: calc(var(--width) - 40px);
margin: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
background: #ccc;
color: #666;
}
9. Break point
Placing a media query into your CSS at the end of the
CSS gives us the kind of mid-sized screen that is often
found on tablets. Here the root section of CSS is updated
to have the width set to 50% and therefore give us a
two-column card layout that would better suit that sized
screen. Resize your browser to see it switch.
@media (max-width: 960px) {
:root {
--width: 50%;
} }
Changing via
JavaScript
It’s possible to update the CSS variables via JS as a
quick way to update many items at once. It shows
off the runtime power of CSS variables.
10. Mobile friendly
The final breakpoint will be for devices that are less than
500 pixels, such as mobile screen sizes. Here the width
variable is updated to take full advantage of the full width
of the display in order to be able to see the card content.
Again save this and resize your browser to see the display
update when a smaller screen size is used.
@media (max-width: 500px) {
:root {
--width: 100%;
}
}
11. Creating colour themes
The next part of the tutorial will focus on using JavaScript
to dynamically alter the CSS variables to create different
colour themes for the page. To get started some new
variables need to be declared in the ‘root’ of the CSS…
--main-bg: #fff;
--main-type: #333;
--alt-bg: #f5f5f5;
12. Changing to variables
Now various elements will start to get these variables
added in order to control the theme of the page. Find the
‘main-header’ class and change the colour and
background colour to be controlled via variables added in
the previous step.
.main-header {
color: var(--main-type);
background-color: var(--alt-bg);
text-align: center;
padding: 15px 0 10px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
13. Styling buttons
Find the ‘buttons’ class. This time the variable will be the
main background colour, whereas the header used an
alternative background colour. By having two different
background colours it allows the content to have some
contrast as they are viewed. Controlling the text colour
means that a high contrast text can be added.
.button {
text-decoration: none;
padding: 5px 10px;
color: var(--main-type);
background-color: var(--main-bg);
font-family: ‘Barlow Semi Condensed’,
sans-serif;
font-weight: 600;
}
14. Footing the bill
Now move to the class that controls the footer – ‘mainfooter’.
As with the header this will also have an alternate
background colour so that it will stand out from the
remainder of the page. The colour is also changed so that
it will be visible.
.main-footer {
clear: both;
Right
By controlling the width property
using a CSS variable, the variable is the
only thing that needs updating when
making a break point media query for
tablet screens
Far right
Dynamically changing the variables
can be easily achieved, and here the
user can switch between a light
theme and dark theme. Only three
CSS variables are updated to change
the entire theme
72__________________________________________________tutorial