9 months ago


Tutorials Shrink your

Tutorials Shrink your code with CSS4 variables Change a variable and every rule that depends on that is updated, giving smaller style sheets and a more efficient way to experiment with your design 70 _________________________________________________tutorial DOWNLOAD TUTORIAL FILES

Tutorials Web designers have had access to variables for some time when using CSS preprocessors to create style sheets. Nowwithmajor browser support, CSS4 variables are poised to take the powerofCSSpreprocessorsandplacethisnativelyinthe browser for designers to harness. CSS preprocessors work by compiling their variables down to regular CSS. The benefit of having a variable in thebrowserisnotpartofwhattheyoffer,andthat’s whereCSS4variableshavetheadvantageovertheir preprocessor counterparts. It’s completely possible to change the value of variable by the user at any time. In this tutorial, a few different use cases are going to be explored. The first just being for the designer to change thecolourinonevariableandseeeveryinstanceofit updated to keep consistent colour. This is a great feature becauseit’seasytoexperimentwithideasmore.The second will be to control the widths of elements and just update the width in media queries for different sized screens, meaning the only change is a variable. Finally, the third way to use it will be to create two themes and let theuserswitchbetweenthem. Here, three variables can be changed that completely updates the design on display in the web browser. 1. Declaring CSS variables Openthe‘start’folderinyourcodeIDEandlaunchthe ‘style.css’ file for editing. The first task to perform is to declare some CSS variables that will control some of the colours within our design, which will make it very easy for a designer to experiment with colours. The following lines declare three variables to the whole page. :root { --primary: #ff368b; --secondary: #0098ac; --tertiary: #F06D06; } 2. Applying the colours Applying these colours to elements is very easy. In your code find the ‘info.primary’ class, which should be on line 81.Replacetheexistingborder-topcolourwiththe variable as shown here. Repeat the process for the class ‘info.secondary’. This time the variable for the secondary colour is used instead. .info.primary { border-top: 8px solid var(--primary); } .info.secondary { border-top: 8px solid var(--secondary); } 3. Different colours Now the tertiary colour is added to the ‘info.tertiary’ class. That has now used all three colours controlled by a variable. At present there’s no benefit to using this but it’s possible to use those colours in other contexts such as thebackgroundcolourinlinks–asshownhere. .info.tertiary { border-top: 8px solid var(--tertiary); } a.primary { background: var(--primary); } 4. Linked in Now the remaining secondary and tertiary links are also styled with the relevant background colours by replacing their existing colour formatting with the colours from the variables.Nowisagoodtimetosavethisfileandjust make sure your browser is supporting CSS variables. Do this by opening the ‘index.html’ page and checking the colours are there. a.secondary { background: var(--secondary); } a.tertiary { background: var(--tertiary); } 5. Text colours Let’s target the text colour now by finding the class ‘span. primary’. Again this class is given the appropriate primary variable. As you can see, when colour is being used consistently to theme up elements, controlling from one variable is incredibly powerful. span.primary { font-weight: 600; color: var(--primary); } 6. Outlining the benefit Add the variable to the code shown here and then save your CSS. If you return to the code added in step one and change the colours, you will see it consistently change with the elements that have been styled up that way. span.secondary { font-weight: 600; color: var(--secondary); } span.tertiary { font-weight: 600; color: var(--tertiary); } Declaring in the root By declaring variables in the root, they are globally accessible by any object. If you declared a variable in a style applied to an element, only itself or children would be able to access it. Left The start of the project has a finished website design, but the tutorial will control many of the colours and widths using CSS variables Top Controlling multiple elements by the same colour variables mean that it is easy to update colours in a website when it has otherwise needed a CSS preprocessor tutorial __________________________________________________71

Metro Revealed - Download Center - Microsoft
download the slides (PDF, 12MB)