CSS & SASS

Lisää tämän kaltaisia

Struktura firmy

luonut Mateusz Ostrega

Narzędzia do wyszukiwania ludzi – popularne wyszukiwarki i ich zastosowanie.

luonut Julia Rafałowicz

Piramida Szkolenie

luonut Narzedzia Pozycjonera

AUDIO - PODCAST

luonut Grzegorz W

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

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