04 Zdrojová složka src

Pro psaní CSS byl vybrán preprocesor SASS v kombinaci s mixinovou knihovnou Bourbon pro usnadnění práce.

CSS je inspirováno Atomic designem v kombinaci s BEM syntaxí. Od Atomic designu se odvíjí i základní adresářová struktura:

1. atoms – základní stavební kameny frameworku. Jsou to nejmenší součásti frameworku, které jsou dále používány v molekulách a organismech. Typově jsou to např. jednotlivé formulářové prvky, štítky, typografie apod.
   1. forms - formulářové prvky (tlačítka, inputy, ...)
   2. icons - ikony FontAwesome
2. molecules – skupiny atomů a speciální struktury HTML. V našem případě je dále dělíme na boxy, výpisy, formuláře a menu. Molekuly v HTML poznáme na první pohled, protože jsou prefixované klíčovými slovy box-, crossroad-, form- či menu-, které jsou dále k nalezení v odpovídajících složkách.
   1. box
   2. crossroad
   3. form
   4. menu
3. organisms – větší části kódu, nejčastěji vznikají sloučením více různých molekul. V našem případě jsou organismy použity pro hlavičky a patičky.

Naše nástavba – složka lib

1. font.scss - definice webfontů
2. normalize.scss - slouží k normalizaci rozdílů u základních elementů napříč prohlížeči. Pozor soubor byl doplněn o nové definice oproti výchozí knihovně
3. sk-framework.scss - definice SK mini frameworku (např. třídy pro práci s textem)
4. sk.scss - definice vlastních mixin
5. variables.scss - nastavení všech proměnných - barvy, fonty, odsazení a breakpointy.

Styly pro dokumentaci - využívají se pouze pro dokumentaci

1. documentation.scss - speciální styly pro vzhled dokumentace
2. documentation/highlight.css - syntax highlighter

Hlavní soubor pro generování CSS je soubor style.scss, ze kterého se kompiluje soubor style.css. Zdrojový style.scss soubor obsahuje:

1. Základní definice pro element html
2. import Bourbonu
3. import lib.scss - importování naší nástavby CSS se základními mixinami, fontem, normalizem apod. Pozor nelinkuje se sk-framework
4. import typography.scss - nastavení základní typografie
5. import atoms.scss - nastavení importu souborů s atomy ve správném pořadí. Jednotlivé atomy jsou popsané zde
6. import molecules.scss - nastavení importu souborů s molekulami ve správném pořadí. Jednotlivé molekuly jsou popsané zde
7. import organisms.scss - nastavení importu souborů s organismy ve správném pořadí. Jednotlivé organismy jsou popsané zde
8. reset horního marginu pro *:first-child – vždy resetujeme horní margin elementů u prvních položek v bloku
9. import sk-frameworku - linkuje se až jako poslední kvůli váze selectorů

Pro fakulty jsou předpřipravené stylopisy style-__zkratka-fakulty__.scss, které generují vlastní style__zkratka-fakulty__.css. Princip je stejný jako styl pro základní stylopis. Tyto sass soubory jsou umístěny v root složce css, stejně jako style.scss, a oproti tomuto souboru obsahují předefinování některých proměnných - zejména pro barevné odlišnosti. Pokud byste potřebovali více úprav pro jednotlivé fakulty, pak upravte soubor fakulty podobně jako je popsáno zde.

Nikdy nelinkujte style.css a stylopis pro jednotlivé faktulty zároveň. Jelikož se nejedná pouze o tzv. skin css, ale plnohodnotné css - stačí linkovat vygenerovaný stylopis se sufixem patřičné fakulty.

Pro generování vlastního stylopisu je připravený soubor style-custom.scss. Tento stylopis importuje rovnou koncové soubory (atomů, molekul a organismů), aby bylo možné je jednoduše:

• odstranit pokud nejsou potřeba,
• nebo upravit dle potřeby,
• nebo nahradit jiným souborem,
• upravit pořadí linkování apod.

Pozor: tento soubor byl vytvořen při tvorbě dokumentace a může se stát, že budou některé komponenty chybět. Proto doporučujeme před započetím prací na tomto soboru znovu překopírovat importy ze souborů lib.scss, atoms.scss, molecules.scss a organisms.scss.

Tento souboru obsahuje pouze typografii a import bourbonu s proměnnými. Soubor pro wysiwyg editory, díky kterému dokáží editory zobrazit totožný vzhled jako na webu. Tento soubor se generuje ze souboru wysiwyg.scss a vzniká z něj stylopis wysiwyg.css. Tento soubor by se neměl objevit na ostré verzi webů - slouží pouze pro administraci.

Bude připraveno

Pro nastylování vzhledu dokumentace bylo potřeba vytvořit pár definic CSS. Proto vznikl extra stylopis documentation.css, abychom zbytečně tyto styly nevkládali do produkčního CSS. Generuje se ze souboru documentation.scss. Tento soubor je linkovaný v hlavičce. Tento soubor by se neměl objevit na ostré verzi webů.

Pro jednoduší dohledání zdrojových sass souborů je implementováno mapování. V Chrome devtools při vyselectování DOM elementu je u stylů ukázáno, z jakého souboru a na jakém řádku se definice nacházejí.

Mapování je navíc doplněno o konvenci v pojmenovávání selektorů, které obsahují prefixy box, crossroad, form a menu pro molekuly. Ostatní neprefixované selectory jsou buďto selectory z našeho frameworku, atomy či organismy.

Tato složka obsahuje PHP soubory, ze kterých se kompilují standardní HTML šablony. Šablony jsou rozděleny do několika typů:

1. Dokumentace frameworku - ty mají prefix f-
2. Design manuál - ty mají prefix d-
3. Atomy - ty mají prefixy a-
4. Molekuly - ty mají prefix m-
   • 01 - pro formuláře
   • 02 - pro boxy
   • 03 - pro menu
   • 04 - pro rozcestníky
5. Organismy - ty mají prefix o-
6. Příklady stránek - ty mají prefix s-
7. Příklady stránek Filozofické fakulty - ty mají prefix ff-

Složka se soubory pro simulaci ajaxu. Nachází se v kořenu adresáře src. Tyto soubory obsahují, co je přesně potřeba vracet při ajaxovém požadavku.

1. suggest.php - simulace našeptávače.

Pozor, při implementaci odstraňte linkování souborů pro dokumentaci v hlavičce (header.php) a patičce (footer.php). Jsou okomentovány.

Kromě standardních metatagů se v elementu head objevují i meta tagy pro sociální sítě. Tyto meta tagy slouží k lepšímu popisu stránky pro sociální sítě - zpětné linky na sociálních sítích pak budou vypadat lépe.

Facebook

• Doporučuji nastavit nadpis stránky, aktuální url, popisek stránky, název stránky a obrázek (ten ideálně generovat v rozměru 1200x630, jinak vkládat nějaký obrázek okolo 1000px
• Aktuálně je nastaven univerzální obrázek s logem MU

Twitter

• Je dobré nastavit twitter účet, nadpis, popisek a obrázek - ten by neměl být nižší než 120x120px
• Aktuálně je nastaven univerzální obrázek s logem MU a twitter účet @muni_cz

Pokud nechcete tyto elementy vyplňovat, pak je prosím odstraňte.

Složka s webfonty. Aktuálně obsahuje webfont Meta Web Pro a FontAwesome v různých formátech, pro zajištění funkčnosti v co nejvíce prohlížečích.

Složka se všemi obrázky, které jsou dále rozdělené do složek:

1. bg - složka s obrázky linkovanými v CSS. Tato složka navíc obsahuje 3 podsložky, icons, sprites, sprites-retina, které slouží ke generování spritů a custom icon fontů.
   1. icons - do této složky se vkládají svg, ze kterých se generuje custom webfont pro ikonky s mixinami do SASSu. Aktuálně se nevyužívá - pro ikonky se používá font Awesome. Pokud budete vkládat nějaké nové ikonky, pak je potřeba každou ikonku vsadit do jednotného plátna / rozměru - 1000x1000px (zvětšené na stejnou velikost - dle většího rozměru).
   2. sprite - z png obrázků z této složky se vygeneruje sprite s mixinami do SASSu. Aktuálně se nevyžívá.
   3. sprites-retina - z png obrázků z této složky se vygeneruje retina sprite s mixinami do SASSu. Aktuálně se nevyžívá.
2. social - složka s obecnými obrázky, které se linkují pomocí meta tagů v elementu head
3. illust - složka s ilustračními obrázky linkovanými v HTML

Pro ikonky se využívá webfont knihovna FontAwesome, ukázky a dokumentace použití ikonek. Podrobnější dokumentace a lepší hledání ikonek zde.

Všechny js jsou psány v CoffeeScriptu

Páteřní soubor se jmenuje app.coffee, který obsahuje router jednotlivých komponent JavaScriptu - ty jsou umístěné ve složce components.

JavaScripty jsou opět rozděleny do několika složek:

1. static - JS knihovny, které se nijak nekompilují a pouze přesunou do vygenerované složky /web/js/.
   1. jquery.js - knihovna jQuery
   2. d3.js a nv.d3.js - knihovny pro grafy
   3. graphs.js - inicializace grafů. Slouží pouze jako ukázka. Linkuje se pouze na stránce s grafy.
   4. documentation.js - javascripty pouze pro správnou funkčnost dokumentace.
   5. highlight.pack.js - syntaxe highlighter - používá se pro dokumentaci.
2. lib - knihovny, které nelze stahovat přes bower
   1. headroom.js - plugin pro skrývání / odkrývání hlavičky při scrollu. Není dobře udělaný jako bower balíček, proto se musí linkovat extra.
3. components - inicializace komponent pro jednotlivé atomy, molekuly a organismy
   1. accordion.coffee - inicializace accordionů. Používá se zde: TODO
   2. cycle.coffee - inicializace carouselů. Využívá plugin jquery-cycle2. Používá se zde:
   3. eventActions.coffee - bindování událostí na dokument. Zejména click událostí. Používá se zde:
   4. header.coffee - incializace skrývání / odkrývání hlavičky při scrollu a bindování událostí pro rozklik hlavičky při respozivních verzích. Pro skrývání/odkrývání slouží plugin headroom.js. Používá se zde:
   5. headerMenu.coffee - skrývání položek při menším rozlišení či větším počtu položek, které se nevlezou na jeden řádek + události s tím související. Používá se zde:
   6. lightbox.coffee - inicializace lightboxu. Lightboxy vycházejí z pluginu Fancybox a jquery-touchswipe. Používá se zde:
   7. map.coffee - obsluha zobrazení layoutu vyhledávání u mapy. Používá se zde:
   8. matchHeight.coffee - srovnání výšek. Využívá bower balíček matchHeight. Používá se zde:
   9. scrollbar.coffee - inicializace custom scrollbarů. Využívá plugin Tiny Scrollbar. Používá se zde:
   10. scrollNav.coffee - skrývání položek v .js-scroll-nav při zmenšeném rozlišení nebo velkém počtu položek. Využívá plugin scrollbarWidth. Používá se zde:
   11. secondarySubmenu.coffee - počítání offset pozice při hover submenu na navigaci. Používá se zde:
   12. selectize.coffee - inicializace custom selectboxu. Používá se zde:
   13. tabs.coffee - inicializace tabů. Používá se zde:
   14. tooltip.coffee - inicializace tooltipů. Využívá plugin Tipso. ODKAZ Používá se zde:

Balíčky natahované přes balíčkovací systém bower. Tyto balíčky jsou dále používaný v jednotlivých komponentách.

• matchHeight - plugin pro srovnávání výšek, který řeší i změnu šířky okna.
• jquery-cycle2 - plugin pro carousely.
• tipso - plugin pro tooltipy.
• scrollbarWidth - plugin pro detekci šířky scrollbaru
• tinyscrollbar - plugin pro custom scrollbary
• fancybox - plugin pro lightboxy
• jquery-touchswipe - plugin pro touch eventy