1. Martin Kruliš 22. 2. 2016 by Martin Kruliš (v1.0)1

2.  You should already know… ◦ CSS syntax, selectors, basic properties ◦ Boxing model (margins, paddings, …) ◦ Display modes (inline, block, …) ◦ Positioning (static, absolute, relative, …) ◦ Media ◦ Graphical filters and transformation ◦ Transitions 22. 2. 2016 by Martin Kruliš (v1.0)2

3.  CSS Property Transitions ◦ Modifications of CSS properties are animated  When pseudo-class changes (e.g., :hover or :target)  Client-side script changes classes, style attribute, … ◦ Properties 22. 2. 2016 by Martin Kruliš (v1.0)3 transition-property Which CSS properties are animated transition-duration How long should each animation last transition-timing- function Interpolation function used for the animation ( linear, ease, ease-in, ease-out, …) transition-delay Delay before the change is started transition Sets all previous properties at once

4.  Transitions ◦ Limited way to describe property interpolations ◦ Always interpolating linearly between two states  Time function may be non-linear  Animations ◦ A more complex mechanism of interpolation ◦ Define a set of states between which the values are interpolated ◦ Additional features  Timing, pausing, repetition, alternation, … 22. 2. 2016 by Martin Kruliš (v1.0)4

5.  Animation Syntax @keyframes colorize { 0% { color: black; } 30% { color: red; } 100% { color: blue; } } #something { animation-name: colorize; animation-duration: 5s; animation-iteration-count: 3; } 22. 2. 2016 by Martin Kruliš (v1.0)5 Example 1 Named set of keyframes Each keyframe holds a state of the element at a particular phase of the animation Animation is then applied using CSS properties

6.  Animation Properties ◦ animation-timing-function  Similarly to transitions – time interpolation function ◦ animation-direction  normal, reverse, alternate ◦ animation-iteration-count  Number of iterations or infinite ◦ animation-play-state  paused or running – useful for stopping/resuming ◦ animation-fill-mode  How are the CSS animation styles applied to target 22. 2. 2016 by Martin Kruliš (v1.0)6

7.  Major CSS Issues ◦ Selectors are quite powerful but possibly tedious ◦ No variables or global constants ◦ Not particularly DRY-friendly  CSS Preprocessing ◦ Styles are written in preprocessing language and generated into CSS files ◦ Several languages/tools available (LESS, SASS) 22. 2. 2016 by Martin Kruliš (v1.0)7

8.  Syntactically Awesome Stylesheets ◦ A style sheet language that extends CSS ◦ It is interpreted into CSS files ◦ The most important features are  Variables – allow single definition of a value  Nesting – more logical organization of the styles  Mixins – CSS templates that can be reused  Selector inheritance – simplifies selector construction  Scripting (loops, conditions, expressions, …) 22. 2. 2016 by Martin Kruliš (v1.0)8 Example 2

9.  SASS Syntax ◦ Two syntaxes  Original SASS is based on Haml language  Newer SCSS syntax is more similar to CSS  Actually CSS file is also valid SCSS file 22. 2. 2016 by Martin Kruliš (v1.0)9 SASS (original syntax) $size: 300px =mybox($width) width: $width #div1 +mybox($size) SCSS syntax $size: 300px; @mixin mybox($width) { width: $width; } #div1 { @include mybox($size); }

10.  Variables and Expressions ◦ Allow definition of values which can be used in the whole stylesheet $width: 900px; $space: 20px; main { width: $width – 2 * $space; padding: $space; } div.box { width: $width / 2 - $space; } 22. 2. 2016 by Martin Kruliš (v1.0)10 Instead of Matryoshka hack Creating boxes organized in 2 columns (half size of the main)

11.  Nesting ◦ More logical division of styles nav { ul { margin: 0; li { display: inline-block; } a { color: green; } 22. 2. 2016 by Martin Kruliš (v1.0)11 nav ul { margin... } nav ul li { display... } nav a { color... }

12.  Selector Inheritance ◦ Shifts the inheritance from base selectors to derived styles.message { padding: 10px; border: 3px solid yellow; }.error { @extend.message; border-color: red; } 22. 2. 2016 by Martin Kruliš (v1.0)12 Selector is updated to.message,.error

13.  Partials and Includes ◦ Partial files are meant for including only ◦ Naming convention – partial files start with underscore  E.g., _partial.scss ◦ Import directive @import is preprocessed  CSS @import leads to another HTTP request  SASS @import works like include in C/C++  Typically used with partial files @import '_part.scss' ◦ Import is also used for including mixins 22. 2. 2016 by Martin Kruliš (v1.0)13

14.  Mixins ◦ Parametrized fragments of code which can be reused (vaguely resembles functions) @mixin shadow($dist, $blur, $color) { -moz-box-shadow: $dist $dist $blur $color; -webkit-box-shadow: $dist $dist $blur $color; -ms-box-shadow: $dist $dist $blur $color; box-shadow: $dist $dist $blur $color; } #mydiv { @include shadow(5px, 3px, #999); } 22. 2. 2016 by Martin Kruliš (v1.0)14 Example 3

15.  Responsive Web Design ◦ The web adjusts layout (and other properties) to the properties (size) of display device  So it can effectively present its contents on small handheld devices as well as on 4K monitors ◦ Possible approaches  Important measurements are expressed relatively in %, vh, and vw units  Multiple layouts (style sheets) are prepared for different devices (and selected by media conditions)  Smart utilization of inline blocks and float elements 22. 2. 2016 by Martin Kruliš (v1.0)15 Example 4

16.  Responsive Frameworks ◦ Predefined styles (and possibly scripts) which automatically handle various screen sizes  Developed intensively in last few years ◦ Many frameworks currently available  Twitter Bootstrap  W3.CSS  Skeleton  Foundation  HTML5 Boilerplate  HTML KickStart  … 22. 2. 2016 by Martin Kruliš (v1.0)16

17.  Twitter Bootstrap ◦ Originally named Twitter Blueprint  Twitter released it as open source in 2011 ◦ Perhaps the most popular front-end and UI ◦ Basic features  CSS responsive layout based on 12-column grid  Classes for phones, tablets, desktops, and large screens  Many CSS prepared UI controls and templates  Buttons, panels, forms, …  jQuery-based controls  Animations, Carousel, Modal windows, … 22. 2. 2016 by Martin Kruliš (v1.0)17 Example 5

18.  CSS Tricks and Treats ◦ CSS is quite powerful, especially state selectors  A lot of behavior can be simulated without scripting ◦ Pseudoclass :hover  Elaborate animations with opacity or display ◦ Pseudoclass :target  Can be used to keep a state, which can be switched by standard links (with proper fragment URLs) 22. 2. 2016 by Martin Kruliš (v1.0)18 Examples 6-9

19. 22. 2. 2016 by Martin Kruliš (v1.0)19