Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

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.

Deadline si dejme jako vždy v pondělí 28.4. v 10:00. Kompletní pravidla soutěží jsou zde: http://www.itnetwork.cz/…outezi-machr

Odpovědět  +3 22.4.2014 11:03
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ještě bych uvedl třeba Foundation, který je také velmi používaný : http://foundation.zurb.com/

Mimochodem, oba dva mají přístupné kódy v SASS, Bootstrap pak i v LESS.

Nahoru Odpovědět  +1 22.4.2014 11:10
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

Pokud chápu dobře tak CSS framework je vlastně jen "obří" CSS soubor, kde jsou různé styly nastylované pro třídy, že? :)

Tzn. si udělám třeba CSS:

.hobi-menu{ ... }
.hobi-button{ ... }
.hobi-red-style{ ... }
.hobi-blue-style{ ... }

Kde pak nějaké HTML:

menu
  a.hobi-button.hobi-red-style
  a.hobi-button.hobi-blue-style

pro menu, kde budou 2 tlačítka - červené a modré

? :)

Nahoru Odpovědět 22.4.2014 11:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

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 :D

Nahoru Odpovědět 22.4.2014 11:18
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Denis Homolík (Alfonz):

Můžeme překopat i celé CSS? Mám nápad na něco takového :D

Nahoru Odpovědět 22.4.2014 11:53
Vše je možné, dokud si to myslíte!
Avatar
Radim Sückr
Redaktor
Avatar
Radim Sückr:

Pěkný "minimalistický" příklad je také Semantic UI. Není tak "těžkopádný" jako Foundation nebo Bootstrap a přitom je také velmi silný.

Tip pro soutěžící: Myslím si, že nemusíte nutně dělat knihovny na UI. Stejně dobře můžete vyhrát, pokud uděláte jednoduchý a příjemný grid system. :)

Editováno 22.4.2014 13:09
 
Nahoru Odpovědět 22.4.2014 13:09
Avatar
Denis Homolík (Alfonz):

Co byste řekli na psaní stylů do XML souboru? :D

Editováno 22.4.2014 14:59
Nahoru Odpovědět  -3 22.4.2014 14:59
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

Ten XML soubor bych ti i s celým frameworkem nacpal někam, kdybych s tím musel dělat :D

Nahoru Odpovědět 22.4.2014 15:48
Creating websites is awesome till you see the result in another browser ...
Avatar
Denis Homolík (Alfonz):

Je v podstatě něco jako SASS, ale je to XML. Tady je ukázka jak to může vypadat. http://css.lerainsoft.eu/style.xml

Nahoru Odpovědět  -1 22.4.2014 15:52
Vše je možné, dokud si to myslíte!
Avatar
Odpovídá na Denis Homolík (Alfonz)
Michal Žůrek (misaz):

jakou to má přidanou hodnotu? není jednoduší to psát v něčem co je alespoň trochu základnímu CSS podobné?

Nahoru Odpovědět  -1 22.4.2014 15:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Denis Homolík (Alfonz):

Nemusí se to kompilovat(je to automatické při požádání o soubor) a je to bližší k Html.

Nahoru Odpovědět  -1 22.4.2014 15:56
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

To není styl, to je v podstatě html a návrat k html atributům :)

Editováno 22.4.2014 15:56
Nahoru Odpovědět 22.4.2014 15:56
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Denis Homolík (Alfonz):

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

Editováno 22.4.2014 16:02
Nahoru Odpovědět  -2 22.4.2014 15:59
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

Takže v podstatě kromě změny ve způsobu zápisu žádná inovace.

Nahoru Odpovědět  +1 22.4.2014 16:03
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Denis Homolík (Alfonz):

Umožnuje to i zanořování(Nes­ting).

Nahoru Odpovědět  -1 22.4.2014 16:05
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 22.4.2014 16:09
Creating websites is awesome till you see the result in another browser ...
Avatar
Nahoru Odpovědět  -1 22.4.2014 16:13
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:
article{
  ..
}

article p{
  ..
}

není zas tak veliký rozdíl. Minimálně je to přehlednější.

// Nehledě na to, že něco takového bys použít neměl, protože by p měl mít třídu ;)

Editováno 22.4.2014 16:16
Nahoru Odpovědět 22.4.2014 16:15
Creating websites is awesome till you see the result in another browser ...
Avatar
Denis Homolík (Alfonz):

Je to v SASSu, takže to někdo používá.

Nahoru Odpovědět 22.4.2014 16:17
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

To že to tam je, neznamená, že bys to měl používat.

Nahoru Odpovědět 22.4.2014 16:21
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Denis Homolík (Alfonz):

Kdyby to nikdo nepoužíval tak by to tam nebylo. Ale dost OffTopicu. Tohle je prostě můj výtvor. :)

Editováno 22.4.2014 16:24
Nahoru Odpovědět  -2 22.4.2014 16:23
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

Dobře, lekce čtení. Přečti si 10x neměl bys používat a pak 10x nikdo nepoužívá, pak zkus sám přijít na rozdíl.

Nahoru Odpovědět 22.4.2014 16:26
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Honza Bittner:

Nevím včem je tvůj

<body background="blue">
  <section background="grey" width="100%">
    <p color="green"></p>
  </section>
</body>

výhodnější než

body{
  background: blue
}
body section{
  background: grey;
  width: 100%;
}
body section p{
  color: green;
}

případně s využitím zanořování v nějakém preprocesoru

body{
  background: blue
}

section{
  background: grey;
  width: 100%;
  p{
  color: green;
  }
}

??

Nahoru Odpovědět  +3 22.4.2014 16:29
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Denis Homolík (Alfonz):

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.

Nahoru Odpovědět  -2 22.4.2014 17:16
Vše je možné, dokud si to myslíte!
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět  +1 22.4.2014 17:25
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Denis Homolík (Alfonz)
Michal Žůrek (misaz):

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.

Nahoru Odpovědět 22.4.2014 17:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Denis Homolík (Alfonz):

Dobrá uznávám svou porážku, ale já se vrátím :D

Nahoru Odpovědět  +1 22.4.2014 17:35
Vše je možné, dokud si to myslíte!
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Ahoj, jelikož frameworky nepoužívám tak mám otázku:
Když uživatel framework použije, nastyluje si i něco sám, nebo jede jenom na tom frameworku?

Nahoru Odpovědět 22.4.2014 18:15
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Ondrca
Jiří Gracík:

Využije framework tam kde chce a potřebuje, a když framework něco neumí nebo si to kodér chce napsat sám, tak si to napíše sám.

Nahoru Odpovědět  +1 22.4.2014 19:12
Creating websites is awesome till you see the result in another browser ...
Avatar
Michal Žůrek (misaz):

Ahoj, nemám (a v nejbližší době nebudu) mít dost času, tak přidávám takové strohé řešení.

download: http://misaz.moxo.cz/…ramework.zip
online sample: http://misaz.moxo.cz/…k/machr1417/

Nahoru Odpovědět 26.4.2014 20:18
Nesnáším {}, proto se jim vyhýbám.
Avatar
Marián Ligocký
Redaktor
Avatar
Marián Ligocký:

Download: http://leteckaposta.cz/513367782

Prepáčte, chcel som to dať aj online ale mám problémi s doménov. Keď sa to opraví dám aj online

 
Nahoru Odpovědět 27.4.2014 10:28
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Btw. jsem neměl čas... :P

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... :)

A také doporučuji nějaký preprocesor :)

Nahoru Odpovědět 28.4.2014 10:04
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

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.

Editováno 28.4.2014 12:44
Nahoru Odpovědět  +4 28.4.2014 12:43
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Marián Ligocký
Redaktor
Avatar
Marián Ligocký:

pokúsim sa opraviť ten grid systém a neskôr sa zapojím znova :-)

 
Nahoru Odpovědět 28.4.2014 16:25
Avatar
Matěj Kripner
Redaktor
Avatar
Odpovídá na David Čápka
Matěj Kripner:

Taky se to pokusím vylepšit a zúčastním se znovu :) S těmi nadpisy by to asi mělo být, jak říkáš, ale z vizuálního pohledu to vyjde úplně nastejno :D

Nahoru Odpovědět 28.4.2014 16:42
"We reject kings, presidents and voting. We believe in rough consensus and running code" David Clark
Avatar
Michal Žůrek (misaz):

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 :D Pokud budu mít příště čas, rozhodně vylepším.

Nahoru Odpovědět 28.4.2014 17:12
Nesnáším {}, proto se jim vyhýbám.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

David Čápka, možná blbej dotaz, ale proč to mám v PHP ? o_O

 
Nahoru Odpovědět 2.5.2014 10:16
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:

To je velmi zajímavá otázka :`

Nahoru Odpovědět  +1 2.5.2014 10:29
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
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.

Zobrazeno 38 zpráv z 38.