Nadpis
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque accusamus ipsam facilis, dolore consectetur quos nam minima labore voluptas soluta! Nobis tenetur facilis voluptatibus fugiat sed est recusandae itaque harum?
webstudio.team dev-stack
Barvy
Primární barvy
Primary
$colorPrimary
Primary darken
$colorPrimaryDarken
Sekundární barvy
Secondary
$colorSecondary
Secondary darken
$colorSecondaryDarken
Doplňkové barvy
Black
$colroBlack
White
$colorWhite
Green
$colorGreen
Yellow
$colorYellow
Blue
$colorBlue
Gray
$colorGray
LightGray
$colorLightGray
DarkGray
$colorDarkGray
BgGray
$colorBgGray
Typografie
Nadpis H1
Nadpis H2
Nadpis H3
Nadpis H4
Nadpis H5
Nadpis H6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam posuere lacus quis dolor. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam posuere lacus quis dolor. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Excepteur sint occaecat pharetra metus odio a lectus.
Grid
Použitý grid je Bootstrap (v4.4) grid: https://getbootstrap.com/docs/4.4/layout/grid/ 🤷
Přejmenované třídy:
.container => .row
.row => .grid
.col- => .grid__col příklad: .grid__col--6, .grid__col--lg-6
Desktop grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Tablet grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Mobile grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Grid bez odsazení
3
3
3
3
Grid 1px odsazení
3
3
3
3
Grid další odsazení
30px
3
3
3
3
50px
3
3
3
3
70px
3
3
3
3
Formulářové prvky
-
.input--group Flex nad elementama
-
.input__text--sm Malý input
-
.input__text--xs Ještě menší input
-
.input__text--lg Velký input
-
.input__text--bold Zvýrazněný placeholder
-
.input__wrapper--icon-after Ikona vpravo
-
.input__wrapper--icon-before Ikona vlevo
-
.input__wrapper--btn-icon Tlačítko s ikonou
Textové inputy
Input s tlačítkem
Select
Textarea
Checkboxes
Checkbox Single
Checkbox Multiple Block
Checkbox Multiple Inline
Checkbox Disabled
Checkbox small
Radios
Radio Inline
Radio Block
Radio Disabled
Navigace
-
.navigation-main--primary Primární pozadí navigace
-
.navigation-main--shadow Zapne stín navigace
-
.navigation-main--border Zapne ohraničení okolo položek
-
.navigation-main--border-items Zapne border mezi položkama
Header
Tiny
CNCCR
Czech Childhood Cancer Information System
Ústav zdravotnických informací a statistiky ČR
Institut biostatistiky a analýz LF MU
společné pracoviště
Institut biostatistiky a analýz LF MU
společné pracoviště
Identita
CNCCR
Czech Childhood Cancer Information System
Dohromady
Ústav zdravotnických informací a statistiky ČR
Institut biostatistiky a analýz LF MU
společné pracoviště
Institut biostatistiky a analýz LF MU
společné pracoviště
TBC
Tuberkulóza
Footer
-
.footer-main__extended--gray Šedé pozadí komponenty
-
.footer-main__extended--primary Primární pozadí komponenty
Action group
-
.action-group--filled Vyplní celou šířku
Vyplněná šířka
S ikonama a textem
Pouze s ikonama
Tag
-
.tag--lg Zvětší tag
-
.tag--sm Zmenší tag
-
.tag--xs Více zmenší tag
-
.tag--outline Nastaví bíle pozadí a border tagu
-
.tag--closeable Styly pro zavíratelný tag
Tag primární
Velký
Střední
Malý
Nejmenší
Tag Outlined
Velký
Střední
Malý
Nejmenší
Tag Closeable
Velký
Střední
Malý
Velký
Střední
Malý
Tag list
Accordion
-
.accordion--light-gray-borders Nastaví barvu borderů na světle šedou
-
.accordion--no-opened-margin Zruší po otevření accordionu margin
-
.accordion--block Vyplnění celé šířky
Test
Lorem ipsum dolor sit amet consectetur
V boxu
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Bez mezer pri otevření
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Světlé rohy
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet consectetur
Položka 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non velit dolorum sequi, repellendus ex voluptas eius harum quasi pariatur corrupti sint officiis doloribus eum! Laboriosam, perferendis maxime. Explicabo, et!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non velit dolorum sequi, repellendus ex voluptas eius harum quasi pariatur corrupti sint officiis doloribus eum! Laboriosam, perferendis maxime. Explicabo, et!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non velit dolorum sequi, repellendus ex voluptas eius harum quasi pariatur corrupti sint officiis doloribus eum! Laboriosam, perferendis maxime. Explicabo, et!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non velit dolorum sequi, repellendus ex voluptas eius harum quasi pariatur corrupti sint officiis doloribus eum! Laboriosam, perferendis maxime. Explicabo, et!
Image-tile
-
.image-tile--primary Primární pozadí
-
.image-tile--secondary Sekundární pozadí
-
.image-tile--side-image Nastaví obrázek na stranu
-
.image-tile--background-image Nastaví obrázek na pozadí
-
.image-tile--border-radius Nastaví komponentě border radius
-
.image-tile__image-holder--small Nastaví obrázku malou výšku (fixní)
-
.image-tile__image-holder--aspect-ratio-16x9 Nastaví obrázku poměr stran 16x9
-
.image-tile__image-holder--aspect-ratio-4x3 Nastaví obrázku poměr stran 4x3
-
.image-tile__image-holder--overlay Nastaví obrázku překryv