NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:22.4.2014 11:03

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
22.4.2014 11:03
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:22.4.2014 11:10

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
22.4.2014 11:10
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:22.4.2014 11:16

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger:22.4.2014 11:18

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
New kid back on the block with a R.I.P
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 11:53

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
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:22.4.2014 13:09

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
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 14:59

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

Editováno 22.4.2014 14:59
Nahoru Odpovědět
22.4.2014 14:59
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 15:48

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
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 15:52

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
22.4.2014 15:52
lmao
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na alfonz
Michal Žůrek - misaz:22.4.2014 15:54

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
22.4.2014 15:54
Avatar
alfonz
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
alfonz:22.4.2014 15:56

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

Nahoru Odpovědět
22.4.2014 15:56
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 15:56

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
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
Odpovídá na Neaktivní uživatel
alfonz:22.4.2014 15:59

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
22.4.2014 15:59
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 16:03

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

Nahoru Odpovědět
22.4.2014 16:03
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
Odpovídá na Neaktivní uživatel
alfonz:22.4.2014 16:05

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

Nahoru Odpovědět
22.4.2014 16:05
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 16:09

A to klasické css snad ne?

Nahoru Odpovědět
22.4.2014 16:09
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 16:13

Myslíš tohle?
http://www.itnetwork.cz/dev-lighter/361

Nahoru Odpovědět
22.4.2014 16:13
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 16:15 
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
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 16:17

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

Nahoru Odpovědět
22.4.2014 16:17
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 16:21

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

Nahoru Odpovědět
22.4.2014 16:21
Neaktivní uživatelský účet
Avatar
alfonz
Člen
Avatar
Odpovídá na Neaktivní uživatel
alfonz:22.4.2014 16:23

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
22.4.2014 16:23
lmao
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na alfonz
Neaktivní uživatel:22.4.2014 16:26

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
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na alfonz
Honza Bittner:22.4.2014 16:29

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
22.4.2014 16:29
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 17:16

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
22.4.2014 17:16
lmao
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na alfonz
Honza Bittner:22.4.2014 17:25

To vůbec není pravda.

Nahoru Odpovědět
22.4.2014 17:25
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na alfonz
Michal Žůrek - misaz:22.4.2014 17:30

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
Avatar
alfonz
Člen
Avatar
alfonz:22.4.2014 17:35

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

Nahoru Odpovědět
22.4.2014 17:35
lmao
Avatar
Ondrca
Tvůrce
Avatar
Ondrca:22.4.2014 18:15

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Ondrca
Neaktivní uživatel:22.4.2014 19:12

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
22.4.2014 19:12
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:26.4.2014 20:18

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
Avatar
Marián Ligocký
Tvůrce
Avatar
Marián Ligocký:27.4.2014 10:28

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
Tvůrce
Avatar
Honza Bittner:28.4.2014 10:04

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:28.4.2014 12:43

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
28.4.2014 12:43
New kid back on the block with a R.I.P
Avatar
Marián Ligocký
Tvůrce
Avatar
Marián Ligocký:28.4.2014 16:25

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
Tvůrce
Avatar
Odpovídá na David Hartinger
Matěj Kripner:28.4.2014 16:42

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
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:28.4.2014 17:12

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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:2.5.2014 10:16

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

Nahoru Odpovědět
2.5.2014 10:16
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
David Hartinger:2.5.2014 10:29

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

Nahoru Odpovědět
2.5.2014 10:29
New kid back on the block with a R.I.P
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.