Bootstrap - jest biblioteką CSSwą Twittera, jej możliwości oparte są na 3 podstawowych cechach 1) responsywnym układzie (opartym na grid + flex) strony 2) na elementach, z których może powstać strona (np. formularze, komponenty(np. buttons, carousel, dropdowns, navs), oraz narzędziach(np. scrollspy, tooltips)) - stworzonych z html/css/js (dla v < 5 …

Podstawowe zasady nazewnictwa

Nazewnictwo klas CSS zaczyna się od... wybrania odpowiedniego taga HTML a później...

Podział na 3 sposoby nazywania klas

• funkcjonalność (Functional class names) -> połączenie klasy z elementem ze względu na jego znaczenie selected-button, important-text

• zawartość (Content-based class names) -> klasy wskazujące na zawartość elementu submit-button, intro-text

• prezencja (Presentational class …

Grid -> HTML + klasy CSS

Grid przy pomocy klas (starsza wersja) jest czym innym niż tzw. Grid CSS (nowsza wersja rozwiązania)

W przypadku rozwiązania opartego jedynie o HTML i odpowiednio stylowane klasy css - całość oparta jest na kolumnach (pion) oraz wiersze(poziom)

Kolumna ustala szerokość a wiersz "trzyma" elementy w jednej …

min() - jest funkcją CSS i pozwala na oznaczenie najmniejszej wartości w przypadku szerokości obiektu i przyjmuje jedno lub więcej wyrażeń rozgraniczonych przecinkami jako parametry (istnieje możliwość mieszania jednostek np. px, vw, %) - najmniejszy z dwóch podanych parametrów w danym momencie jest obowiązujący.

.second-level {
  width: min(50vw, 400px);
}

Przykładowo powyższy …

Neoumorphism jest sposobem stylizacji elementów stron nawiązujący swoją estetyką znaną z środowiska różnego rodzaju smartfonów, choć w duże mierze przymina mi głównie te z nadgryzionym jabłkiem. Poprzez grę cieni ten styl stara się wywołać efekt estetycznej trójwymiarowości gdzie poszczególne elementy są wypukłe lub wklęsłe a ich kształty są obłe lub …

Istnieje parę sposobów na to w jaki sposób można wycentrować treść, na środku strony w taki sposób aby znajdowała na środku strony.

Można to zrobić łątwo przy pomocy flexboxa, ale gdy nie chcemy zmieniać deklaracji 'rodzeństwa' (rodzica) danego elementu wówczas nie będzie to możliwe.

Bez jakiejkolwiek ingerencji w deklaracje przypisaną …

Jednym popularniejszych obecnie stosowanych układów stron internetowych jest oparty na wyśrodkowanej treści - dzięki temu treść strony nie rozjeżdża się na boki przy większych ekranach.

Taki układ można łatwo osiągnąć przy użyciu flexboxa, odpowiednio zagnieżdżonego div'a oraz przypisanej mu klasy określającej jego szerokość

Przyjmę, że będziemy operować na 3 częściach …

RWD - treść stara dopasować sie do wyświetlacza

alternatywnie istnieje jeszcze...

ADW - Adaptive Web Design -> desing w którym na sztywno tworzy się szerokość strony przypisaną do przedziałów szerokości ekranu (np. 600, 900, 1200px). To pod tą ograniczoną ilości szerokości tworzony jest layout, a ten jest wyświetlana dla zdefiniowanych przedziałów szerokości ekranu …

Reset

Każda z przeglądarek ma swoje domyślne style, celem resetu jest ich wyzbycie się i doprowadzenie do sytuacji, w której zadeklarowane style własne spowodują, możliwie jak najbliższe sobie zachowanie w różnego typu wyszukiwarkach internetowych. Normalizer zaczyna się od gwiazdki * wyznaczając, że deklaracja odnosi się do wszystkich elementów. Tu często …

Deklaracja clip-path: z przypisaną wartością polygon() pozwala na rysowanie poligonów o dowolnych kształtach. W ramach niej wpisane są pary procentów oddzielone przecinkami określającymi miejsce znajdowanie się węzła.

• 0% 0% - górny lewy róg
• 100% 0% - górny prawy róg
• 0% 100% - dolny lewy róg
• 100% 100% - dolny prawy róg

zatem:

• 50% 0 …

Właściwość calc() jest funkcją której mogą być przypisane wartości: length, angles, time, number, integer. Jest szczególnie przydatna w obliczaniu wartości relatywnych - ponieważ: pozwala na wykonywanie matematycznych wyrażeń dodawania, odejmowania, mnożenia, dzielenia (+,-,*,/)i wykorzystuje wynik jako wartość CSS, która przyjmuje wcześniej wspomniane wartości.

Przykładowe zastosowanie

50% rodzica dzielone przez 3

el …

Pseudo klasy pozwalają na wprowadzenie interaktywnego zachowania się strony przy pomocy CSS, przy pomocy tej deklaracji w zależności od zdefiniowanej sytuacji/stanu dany obiekt może przyjąć inny wygląd. Istotne jest to że deklaracja pseudoklasy poprzedzona jest dwukropkiem :

Przykładowy schemat zastosowania

selektor:pseudoklasa {
  właściwość: wartość;
}

W przypadku linków istniejącą pseudoklasy

a …

Pseudo elementy pozwalają na zadeklarowanie wyglądu odmiennego dla wybranego fragmentu tekstu lub wstawienie z pozycji CSS dodatkowego elementu. Pseudo elementy poprzedzone są podwójnym dwukropkiem :: np. ::first-line

Wzór zastosowania (za developer.mozzilla.org)

selector::pseudo-element {
  property: value;
}

selektor::pseudo-element {
  właściwość: wartość;
}

Innymi słowy pseudoelement jest słowem kluczowym, które w połączeniu z …

Box-sizing

Możliwe wartości do zastosowania przy tej właściwości

border-box - wielkość kontenera (div) jest dokładnie taka jak wskazano - definiuje wielkość kontenera po jego granicy

content-box- podstawowe, zachowanie się kontenera (div) od obszaru, w którym znajduje się jego zwartość /wskazana wartość wielkość pudełka odnosi się do jego zawartości, - oznaczo to że margines …

Schemat

Lista dyrektyw

selektor { 
właściwość - wartość właściwości; /* razem tworzą deklarację */
}

ang. rule set

Selector {
  property: property value; /* declaration */
}

Selektor znacznika np strong Selektor klasy poprzedzony jest kropką .

Selektor id poprzedzony jest haszem #

Selektor id nadaje priorytet regule ważniejszy od niż ten posiadający klasę, a selektor znacznika/typu ma najmniejszy priorytet …

Właściwość float wskazuje służy do pozycjonowani oraz formatowani treści wskazuje w jaki sposób element ma pływać (float)

left - znajduj się po lewej stronie right - znajduj się po prawej stronie none - nie pływaj inherit

Przykładowe zastosowanie

img {
  float: right;
}

Układ strony przy wykorzystaniu właściwości float

Clear

Właściwość clear definiuje po której …

Deklaracja place-items (podobnie jak align-items) odnosi się do pozycjonowania dzieci elementu, których układ jest zależny od układu Flexbox lub Grid.

Deklaracja place-items jest połączeniem align-items oraz justify-items i przyjmuje podwójne wartości w odpowiadające kolejno za align-items o następnie za justify-items. Wymaga wcześniejszej deklaracji floatbox lub grid

Przykładowe zastosowanie

.item {
  display …

Display odpowiada za sposób w jaki sposób dane elementy będą wyświetlane

Właściwości deklaracji display

inline - domyślna funkcja, elementy wyświetlane są w sposób liniowy / obok siebie

block - elementy wyświetlane są w sposób blokowy / jeden pod drugim

inline-block - charakterystyka bloku ale trzyma się linii / bloki jeden obok siebie

none - chowa element (usuwa …

Podstawowe właściwości position

static - wartość domyślna, pozycja zgodna z układem strony

relative - relatywnie do swojej domyślnej pozycji przesunięty o zdefiniowaną właściwość/wartość

• top, right, bottom, left

Przykładowe zastosowanie

  div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
    }

fixed - pozycja relatywna do wyświetlacza (viewport) - zawsze w tym samym …

Flexbox jest technologią odpowiedzialną za układ treści znajdujących się na stronie internetowej w dosłownym tłumaczeniu można by to nazwać elastycznym modelem pudełkowym. Faktycznie ten sposób organizacji tzw layoutu lub też interfejsu oparty jest na równorzędnych kontenerach zwierających treść, które mogą być organizowane w sposób poziomy (liniowy) lub pionowy (kolumnowy) i …