Zdravím všechny webdesignery! Tento týden to bude v pravidelné
minisoutěži o placku a samolepky o CSS frameworku.
Určitě tvoříte weby již nějaký ten pátek a za tu dobu jste si
oblíbili nějaké styly a vychytávky, které ve svých prezentacích
opakovaně používáte. A možná jste si již z těchto svých top stylů již
vytvořili jednoduchý framework. Potom máte již většinu práce hotovou,
přesně to budeme tento týden tvořit. A pokud nemáte, tak nyní máte šanci
dát si své styly dohromady a vytvořit z nich pěkný balíček.
Vytvořte univerzální CSS styl, který ostyluje do pěkné podoby
základní HTML prvky, jako jsou nadpisy, tabulky nebo tlačítka. Styly nemusí
být nijak složité, stačí, aby prostě vypadaly dobře a hlavně
konzistentně (např. nadpis by měl ladit k tabulce, když je to v jednom
stylu). Jistě víte, že čisté HTML bez stylu je po stránce designu
katastrofa a i přidání jednoduchého rámečku tabulce má obrovský
efekt.
Do svého frameworku můžete kromě těchto základních stylů přidat i
nějaké další vychytávky, jako citace, styly pro centrování bloků a
textu, float hack, nějaké tlačítkové panely, navigační menu nebo
responzivní boxy.
Dobrou inspirací je CSS framework Bootstrap - http://getbootstrap.com/. Na
poměry soutěže je samozřejmě velmi složitý, ale dá se tam krásně
podívat jak různé věci řeší (záložky CSS a components). Nelekejte se,
vypadá to velké, ale není
Můžete použít preprocesory alá LESS/SASS. Svůj styl demonstrujte na
jednoduchém Lorem ipsum webu.
Přesně tak a nemusí být ani obří. Mám napsaného něco svého co
používám při tvorbě webů a jsou to jen 2 malé soubory (základy a
formuláře). Přes preprocesor tomu jen změním barvu na tu, kterou klient
chce
O to mi jde, ale narozdíl od klasického stylování v Html není potřeba
každý tag stylovat zvlášť.
E:\\ Tady je odkaz pro stáhnutí mého výtvoru http://framework.lerainsoft.eu/…ramework.zip
V podstatě je to stejné. Ale například pro začátečníky je
jednodušší naučit se XML stylování které je skoro stejné jako Html. A
pokud se nepletu tak při každé úpravě v preprocesoru je potřeba styl zase
zkompilovat.
ale ta tvá kravinka bude totéž, nebo jak chceš všechny prohlížeče
naučit zpracovávat to tvoje? Je to zajímavá alternativa, ale musíte to
ještě značně vypilovat a vymyslet
strategii, takhle je to tu jako každý lerrain projekt. Prozatím si
to zase schovej na localhost a pokračuj ve vývoji.
Reálný css framework by měl býti obsáhlejší(pro účely soutěže
stačí to vaše), avšak všichni to máte nasmolené páté přes deváté v
jednom CSSku. To určitě není dobré ani výhodné. Při údržbě a
rozšiřování takovéhoto frameworku byste nechtěli býti...
Pokud budete dále pokračovat ve vývoji tak si rozdělte CSSka na
podsoubory - třeba tlacitka.css, menu.css atd...
Marian Logicky - Zajímavý kousek, dostatečně
univerzálně napsaný. V navigaci bije do očí "Some think (nějaké
myšlení)". Asi jsi chtěl napsat something. Class big je zbytečná, HTML má
k tomu přímo element big. Co se týče gridů, tak by se měly IMHO chovat
jinak, podívej se do bootstrapu, co se stane, když zmenšíš okno, tobě se
to rozsype.
Michal Žůrek - Není to špatné, ale s takovýmto
frameworkem bychom mohli tvořit jen oranžové weby, mělo by to být
univerzálnější. Ideálka by byl asi nějaký preprocesor, kde se nastaví
barva, do které bude web sladěný. Dobrý nápad s těmi štítky
omega - Něco je tam pěkné, ale něco nedodělané.
Hlavně tlačítka a formuláře by chtěly lépe zpracovat. Ty odstavce s
třídou nadpis jsem nějak nepochopil, proč tam nejsou prostě nadpisy?
Nejblíže je asi Marian, ale dost si to zkazil těmi gridy. Asi to zatím
necháme bez placky a já soutěž vyhlásím za nějaký čas znovu. Trochu mě
mrzí, že se nezúčastnil nikdo z místní webové elity, zajímalo by mě
jaké styly používáte.
používám to na reálném projektu (teď), vylepšuji to podle potřeb
tohoto projektu, dokonce jsem to chtěl včera zveřejnit, ale zapoměl jsem
Pokud budu mít
příště čas, rozhodně vylepším.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.