ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil
Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro potřeby konkrétních projektů, které na této platformě budou vznikat. Okrajově je zde vysvětlena struktura layoutu a další použité technologie. Podporované prohlížeče a standardy Internet Explorer 8+, Chrome, Firefox, Safari, Opera v aktuálních verzích. Je použito HTML5 už s novými tagy a pro starší verze prohlížečů je funkcionalita dodána pomocí frameworku modernizr.js. Základní koncepce Vychází se z potřeby vznikajících webových projektů, které mají mít jednotný vzhled na základě CI. Základní vzhled je vždy stejný a práce na každém projektu je tedy zbytečně se opakující činnost, kterou je vhodné udělat jednou. Vznikla tedy sada stylů, proměnných a mixin popisující základní layout a prvky v portálových aplikacích. Styly jsou psány v jazyce LESS [http://lesscss.org/] kvůli snazší správě a podpoře funkcionalit, jako proměnné nebo mixiny. Platforma SharePoint skoda-portal.less Platforma MVC skoda-web.less Základní styly a layout skoda-font.less, skoda-common.less Custom styly custom.less Základní proměnné a mixiny elements.less, skoda-colors.less, skoda-base.less Obrázek 1: Architektura stylů Základní proměnné a mixiny Jedná se o definice proměnných a mixin, které jsou využívány napříč všemi styly. elements.less jedná se o mixiny zajišťující cross-browser kompatibilitu u vendor-specific definicí; více info na stránkách projektu http://www.lesselements.com. Includuje: nic
skoda-colors.less definice barev na základě jejich názvů a hodnot z CI manuálu; dokument STY_20111005_SKO022_Styleguide_02_Web_pages.pdf dostupný na CD portálu (Online & Mobile/ŠKODA Online and Mobile Manuals). Includuje: nic skoda-base.less definice základních proměnných a mixin v souvislosti s layoutem ŠKODA Auto podle CI manuálu včetně evoluce fontů a některých barev provedené grafiky z EOM/5 Includuje: elements.less, skoda-colors.less LESSy z této kategorie po přeložení negenerují žádný CSS výstup a jsou tedy vhodné, jako include pro ostatní styly. Includovat by se měl skoda-base.less obsahující vše zásadní. Základní styly a layout Jsou to styly definující layout stránky, jako je brand hlavička, patička a defaultní styly pro vlastní obsah. Jsou zde také obsaženy některé obecně použitelné třídy, např. pro clear: both;, vytvoření mezery za nebo před blokem, schování prvku apod. skoda-font.less definice fontu Skoda Pro Includuje: nic skoda-common.less definice základního layoutu stránky a standardních stylů pro tělo obsahu. Includuje: skoda-base.less, skoda-font.less Platformě závislé styly V této kategorii se nachází výsledné koncové styly, které jsou zahrnuty do stránky na konkrétní cílové platformě. V současné době jsou podporovány platformy SharePoint a MVC. Není ale problém stejným způsobem vytvořit styly pro další platformy. Styly této kategorie rozšiřují definici skoda-common.less a doplňují ji o specifika konkrétní platformy. Styl vytvořený pro danou platformu by měl stačit pro její plnohodnotné obrandování v základní instalaci. skoda-portal.less specifické styly pro platformu SharePoint 2013 Includuje: skoda-common.less Custom styly skoda-web.less specifické styly pro platformu MVC Includuje: skoda-common.less Styly v této kategorii vzniknou vždy pro potřeby konkrétního projektu, který je postaven na stylech z portálové platformy. V tomto stylu jsou řešeny specifika projektu a je možné i upravit definice z Platformě závislých stylů. Custom styl includuje skoda-base.less, tedy LESS, který ještě stále negeneruje žádný výstup do CSS, ale nabízí všechny užitečné proměnné a mixiny, na kterých lze úspěšně stavět.
Základní struktura layoutu Layout je platformě závislá část. Portálová Platforma nabízí prozatím dva layouty pro platformy SharePoint 2013 a MVC. Oba layouty se liší v určitých detailech, které jsou na obou platformách implementovány odlišně. Jedná se hlavně o generování menu nebo o ovládací prvky, které musí být v layoutu podporovány. Struktura se tedy trochu liší, ale základní princip zůstává stejný. Všechny CSS třídy definované portálovou Platformou mají prefix sa-. Abychom předešli konfliktům s jinými frameworky nebo styly definovanými třetími stranami, všechny třídy mají tedy prefix sa-. Všechny CSS třídy týkající se prvků layoutu mají prefix sa-layout-. Aby byl očima jasně zřetelný význam stylu, je pro layout stránky použit prefix sa-layout-. Všechny základní prvky ovlivněné styly Portálové Platformy jsou uvnitř prvku označkovaného třídou sa-ci. Vlastnosti všech základních tagů, jako <table>, <b>, <h1>, <h2> apod. jsou platné pouze uvnitř elementu označeného jako sa-ci. To je poměrně zásadní vlastnost pro koexistenci stylů s dalšími částmi frameworku. Styly by neměly být aplikovány na části, kde být aplikovány nemají. Prvek (nejčastěji <div class="sa-ci">) je tedy kořenovým prvkem všech prvků, které mají být těmito styly ovlivněny. Snažte se neomezovat šířku obsahu příliš brzy. Nechte až na vlastním obsahu definici šířky obsahu a jeho vycentrování na střed. Považuji za chybu v layoutu definovat šířku vlastního obsahu a jeho centrování. Jednou za čas vyvstane potřeba pozicovat obsah roztažený na celou šířku stránky a to se uvnitř již omezeného bloku tvoří velice obtížně a výsledek je velmi problematický z pohledu chování a použití na jiných zařízeních. Toto pravidlo se v některých případech velmi obtížně uplatňuje i z důvodu použitého CMS a je zapotřebí hledat kompromis. Základní proměnné ColorMainGreen, ColorMainWhite, ColorMainBlack, ColorMainGray jsou to základní barvy definované v CI manuálu. ColorFurtherGray1, ColorFurtherGray2, ColorFurtherGray3, ColorFurtherGray4 jsou to doplňkové odstíny šedi definované v CI manuálu.
ColorFurtherGreen, ColorFurtherGreen2 jsou to doplňkové barvy k hlavní zelené barvě na základě CI manuálu. ColorButtonHero, ColorButtonHeroActive jsou to barvy hlavních HERO tlačítek. ColorButtonLow, ColorButtinLowActive jsou to barvy běžných tlačítek ColorTextDefault standardní barva textu ColorTextErrorMessage barva textu chybové hlášky FontFamilyCommon obyčejný nevíce kompatibilní font (Verdana) FontFamilySkoda moderní font (Skoda Pro) FontSizeDefault základní velikost standardního textu FontLineHeightDefault řádkování základního textu; bylo zvoleno relativní hodnotou 1.33em, což je 133% velikosti textu. Změnou velikosti textu nemusí být měněno řádkování. WidthContent šířka obsahu na stránce; je možno volit absolutní hodnotu v px tak hodnotu v %; Kvůli povaze účelu těchto stylů je hodnota nastavena na 90%, protože se předpokládá, že chceme využít co největší dostupnou plochu u uživatele. Základní mixiny.styletextdefault() standardní styl textu.styletitle() standardní styl titulku (pod zeleným menu).styleheadline1() standardní styl hlavního nadpisu (nejčastěji H1).StyleHeadline2() standardní styl podnadpisu (nejčastěji H2).StyleLink() standardní styl linku.styledottedlink() jedná se o styl linku, který byl požadován. Je to link s tečkovaným podtržením. Pravidlo se ale nechová dobře při použití lupy..commontable(@tablewidth: 100%) mixina standardní tabulky, která definuje standardní prvky tabulky podle CI manuálu. Je možné navolit šířku tabulky..buttonskoda() základní styl tlačítka.buttongreyskoda() základní styl šedivého tlačítka.buttongreenskoda() základní styl zeleného hero tlačítka.saclear() mixina pro řešení clear:both;, je zde ale použita alternativní konstrukce, která by měla být lepší..sainvisible() zneviditelnění prvku.savisible() zviditelnění prvku
.SaHidden() zmizení prvku.sa1spaceontop() padding nad prvkem o velikosti 1em.Sa2SpaceOnTop() padding nad prvkem o velikosti 2em.Sa1SpaceAtBottom() padding pod prvkem o velikosti 1em.Sa2SpaceAtBottom() padding pod prvkem o velikosti 2em.SaNoWrap() zamezí zalomení textu na další řádku.sapivot() nastaví position:relative;, takže lze vůči souřadnému systému určenému tímto prvkem pozicovat.saparagraph() nastaví odsazení kolem odstavce Další mixiny jsou definovány pomocí frameworku LESS elements - http://www.lesselements.com/ Základní CSS třídy sa-text-default kopíruje.styletextdefault() sa-clear kopíruje.saclear() sa-invisible kopíruje.sainvisible() s!important sa-visible kopíruje.savisible() s!important sa-hidden kopíruje.sahidden() s!important sa-1-space-on-top kopíruje.sa1spaceontop() sa-2-space-on-top kopíruje.sa2spaceontop() sa-1-space-at-bottom kopíruje.sa1spaceatbottom() sa-2-space-at-bottom kopíruje.sa2spaceatbottom() sa-no-wrap kopíruje.sanowrap() s!important sa-pivot kopíruje.sapivot() sa-inline definuje element jako inline sa-block definuje element jako block sa-vertical-middle definuje prvek tak, že vnitřní div nebo span bude vertikálně vycentrován vzhledem k tomuto prvku sa-text-align-left zarovnává text nalevo sa-text-align-right zarovnává text napravo
sa-text-align-center zarovnává text doprostřed sa-float-left floatuje blok doleva sa-float-right floatuje blok doprava sa-ci určuje hlavní kořenový element, ve kterém budou definovány styly prvků a layout table.sa-table kopíruje.commontable(); základní vzhled tabulky Současný status stylů Portálové Platformy Současné CSS styly popsané v tomto dokumentu a dodané přes Portálovou Platformu jsou ve stavu, jak byly požadavky na layout a základní styly v době jejich vzniku. Práce na těchto stylech a Portálové Platformě jako celku nadále pokračují a základní styly budou i nadále doplňovány a dokumentace rozšiřována. V současném stavu úplně chybí definice jednotného vzhledu formulářových prvků, protože prozatím každý projekt navrhuje jiný vzhled, velikosti a umístění prvků ve formulářích. Nakonec každý projekt na ně má jiné požadavky a tak prozatím neexistuje žádný standardizovaný (a doporučovaný) layout těchto prvků.