CSS and SCSS

CSS

 is a style sheet language used for describing the presentation of a document written in a markup language.

Cascading Style Sheet

1996 - CSS 1

1998 - CSS 2

2011 - CSS 2.1

2011/2013 - CSS 3

Story

W3C

References

link rel

@import

in page

in line

How to use

#idname

.classname

ID and class

Pseudo class

li:first-child, li:last-child

a:link,a:visited

a:hover, a:active, a:focus

li:nt-child(2)

:after

:before

p:first-letter

p:first-line

Pseudo element

Specificity rules

CSS Specificity

div p = son

div > p = direct son

div + p = after brother

p[title=Example] = attribute

 

CSS selectors table

Selectors

color name = red

RGB value = rgb(255, 0, 0)

HEX value = #ff0000

Color

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size

 

background:white url('image') no-repeat 0% 0%;

Background

Sprite and Base64

border: 1px solid green

Border

color, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, word-spacing, vertical-align

Text

Font

font-family, font-style, font-weight,

text-transform, text-align, text-decoration, text-indent, text-orientation, letter-spacing, word-spacing, word-break

Font

opacity: 1;
filter: alpha(opacity=100);

Opacity

display: block, inline, inline-block, none

visibility: visible, hidden

Display and Visibility

min-height, max-height

min-width, max-width

Min/Max Height/Width

hidden, auto, scroll

Overflow

content, margin, padding, border

outline

Box Model

box-sizing: border-box

Box Model

static

relative

absolute

fixed

Position

float: left

float: right

float: none

 

clear: left

clear: right

clear: both

Float e Clear

HTML 5

2004 - Born Web Hypertext Application Technology Working Group

2008 - HTML 5 first public draft

2014 - Recommendation

2016 - HTML 5.1 Candidate Recommendation

 

Story

all new tags as block element

custom tag is permitted but not validate

 

HTML5 form and old browser:

https://code.google.com/archive/p/webforms2/

 

Browser engines HTML5 support

Browser support

Modernizr

References

section, article, aside, main, details, dialog, footer, header, nav, progress, time, figcaption, figure

New elements

color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week

New input type

audio, embed, source, track, video

HTML 5 media

canvas

svg

HTML 5 graphic

CSS 3

June 2011: CSS Color Module
September 2011: CSS Namespaces Module
September 2011: Selectors
June 2012: Media Queries
November 2013: CSS Style Attributes

Story

Vendor prefix

border-radius, multiple background,

text & box shadow

Style effects

Gradients

white-space, text-overflow,

word-wrap, word-break, 

Text properties

calc(x - y)

 

ex:

width: calc(100% - 50px);

Calculation

translate
rotate
scale
skewX
skewY

2D Transform

rotateX

rotateY

rotateZ

3D Transform

transition, transition-delay,

transition-duration, transition-property,

transition-timing-function

Transition

An animation lets an element gradually change from one style to another.

 

@keyframes

Animation

animation-name

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timing-function

Animation

Animate.css

width and height of the viewport
orientation (landscape or portrait mode)
resolution

 

Mediaquery

CSS Methodologies

Create application using atoms, molecules, organisms, templates and pages

 

http://bradfrost.com/

Atomic Design

Create application separating container and content using CSS objects

 

http://oocss.org/

OOCSS

Block Element Modifiers

 

http://getbem.com/introduction/

BEM

CSS style guide for a reliable, mainteinable and scalable application

 

https://smacss.com/

SMACSS

SASS

The better way to keep CSS maintainable, reliable and modular

 

http://sass-lang.com/

SASS Doc References

CSS Pre-processor

sass needs ruby

 

http://sass-lang.com/install

SASS Install

compile:

sass input.scss output.css

 

watch:

sass --watch app/sass:public/stylesheets

SASS Commands

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

...

font-family: $font-stack;

color: $primary-color;

SASS Variables

SASS Nesting

@import _theme.scss

@import _base.scss

@import _mod_table.scss

SASS Partial and Import

SASS Mixin

SASS Extend

SASS Operators

LEAN UX

(Jeff Gothelf with Josh Seiden)

 

REFACTORING HTML

(Elliotte Rusty Harold)

 

DESIGNING NEXT GENERATION

WEB PROJECTS WITH CSS3

(Sandro Paganotti)

References

That's It!

prometeia@extrategy.it

Thanks!

CSS e SCSS

By extrategy

CSS e SCSS

  • 1,472