New things in scss

CSS is still evoluting.

  • CSS 2 to CSS 3

  • From css to preprocessors

  • Post processor

  • CSS 4

Also the number of possibilities in css is high. And probably as me, you have missed some handy or cool stuff css3 or more have brought to css.

Boostrap 4

new featurs in boostrap 4
  • What changes in v4 version

    • sass

    • grid with flexbox (allow vertical alignement)

    • grid unit less columns

    • rem font sizing

    • new small screen breakpoints

CSS Grid

Learn flexbox with flexbox froggy learning game

CSS counter

When you have a list of item and use a content tag to define content with css. And what if you want to add to this content the number of item in a list without changing the js.

The css counter are exactly for that.

transition

  • Understand transition

Nice visualisation to choose a transition timing function or design custom bezier function

  • Cubic bezier generator

http://cubic-bezier.com/#.95,.23,.83,.67

object fit

Object fit allow to simulate cover property of background images It is good to make framing of an image or video inside an object...

The IA Fall back

blend modes

Blend mode are photoshop like fusion mode (multiply, transfer...) that allow to have an opacity without flattening everything

https://medium.com/@bennettfeely/css-blend-modes-could-be-the-next-big-thing-in-web-design-6b51bf53743a

More in depth tuto https://css-tricks.com/basics-css-blend-modes/

Example for a video with a gradient with mix-blend-mode

Original tuto

The html :

<figure>
<video>
<source src="lina.webm">
<source src="lina.mp4">
</video>
</figure>

The CSS :

figure {
background: linear-gradient(90deg,#00f 50%,transparent 50.1%);
}
figure video {
/* Mind we use mix-blend-mode as video is a normal html element
not a background */
mix-blend-mode: overlay;
}
  • Example with letter overlap

http://codepen.io/chriscoyier/pen/mvbpJ

Viemport units vh vw

Allow to size depending of the screen size, ideal for full width

http://www.tipue.com/blog/css3-vw-vh

always and ever a problem : vertical align

Flexbox based solutions

position sticky

Classical solutions :

http://vanseodesign.com/css/vertical-centering/

Post css

Plugin to use future of css now (a bit the equivalent of babel and typescript for the css)

https://github.com/MoOx/postcss-cssnext

  • post css / Autoprefixer

Set automatically browser prefix for you

https://github.com/postcss/autoprefixer

  • post css web pack plugin

https://github.com/postcss/postcss-loader

  • Flexbox nice tutorial

http://cssreference.io/flexbox/

SCSS / SASS

  • SASS MAPS

http://clubmate.fi/sass-maps-syntax-examples-and-good-things/