1 ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil2 Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě ta...
Š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
Platforma MVC
skoda-portal.less
skoda-web.less
Custom styly custom.less
Základní styly a layout skoda-font.less, skoda-common.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 skoda-web.less – specifické styly pro platformu MVC Includuje: skoda-common.less
Custom styly 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
, ,
,
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
) 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ů.
