1. Advanced Web Page Styling
Martin Kruliš
by Martin Kruliš (v1.0)

2. CSS Revision 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
by Martin Kruliš (v1.0)

3. Revision - Transitions
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
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
by Martin Kruliš (v1.0)

4. Animations Transitions Animations
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, …
by Martin Kruliš (v1.0)

5. Animation is then applied using CSS properties
Animations
Animation Syntax
@keyframes colorize {
0% { color: black; }
30% { color: red; }
100% { color: blue; } }
#something {
animation-name: colorize;
animation-duration: 5s;
animation-iteration-count: 3;
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
Example 1
by Martin Kruliš (v1.0)

6. Animations 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
by Martin Kruliš (v1.0)

7. CSS Preprocessing Major CSS Issues CSS Preprocessing
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)
by Martin Kruliš (v1.0)

8. SASS 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, …)
SASS is recommended over LESS by multiple individual sources on the Internet, so we have selected this preprocessor as a representative.
Some of the following examples are inspired by SASS basic guide:
Example 2
by Martin Kruliš (v1.0)

9. SASS 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
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);
We use SCSS syntax in our examples since it is more convenient for people who never saw SASS before.
by Martin Kruliš (v1.0)

10. SASS 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;
Instead of Matryoshka hack
Creating boxes organized in 2 columns (half size of the main)
by Martin Kruliš (v1.0)

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

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

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

14. SASS
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);
Example 3
by Martin Kruliš (v1.0)

15. Responsive Web 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
Example 4
by Martin Kruliš (v1.0)

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 …
by Martin Kruliš (v1.0)

17. Bootstrap 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, …
Example 5
by Martin Kruliš (v1.0)

18. CSS Tricks 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)
Examples 6-9
by Martin Kruliš (v1.0)

19. Discussion
by Martin Kruliš (v1.0)