MAC PARA

Support Design Page

CSS Třídy

STYLY PRO WEB

Pozadí a barvy
TAG/class  ZDROJ/poznámka  výsledek
.bg-body, .bg-default  
BG Body, BG Default
.bg-gray-1  
BG gray 
.bg-gray-3  
BG gray 
.bg-gray-5  
BG gray 5
.bg-medium  
BG medium
.bg-primary  
BG primary
.color-primary  
Color primary
.color-gray-3  
Color gray 3
.color-light-on-dark bílý text Color light on dark

 

 

Nadpisy
TAG/class  ZDROJ/poznámka  výsledek

h1

.h1

<h1>Tag H1</h1>
- nadpis H1

<div class="H1">Class H1</div>
Class se použává tam, kde chceme design H1, ale porušili bychom hirearchii nadpisů.

Tag H1

Class-H1
.page-header h1 <div class="page-header bg-gray pl-3">
<h1>Page Header<h1>
</div>

Page Header
.h2-header Dvoubarevný H2 - pokud je část strong, obarví se červeně.
na střed
Strong Normal
.section-header h2 <h2>Dvoubarevný<strong>nadpis</strong></h2>
H2 je vnořený pod class .section
na střed

Dvoubarevný Nadpis

h2.remove-margin

 <h2 class="h2-header remove-margin">Remove margin</h2>
Posune nadpis o -25px - je to pro stránku, kdy používáme šedý pruh např. community, aby tam nebyla velká mezera mezi pruhem a nadpisem.

Remove margin

h2

.h2

 Class .h2 použává se tam, kde chceme design H2, ale porušili bychom hirearchii nadpisů.

Tag H2

Class H2

h3

.h3

  

Tag H3

Class-H3

h4

.h4

  

Tag H4

Class-H4

h5

.h5

  
Tag H5
Class-H5

 

 

BOOTSTRAP 4

TABULKY
class  ZDROJ  výsledek
.table, .table-sm, .table-striped, .w-100 <table border="0" class="table table-striped table-sm w-100">
...
Záhlaví 1 záhlaví 2
Test 1 Info
Test 2 Info

Více info: https://getbootstrap.com/docs/4.1/content/tables/  

 

 

AAA BBB CCC
aaa bbb ccc
AAA BBB
aaa bbb
ODSAZENÍ
class  ZDROJ  výsledek
.p-4 .m-3 .bg-gray-3 <div class="p-4 m-3 bg-gray-5 color-light-on-dark">TEST</div>  
TEST

Více info: https://getbootstrap.com/docs/4.1/utilities/spacing/
Poznámka: lze nastavit různé chování podle rozlišení například: .m-sm-3 .m-lg-5

OBRÁZKY
class ZDROJ/poznámka výsledek
.img-fluid přizpůsobení obrázku
roztáhne obrázek na plnou šířku dle elementu, max. do své skutečné šířky
.zoom-it

Otevření obrázku  - detail na klik 
<div class="zoom-it">
<a href="/media/1378/paraglide-illusion-01.jpg" title="Illusion - orange"><img class="img-fluid p-3" src="/media/1378/paraglide-illusion-01.jpg" alt="" /></a>
</div>

Doporučené velikosti obrázků

Karusel 1920 x 800 (zvážit případně pro větší rozlišení 2560 x 1440)
1920w - 1920, 800 | 1600w - 1600, 800 | 1366w - 1600, 800 | 1140 - 1366, 800 | 960w - 960, 785 | 720w - 720, 785 | 576w - 576, 576 | 480w - 480, 480

Fotogalerie 2000 x 1500 (náhled se ořezává na 462 x 308)
Designy 1500 x 700
Dva sloupce 620 x výška v poměru
Tři sloupce 462 x výška v poměru

GRID

WYSIVYG GRID

Nadpis testovací H2

Text, text, text...

Elan

Nadpis testovací H2

Text, text, text...

GRID VE WYSIWYG EDITORU
Sloupec 1
Sloupec 2

 

Více info: https://getbootstrap.com/docs/4.1/layout/grid/
Pomůcka na vytváření gridu: http://shoelace.io/

 

FLY IN PEACE