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

by Martin Kruliš (v1.0) 1

AdvancedWeb Page Styling

Martin Kruliš

22. 2. 2016


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

CSS Revision


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

Revision - Transitions

transition-property Which CSS properties are animatedtransition-duration How long should each animation lasttransition-timing-function

Interpolation function used for the animation (linear, ease, ease-in, ease-out, …)

transition-delay Delay before the change is startedtransition Sets all previous properties at once


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

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;}

22. 2. 2016

Animations

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


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

Animations


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

CSS Preprocessing


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

SASS

Example 2


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

SASS

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);}


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

SASS

Instead of Matryoshka hack

Creating boxes organized in 2 columns (half size of the main)


Nesting◦ More logical division of styles

nav { ul { margin: 0; li { display: inline-block; } } a { color: green; }}

22. 2. 2016

SASS

nav ul { margin...}

nav ul li { display...}

nav a { color...}


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

SASS

Selector is updated to .message, .error


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

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);}

22. 2. 2016

SASS

Example 3


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

Responsive Web

Example 4


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

Responsive Frameworks


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

Bootstrap

Example 5


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

CSS Tricks

Examples 6-9

by Martin Kruliš (v1.0) 1922. 2. 2016

Discussion

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

Documents

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