CSS & SASS

Więcej takich

Piramida Szkolenie

przez Narzedzia Pozycjonera

AUDIO - PODCAST

przez Grzegorz W

Struktura firmy

przez Mateusz Ostrega

Faktura w HERMES

przez Ławniczak Ławniczak

rest

Subtopic

zabrania wyszukiwarka zapisywać strony na kompie użytkownika

content=" "

wartość metatagu

name="nazwaMetaTagu"

robots

nofollow

mają nie indeksować jedynie łączy umieszczonych na stronie

noindex

mają nie indeksować strony w wyszukiwarkach

można wygonić roboty wyszukujace od strony

keywords

bez wpływu na pozycje w wyszukiwarce

oddzielone przecinkami

description

może być bez tagu zamykającego

informacje o stronie zawarte w

elementy wierszowe

można potem dowolnie przerobić fragment tekstu w CSS

jak div grupuje elementy, ale w jednym wierszu, a nie w całym bloku

elementy blokowe

frameborder

seamless

blokuje wyświetlanie pasków przewijania

np. ramka z google maps

calss=""

id=""

komentarze w HTML

wiadomość do przeglądarki, ze to dokument HTML5

semantic

ważne dla tekstu i czytników ekranowych

adress

definicje

gdy poraz pierwszy wyjaśniamy znaczenie jakiegoś pojęcia

sktóry

atrybut title="..."

pozwala podać znaczenie sktótu

cytaty

odwołanie się do książki filmu etc.

udostępniają atrybut cite="..."

dla podania linka do źródła cytatu

dłuższe cytaty jako osobne paragrafy

krótsze cytaty wewnątrz tekstu

domyślnie- kursywa, większy nacisk na znaczenie fragmentu

pogrubienie tekstu, większy nacisk na fragmet tekstu

linia pomiędzy dwoma akapitami

następny akapit

indeks dolny

CO₂

indeks górny

E = mc²

additional meaning like bold, italic etc.

structure

inne

formularze

walidacja formularzy

by wyłączyć

grupowanie formularzy

Nazwa formularza

for="IdFormularza"

etykiety do formularzy

Text w textarea

obszerny obszar do wpisania textu

action="..."

link do strony wysyłjącej lub odbierającej informacje

method='get' // 'post' // inna metoda

placeholder="wartośćZnikaPoKilknięciu"

do umożliwienia zaznaczenia kilku opcji

selected=”selected”

do wyboru domyślnej opcji

checkbox

wiele opcji możliwych

type="checkbox"

radio buttons

checked="checked"

domyśłnie zaznaczony

value="nazwaButtona"

tylko jedna z opcji możliwa

type="radio"

id="dlaLabel"

name="identyfikacjaDlaSerwera"

maxlenght=23;

określa max liczbę znaków jakie można wpisać

type="text" // "password" // "email" // file // submit // image // hidden // date // url // search

tabele

footer tabeli

łacznenie komórek dwóch rzędów w kolumnie

łączenie komórek dwóch kolumn w jednym rzędzie

komórka

body tabeli

nagłówek do rzędów

wiersz

nagłówek tablei

obrazy

nowy element HTML5, pozwala na powiązanie obrazu z opisem

łącza

przeniesienie w inne miejsce na stronie

tak samo można kierować do okteślonych miejsc na innych stronach

zamiast przewijania

otwieranie w nowym oknie

do poczty

względne w stosunku do bazowego index.html

../../subsite.html

nadrzędny x2 katalog

../subsite.html

nadrzędny katalog

listy

listy definicji

termin

definicja

lista

lista

...

element listy

nieuporządkowane

domyślnie z kropkami, kolejność mniej ważna

• ...

domyślnie z kropkami, kolejność mniej ważna

domyślnie z kropkami, kolejność mniej ważna

uporządkowane

CSS list-style-type: ...;

domyślnie z numerami, istotna kolejność

1. ...

CSS list-style-type: ...;

domyślnie z numerami, istotna kolejność

CSS list-style-type: ...;

domyślnie z numerami, istotna kolejność

basic structure of document

CSS

Other

comments

/* commented */

positioning

float

repairing problems with floats

collapsing height

setting a ClearFix

pro solution

give a parent element the .group

.group:after{content: ""; display: table; clear: both; }

clear: both;

clears both site of a collapsing space

overflow

not recomendet solution

:auto;

tell the browser to account the height of a floats

:initial;

sets elements to initial scale of device

good for mobile media queries

.warper,

.nav li {

width: initial;

height: initial;

float: initial;

}

:right;

:left;

parent element not longer notice floated element size - it my cause problems

content is taken out of a scope of document and floated by rest of the content

display

inline-block

like a block element, but in a flow of it's surroundings

inline

sets elements in the flow of content

default for anchor elements

block

block element takes all available space of a parent element

default option of displaying

turn of displaying of an element

pseudo-elements

:after

:before

padding

margin

if top and bottom margin don't work, remember to set the display to inline-block;

clear

both

used for clearing floats

class for screen reader text

// Screen reader text

.srt {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

text-decotarion

none

for clearnig list decotarion

letter-spacing

font-weight

text-align

font-style

:bold;

:italic;

font-family

font-size

line-height

Sass usage for line heights

line-height : ($base__line/$base__font_size);

can be unitless

selections

pseudo-classes

most common

:focus

when you interact with keyboard for ex.(by tab)

implies that user is redy for interaction

:active

not only for links or buttons

most common in nav section

:hover

:visited

:link

not visited links

element/.class/#id : pseudo-class {property: value;}

not visible by default

active in a sepcyfic state caused by user interaction

pseudo -elements

::before {} ::after {}

good for icons and small graphic elements

content: "blank/text"; / content: url(.../img.svg);

content is obligatory

gives us extra layers to work with :)

they are visible to user, but do not appear in the HTML source code

sets the virtual element befor or after selected element

specificity

4. html| style="property: value"

most specific

3. #id-s

2. .classes

1. elements

less sepcific

multiple

.oneClass, .secondClass {}

descendent elements

header span {

color : white;

font-size : 26px;

}

element/.class/#id nestedElement { color: white;}

only nestedElement will be changed

for selecting nested elements

element

p {};

id

is more specyfic than a class

#idName {};

class

.className {};

all

* {};

styling

list-style

list-style-type

by default list are indented left

padding-left: 0;

by default list style is outsite the

list-style-position

list-style-position

:inside;

to change it

:none;

:decimal-leading-zero;

:square/circle/decimal/lover-latin/etc..;

clip

:rect(0,0,0,0);

border

border-radius

rounded corners of the element

: %;

50% is a circle

border-top : 2px solid blue;

background

it can be write in one line

background-image: #45690 url('path/image.jpg') no-repeat center / cover;

background-position

:x y;

:20% 50%;

:right bottom;

:center center;

= :center;

left top corner by default

background-repeat

:no-reapeat;

:repeat-y;

only on y axis

:repeat-x;

only on x axis

it's :repeat; by default

background-size

relative to the element size

:cover;

best for full background images

fits the image proportionally to the full size of element

:/% ;

it is repaeted horizontaly/verticaly by default

: url('path/image.jpg');

background-color

it is good practice to set the contrast to content color. Even with bg-img in case of problems with displaying it

everyfing has a transparent background by default

it is everyfing exept the margin

box-sizing

:border-box;

it can be universal for whole project

* {

box-sizing: border-box;

}

calculate width and height substracting box model values

helps us with calculation of size of elements

max-width

making images responsive!

img {max-width: 100%;}

for good readability on big screens like SamartTV or Mac

prevents the element from beeing widther than some px values

width

height

:/%;

px are for precise elements like graphics/icons

with % element is relative to the parent element

SASS

document formating

Modular Media Queries

states at mobile

collapse at mobile class

is displayed at mobile class

_grid_display

==========================================================================
// Grid display
// ==========================================================================


.is-displayed-mobile {
@include mq(small) {
display: block;

@at-root (with: media) {

.is-hidden-mobile {
display: none;
}
}
}

@include mq(medium) {
display: none;

}
}

mixin

// Media queries

@mixin mq($break) {
@if $break == "small" {

@media (min-width: $brkpoint-sm) and (max-width: $brkpoint-md) {
@content;
}
}
@else if $break == "medium" {

@media (min-width: $brkpoint-md + 1) {
@content;
}
}
@else if $break == "large" {

@media (min-width: $brkpoint-lg) {
@content;
}
}
@else {
@error "Whoops! No value could be retrieved for '#{$break}'."
}
}

variables fro breakpoints

_config.scss

// Breakpoints


$brkpoint-sm : 1px;
$brkpoint-md : 768px;
$brkpoint-lg : 1100px;

Grid System

usage

class="grid__col--12"

full width in the grid

class="grid"

center the content

we also need to specify a container for grid

_grid-container.scss

.grid {
@extend %clearfix;
@extend .centered;
width: 90%;

// Make nested grid container 100%

[class*="grid__col--"] > & {
width: 100%;
}



// Set a max-width grid container

@media(min-width: 1100px) {
max-width: $g-cout-max-w;
}
}

mixin to adjust column siblings

// Adjacent sibling margins

@mixin doubly($margin: 1em) {

& + & {

margin-left: $margin;

@content;

}

}

loop to generate calsses

_grid-columns.scss

// Calculate grid columns

@media (min-width: 769px) {
@for $i from 1 through $g-col-count {

$context: g-context($g-col-width, $g-col-count, $g-gutter-width) !global;
$target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));


//Generate column modifier classes
.grid__col--#{$i} {
width: percentage($target / $context);
}
}
}

// Column Styles

[class^="grid__col--"] {
@media (min-width: 1px) and (max-width: 768px) {
margin-top: em(12px);
margin-bottom: em(12px);
}
@media (min-width: 769px) {
@include doubly(percentage($g-gutter-width / $context));
float: left;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
&:last-of-type {
float: right;
}
}
}

output

.grid__col--1 {
width: 6.5%; }


.grid__col--2 {

width: 15%; }



.grid__col--3 {

width: 23.5%; }



.grid__col--4 {

width: 32%; }



.grid__col--5 {

width: 40.5%; }



.grid__col--6 {

width: 49%; }



.grid__col--7 {

width: 57.5%; }



.grid__col--8 {

width: 66%; }



.grid__col--9 {

width: 74.5%; }



.grid__col--10 {

width: 83%; }



.grid__col--11 {

width: 91.5%; }



.grid__col--12 {

width: 100%; }

@function to count context

_functions.scss

// Set the "context" width for the grid

@function g-context($g-col-width, $g-col-count, $g-gutter-width) {

$g-context : ($g-col-width * $g-col-count) + ($g-gutter-width * ($g-col-count - 1));

@return $g-context;

}

nessesery variables

_config.scss

// Grid

$g-col-width : 65px;

$g-gutter-width : 20px;

$g-col-cound : 12;

$g-cont-max-w : 1050px;

Methodology

Scalable and Modular Architecture for CSS

sassy - SMACSS based starter for a project

application.scss

@imports

order of imported parts is important!

categoryName/_index.scss

which contain all the partial files

from the folders of categories

divdes project into categories

optionaly

utilities

_helpers

_functions

_mixins

themes

default category

like for wordpress themes

diffrent colors and images for diffrent color themes

states

style for element states

:hidden, :active, :expand etc.

modules

each module as a separate, reusable component

majority of project styles

layout

major sections of the page

panel rules for positioning header and footer

.panel {

@extend %panel-default;

@include m(centered) {

@extend %panel-default;

@extend %center-align;

}

@include m(padded) {

@extend %panel-padding;

@include m(centered) {

@extend %center-align;

@extend %panel-padding;

}

}

}

@extends

// Panels

%panel-default {

padding-top: em(30px);

padding-bottom: em(20px);

}

%panel-padding {

padding-top: em(80px);

padding-bottom: em(34px);

}

// Center alignment

%center-align {

text-align: center;

}

some developers avoid this category

header, footer, sidebar, grid

wrappers for other componenets

base

use only element selectors

no classes and id-s

give them default values

reset styles

how the elements looks by default

to organize and structure CSS on any scale

more like a architecture style guid

Block Element Modifier

Sass way

form

.form {

@include e(label) {

@include m(hidden) {

@extend .srt;

}

dispaly: block;

margin-bottom: em(10px);

}

@include e(input) {

width: 100%;

font-size: em(18px);

padding: em(15px, 18px);

margin-bottom: em(20px, 18px);

border-bottom: 6px solid palette(grey, x-light);

border-radius: $br--default;

background: palette(grey, xx-light);

color: palette(black, dark);

font-weight: $font-weight--light;

&:focus {

border-color: $color-primaty;

}

}

@include e(btn) {

@extend %btn;

background-color: $color-primary;

}

}

classes

.form

.form__lable

.form__label--hidden //for screan readers

.form__input // :active

.form__btn //for submit button

headline

.headline {

&-primary {

@extend %hdln-prim;

margin-bottom: em(70px, 42px);

}

&-secondary {

@extend %hdln-sec;

margin-bottom: em(22px, 24px);

}

}

@extension

// Headlines

%hdln-prim {

font-weight: $font-weight--light;

font-size: em(42px);

line-height: (46px / 42px);

margin-bottom: em(70px, 42px);

color: palette(grey, x-dark);

margin-top: 0;

}

%hdln-sec {

font-family: $font-family--secondary;

font-weight: $font-weight--thin;

font-size: em(24px);

color: palette(grey, light);

letter-spacing: $letter-space;

}

navigation

ex

.nav {

margin-top: em(20px);

margin-bottom: em(30px);

&__item {

display: inline-block;

margin: 0 em(12px);

a {

font-size: em(18px);

font-weight: $font-weight--light;

color: palette(grey);

display: block;

padding: em(8px, 18px);

}

&--current a {

color: palette(black);

border-color: $color-primary;

}

}

}

output 4 classes

.nav

.nav__item

.nav__item a //active only on anchor elements

.nav__item--current a //active only on selected anchor element

with @extend

_extend.scss

// Nav Items

%nav-item-disp {

display: inline-block;

margin: 0 em(12px);

}

%nav-item-link {

font-size: em(18px);

font-weight: $font-weight--light;

display: block;

padding: em(8px, 18px);

border-bottom: 1px solid transparent;

}

%nav-item-on {

color: palette(black);

border-color: $color-primary;

}

.nav {

margin-top: em(20px);

margin-bottom: em(30px);

@include e(item) {

@extend %nav-item-disp;

a {

@extend %nav-item-link;

color: palette(grey);

&:hover {

@extend %nav-item-on;

}

}

@include m(current) {

@extend %nav-item-disp;

a {

@extend %nav-item-link;

@extend %nav-item-on;

}

}

}

}

BEM @mixin

@mixin e($element) {

&__#{$element} {

@content;

}

}

@mixin m($modifier) {

&--#{$modifier} {

@content;

}

}

Modifier = Styles and Variations

Element = child of the root element

Block = root of the element

highest level of abstraction

.block__element--modifier

.list__item--block {}

.list__item {}

.list {}

naming convention based on class

downsite of BEM approach is lots of classes in html

but

readability is more important

of course not everything can be taken under this nameing convention

ex .site-logo

help us to write clear and easy to understand CSS

body

body {

font-size : $base__font-size;

line-height : ($base__line/$base__font_size)

font-family : $font-family--primary;

}

Sass Maps

map-get($mapName, value);

nested maps

map-get(map-get($mapName, value) nestedValue);

pallets of colors

grey & black

$palettes: (

grey: (

xx-light : lighten($grey, 43%),

x-light : lighten($grey, 35%),

light : lighten($grey, 12%),

base : $grey,

dark : darken($grey, 8%),

x-dark : darken($grey, 16%)

),

black: (

light : lighten($black, 10%),

base : $black,

dark : darken($black, 10%),

)

);

how to get it

of write a function :)

@function palette($pallete, $shade: 'base') { @return map-get(map-get($palettes, $pallete), $shade); }

call it with

color: palette(grey, x-dark);

color : map-get(map-get($palettes, grey) x-grey);

color

we need @mixin to genetare classes

@each $theme, $color in $ui-colors {

.btn--#{$theme} {

background-color : $color;

}

}

even more modular

@mixin bg-colors($map) { @each $theme, $color in $map { &--#{$theme} { background-color : $color; } } }

we can make class first in css, and use it in HTML later

$ui-colors: (

default : $fountain-blue,

success : $emerald,

error : $sunglo,

warning : $coral,

info : $purple-majesty

);

like objects in any other language

function()

debbuging

@error

ex.

@else {

@error "'{$pos}' is an invalid argument.";

}

shows error in css output (and browser)

@warn

shows warrning in the console

usefull functions

// Call the color palette modifiers

@function palette($pallete, $shade: 'base') {

@return map-get(map-get($palettes, $pallete), $shade);

}

//Calculate pixels to em values

@function em($target, $context: $base__font_size) {

@return ($target / $context) * 1em;

}

font-size : em(42px);

usage for H1

h1 {

font-size : em(42px);

line-height : (46px / 42px);

margin-bottom : em(70px, 42px);

}

//Import if Google Fonts URL is defined

@if variable-exists(font-url--google) {

@import url($font-url--google);

}

@function functionName($parOne, $parTwo : $dafaultValue) {};

@if variable-exist() {};

@extend

@extend .ruleName;

@extend %extensionName;

you can include %extends and rules from other files onto every element

really helpful to make Sass DRY

_utilities

file name for functions and mixins

@mixin

usefull mixins

generating pseudo elements shapes with @error

@mixin p-el(

$el,

$el-w: null,

$el-h: null) {

@if $el == "before" or $el == "after" {

&:#{$el} {

@extend %pseudos;

width: $el-w;

height: $el-h;

@content;

}

} @else {

@error "'#{$el}' is not a valid pseudo-element.";

}

}

@content //for pseudo elements

%pseudos {

display: block;

content: '';

position: absolute;

}

background-image

@mixin img-replace($img, $w, $h, $disp: block ) {

background-image: url('#{$path--rel}/#{$img}');

background-repeat: no-repeat;

width: $w;

height: $h;

display: $disp;

}

ex. usage

@include img-replace('logo.svg', 115px, 45px, inline-block);

use it

like a loops

@each $parOne, $parTwo in $mapName {.class-- #{$parOne} { cssKey : $parTwo; }}

to create classes for ex.

//Color maps

@each $theme, $color in $ui-colors {

.btn--#{$theme} {

background-color : $color;

}

}

like a functions

$variables

images

//path to images

$path--rel : "../img";

text

//letter-space

$letter-space : 1px;

//font size

$base__line : 24px;

$base__font-size : 16px;

colors

//color usage

$color-shadow : rgba($black, .2);

$color-accent : $purple-majesty;

$color-primary : $black;

//descriptive Base Colors

$grey : #797e83;

$black : #0b0b0b;

more fancy black :)

$white : #fff;

fonts

//font weight

$font-weight--thin

etc.

$font-weight--thin : 100;

$font-weight--light : 300;

$font-weight--medium : 400;

$font-weight--bold : 700;

$font-weight--ultra-bold : 900;

//font stack

of some more clever fontstack

$font-family--primary

$font-family--primary : 'Lato', 'Helvetica Neue','Helvetica','Arial', 'sans-serif';

//font url

$font-url--google

$font-url--google : 'http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900';

$value-desc--valVariation : property;

BEM nameing convention

good practice

_config

good name for variables file