Komentáře k článku

CSS frameworky pro masy, díl druhý

Pojďme se blíže podívat na další dva zajímavé CSS frameworky — YUI CSS Foundation a 960 grid system, a další, které by mohly zajímat webdesignéry, vývojáře i příležitostné autory WWW stránek. Který framework vám bude nejvíce vyhovovat? To napoví srovnání typografických vlastností a závěrečná doporučení.

Zpět na článek

28 komentářů k článku CSS frameworky pro masy, díl druhý:

  1. nes_ro

    Re: CSS frameworky pro masy, díl druhý

    Děkuji za dobrý článek. Jdu ten Blueprint zkusit. Dřív jsem měl motivaci psát vlastní CSS, abych neměl zbytečnou omáčku kolem, kterou stejně nepoužiju, ale když už používám PHP a JS framework, tak asi bude snažší u jednoduších stránek použít Blueprint. Nadruhou stranu u složitějších laoyutů bych si asi styl psal radši sám, ta omáčka kolem by mohla způsobovat věci, na který nejsem zvyklej. :)

    1. Rivon

      Re: CSS frameworky pro masy, díl druhý

      Jj, super článek. Taky jsem si na všechno neustále dělal vlastní CSS. O CSS frameworcích jsem v životě neslyšel, ale abych pravdu řekl, tak se mi jejich snadnost použití hodně líbí, takže od teď asi začnu používat ;)

  2. altar

    Bluetrip

    Jen bych chtel doplnit, ze velice dobry framework je Bluetrip (viz. bluetrip.com), ktery kombinuje Blueprint a Tripoly. Urcite taky doporucuji vyzkouset

  3. vks

    Tabulkový layout rulez

    CCS framework je podle mě pro lamy kdo chce něco udělat, profík si těch pár desítek řádků v css může bez problému napsat sám…

    nemyslím si, že by někdo dělal tolik různých webů s tak různým layoutem, aby nešlo použít už několikrát použítý základ stylu a opravit jen pár hodnot a udělat jen pár drobností.

    PS: osobně jsem se vždycky štítil používat cizí kód (po spoustě zlých zkušeností)

    1. Tomas Vrana

      Re: Tabulkový layout rulez

      udělat jen pár drobností nezřídka dopadá jako férová předelávka a v případě kooperace s více lidma jsou frameworky k nezaplacení. Ad „používat cizí kód“ … frameworky nejsou sousedovou prací, ale značně kolektivní snahou a třeba v případě YAHOO se jedná o celý komplet komponent a framů, který si nevycucali z pstu přes víkend, ale jedná se takřka o prvotřídní a napříč prohlížeči neprůstřelné kousky. Mělo to tady být spíš už dávno a dnes tedy jako konvence.

      PS: osobně jsem se vždycky štítil používat nebo předělávat cizí kód, ale klient to tak chce a člověku nezbývá nic jiného než ten či ten autorský poděl prostě resetovat. Věc je prostě hlavně kolektivně výhodná. Od čehož vůbec frameworky asi jsou.

    2. Martin MichálekAutor příspěvku

      Re: Tabulkový layout rulez

      nemyslím si, že by někdo dělal tolik různých webů s tak různým layoutem, aby nešlo použít už několikrát použítý základ stylu a opravit jen pár hodnot a udělat jen pár drobností.

      Když si článek přečtete, zjistíte, že CSS frameworky se nezabývají výlučně layoutem. Často se jím nezabývají vůbec. Je to část, kterou můžete a nemusíte používat.

      Ad. cizí kód: Začněte tím, že si napíšete vlastní CSS framework a hned poté vlastní prohlížeč a operační systém. :-) Všechny jsou plné ošklivého a zlého cizího kódu. Ale taky ohromného množství dobrých nápadů vzniklých z týmové spolupráce nadšených lidí.

  4. kahi

    typografická vrstva?

    Mohl bys prosímtě vysvětlit, co myslíš, když říkáš „typografická vrstva“ nebo prostě „typografie“ v těchto souvislostech…? Chápu to dobře, že to znamená výchozí nastylování textových prvků?

    PS & OT: rád bych se přihlásil, ale výrok „Jméno a heslo platí pro všechny servery společnosti Internet Info.“ zjevně neplatí.

    1. Martin MichálekAutor příspěvku

      Re: typografická vrstva?

      Ano. „Typografickou vrstvou“ myslím výchozí nastylování všech prvků, nejen textových. Někdo téhle části říká vertikální rytmus.

      Je to část, která má ze všech k typografii nejblíže, byť na plnohodnotnou práci s písmem si na webu ještě počkáme.

      1. kahi

        Re: typografická vrstva?

        OK. Ještě by mě zajímalo: je něco z těchto typo-definic použitelné při kódování dle graf. návrhu (a příp. kolik), anebo v takovém případě je lepší začít nanovo?

        Druhý dotaz: díval jsem se, že některé frameworky pro některé prvky předepisují i způsob zápisu HTML, např. účast zvláštních tříd. Narážím teď na formuláře v tvém srovnání typografie – sdílí všechny příklady stejné HTML anebo ne? (Protože pokud framework předepisuje i HTML, srovnání které na to nebere ohled trochu dojem zkresluje…)

        Opět OT: Jestliže tento článek je součástí seriálu, jak mám najít první díl a jak poznám, jestli ještě nějaké díly budou?

        1. Martin MichálekAutor příspěvku

          Re: typografická vrstva?

          je něco z těchto typo-definic použitelné při kódování dle graf. návrhu

          Všechny jsou v takovém případě použitelné. Osobně jinak CSS frameworky nepoužívám.

          Můj postup je takový:

          1) k dokumentu přilinkuji Blueprint (tím za 10 minut práce získám docela dobrý základ – třeba takovýto http://www.vzhurudolu.cz/…ss/test.html)

          2) k tomu přilinkuji nějaké své CSS, kterým si nastavení Blueprintu upravím a dalé kóduju už „normálně“ vzhled a layout

          sdílí všechny příklady stejné HTML anebo ne?

          HTML je totožné. Dobrý podnět – je to tam potřeba zdůraznit.

          jak mám najít první díl a jak poznám, jestli ještě nějaké díly budou

          Obecně to je na redakci. V tomto případě se jedná o druhý a zatím závěrečný díl.

          Pokud z diskuze vyjde potřeba dalšího vysvětlení, budu se mu rád věnovat na blogu nebo v případě potřeby i zde na Zdrojáku.

          1. kahi

            Re: typografická vrstva?

            > Všechny jsou v takovém případě použitelné

            > k dokumentu přilinkuji Blueprint (tím za 10 minut práce získám docela dobrý základ – třeba takovýto http://www.vzhurudolu.cz/…ss/test.html)

            A pak předpokládám (oprav mě prosím), že musíš přepsat definice rodiny písma, velikosti a řádkování (běžné texty + nadpisy) a případně barvy podle toho, jak jsou na grafickém návrhu. Pak musíš zkontrolovat zbývající prvky (seznamy, tabulky, citace) a případně je rovněž zkorigovat.

            Z mého pohledu se zdá, že naprostou většinu věcí musíš buď zcela přepsat anebo alespoň zkontrolovat a jako hlavní výhodu oproti psaní na zelené louce vidím v tom, že je těžší zapomenout něco nastylovat, neb tam ty prvky v CSS vždycky vidíš všecky potenciální…

            1. Martin MichálekAutor příspěvku

              Re: typografická vrstva?

              předpokládám (oprav mě prosím), že musíš přepsat definice rodiny písma, velikosti a řádkování (běžné texty + nadpisy) a případně barvy podle toho, jak jsou na grafickém návrhu

              Ano, na každý projektu je potřeba drobnosti v typografii přenastavit. O barvách nemluvě, ty se týkají vzhledu a ten kóduješ vždycky od nuly.

              Osobně dělám na projektech v Shortcat s jediným designérem a máme vybudovaný systém, ve kterém se resetovací a typografická vrstva skoro vůbec nemodifikují a pokaždé myslím jen na ty horní vrstvy – layout, vzhled.

              V tvém případě (pokud chápu správně, že děláš různé weby s různými grafiky) můžu jen teoretizovat. Mám ale docela silný pocit, že minimálně ten vertikální rytmus (http://www.blueprintcss.org/…lements.html) a nastylování všech prvků ti hodně pomůže. Zkus to, rád si vyslechnu tvé zkušenosti. :-)

              1. kahi

                Re: typografická vrstva?

                Díky za trpělivost. Ve zkratce: že je možné se s grafikem domluvit na nějakých konvencích, to mě nenapadlo. Nevím jistě, co si o tom myslet. Nepůsobí potom styl obsahů trochu šablonovitým dojmem? (Když si postavíš vedle sebe různé práce téhož grafika.) Možná to není na závadu. Ale osobně to dělám raději pokaždé o něco málo jinak.

                Při stylování typografie (v mém pojetí: obsahu) si občas kopíruji kusy kódů z předchozích prací, to ale hlavně kvůli 1. výčtům prvků 2. jaksi zažitému způsobu stylování této části 3. specifikům výstupu z redakčního systému. Vlastně by to bylo docela podobné práci s typo.css např. z Blueprintu: prošel bych seznam a zkorigoval hodnoty. Ale tohle považuji jen za drobnou pomůcku, nic zásadního, ušetří mi to řekněme patnáct minut. Což se mi při pohledu na celý proces stylování velice snadno ztratí.

                1. Martin MichálekAutor příspěvku

                  Re: typografická vrstva?

                  Nepůsobí potom styl obsahů trochu šablonovitým dojmem?

                  To je na jinou diskuzi, ale jsem přesvědčený, že cílem designéra by mělo být navrhnout k danému obsahu optimální uživatelské rozhraní, nikoliv zabývat se drobnými odlišovacími úpravami v typografické vrstvě.

                  Jak je patrné z grafu v prvním díle článku, věřím, že u typografické vrstvy existuje pro různé weby jen málo optimálních způsobů jejího navržení a z toho pohledu nejsou dle mého názoru úvahy o škodlivosti „šablonovitosti“ na místě.

                  Dalo by se říct, že návrh typografické vrstvy je v zásadě řemeslo, kdy výsledek můžeme hodnotit jako dobře nebo špatně odvedenou práci. Naopak třeba vzhled (barvy atd.) jsou čistě o emocích a tam je vnímání různými lidmi zcela subjektivní.

                  Proto ta typografická vrstva je třeba v našich projektech v zásadě pořád stejná (nebo postupně vylepšující se).

                  A proč si ji nenapíšu sám, když je to v zásadě subtilní kousek software? Protože Blueprintu věřím a hlavně věřím, že výsledek práce v komunitě je daleko méně náchylný k různými triviálním chybám, které jsem jako individuál schopen nasekat.

    1. Pavel Dvořák

      Re: input,textarea,select{*font-size:100%;}??

      To bude variace na tzv. podtržítkový hack, pomocí kterého se dá odlišit Internet Explorer 6 a starší od ostatních prohlížečů.

  5. karf

    Re: CSS frameworky pro masy, díl druhý

    Bohužel, většina těchto frameworků je napsána dost nešikovně. Namátkou první řádek z 960gs:

    body { font: 13px/1.5 Helvetica, Arial, ‚Liberation Sans‘, FreeSans, sans-serif; }

    Takže zde máme:

    – písmo definované v px – neumožňuje zvětšování písma v IE

    – výška řádku 13 × 1.5 = 19.5, což nevychází na celý pixel – takový Firefox pak například vykreslí každý první řádek 19px a každý druhý 20px, což vypadá fakt blbě.

    – první font Helvetica? To bych (zvlášť v českém prostředí) raději nepoužíval. Kdo má na Windows Helveticu ví, že je kvůli vyhlazování při normálních velikostech dost špatně čitelná.

    O těch šílených konstrukcích, kterými vytvářejí grid ani nemluvě. A taky nevěřte všem proklamacím o kompatibilitě napříč prohlížeči. U Yahoo a Blueprintu to snad doufám platí, ale u různých minoritních frameworcích je potřeba to osobně testovat.

    1. Martin MichálekAutor příspěvku

      Re: CSS frameworky pro masy, díl druhý

      Nezobecňoval bych nešikovnost konkrétní části konkrétního CSS frameworku slovy „většina těchto frameworků je napsána dost nešikovně“.

      Každý z nich je vhodný pro někoho jiného, vám zřejmě nebude vyhovovat 960.gs. Doporučil bych ho třeba méně zkušenému grafikovi, který dobře umí HTML a CSS.

      Vám říkám: Zkuste Blueprint CSS nebo Yahoo CSS foundation.

      Problémy jako „Helvetica v českém prostředí“ jsou jistě palčivé, ale ty si můžete přenastavit sám. Tvrdím, že i tak na každém novém webu ušetříte spoustu času a nervů.

      CSS frameworky nelze brát jako skálu, do které se nemá šťourat, aby nám ten hrad nespadl. Je nutné se v nich šťourat. Přijít si na věci, které vám vyhovují a které naopak chcete nastavit jinak.

      1. karf

        Re: CSS frameworky pro masy, díl druhý

        To zobecnění je můj osobní závěr, který jsem si utvořit po shlédnutí zdrojových kódů některých frameworků (když se někde o nějakém psalo, mrknul jsem na to). Ve většině jsem opravdu nacházel konstrukce, které bych sám nikdy nepoužil a které považuju za problémové – od používání overflow pro clearování floatů, přes podivně definované rozměry bloků až po vyloženě hloupě obcházené bugy IE, nebo třeba nešťastné CSS resety.

        Já měl za to, že když už se něco nazývá „framework“, tak je to jakýsi základ, na kterém se má dál stavět. Čili že se snaží o co největší zobecnění stylů. Když si představím, že bych si měl přizpůsobovat grid definovaný podle Blueprintu nebo Yahoo CSS, tak na mě jdou mdloby.

        1. Martin MichálekAutor příspěvku

          Re: CSS frameworky pro masy, díl druhý

          Myslím si, že resetovací a typografická vrstva pomůže téměř všem.

          Ano, i tahle část kódu jde v případě kteréhokoliv ze zmiňovaných frameworků napsat lépe. Vy sám si ji možná lépe napíšete.

          Obecně ale u mě mají třeba Blueprint nebo Yahoo CSS foundation důvěru. V obou případech jde o kus kódu vyvíjený a (hlavně) testovaný během let širokou komunitou. Vy sám svůj kód takovému testování nebudete nikdy schopen podrobit.

          Když si představím, že bych si měl přizpůsobovat grid definovaný podle Blueprintu nebo Yahoo CSS, tak na mě jdou mdloby.

          Pozor, tady se nebavíme o gridu nebo layoutu. Ten má u CSS frameworků velmi specifické použití (viz články) a rozhodně bych s touhle vrstvou byl opatrný.

          1. karf

            Re: CSS frameworky pro masy, díl druhý

            Asi nemá smysl se navzájem snažit přesvědčit jestli frameworky ano nebo ne. Chtěl jsem původně opravdu jen poukázat na to, že je třeba si vždy framework důkladně a kriticky prostudovat a ne brát ho jak to leží a spoléhat se, že komunita to jistě krásně odladila.

            1. Martin MichálekAutor příspěvku

              Re: CSS frameworky pro masy, díl druhý

              Chtěl jsem původně opravdu jen poukázat na to, že je třeba si vždy framework důkladně a kriticky prostudovat a ne brát ho jak to leží a spoléhat se, že komunita to jistě krásně odladila.

              Souhlasím. Tady obecně leží největší riziko pro méně zkušené CSS kodéry, chtějí-li framework používat v produkčním nasazení.

  6. You've been always wrongdoing you idiots

    to evaluate a foreign code in a framework is always worse than designing a suitable algorithm and architecture

    #1 Good programmers just code. #2 Idiots need frameworks to evaluate the existing code of good programmers. #3 In this country, dumb enough people are the majority of IT so they prefer idiots.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=3072