Views
7 months ago

Web_Designer_UK__May_2018

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 www.filesilo.co.uk/webdesigner

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

Web_Designer_UK__May_2018
Web_Designer_UK__May_2018
Web_Designer_UK__May_2018
Web_Designer_Issue_262_2017
Learn_To_Code_part_1092864a
Brand_Manual_Guide_a4_v3
Download
Metro Revealed - Download Center - Microsoft
Portal Technologies - Geon
1I1dzX8hh
MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF
Reflective Journal
asia-15-Johns-Client-Side-Protection-Against-DOM-Based-XSS-Done-Right-(tm)
Start Here! Learn JavaScript - Cdn.oreilly.com
Web Design Tips
IN ACTION
Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition
is Fast and Furious ~ 15K Web Framework for Erlang over ... - Synrc
www.free-ebooks-download.org
Refreshing_Your_UI_with_HTML5_Bootstrap_and_CSS3_HTML5Denver2013
html_tutorial
Book Sampler - Cdn.oreilly.com
JavaScript Bible , 5th Edition
Responsive Email Design Guide - e-Dialog
H95bvZ
DEPLOYING WEB APPS NATIVELY - Motorola Solutions Launchpad
HTML5 (slides) - Scott Granneman
jQuery for Dummies - A2Z Dotnet
javascript
AJAX and PHP