CSS

LESS je zajímavé rozšíření klasického zápisu kaskádových stylů CSS umožňující v nich používat proměnné, funkce, operace a větvit části zápisů do sebe. Výsledkem je pak radikální zrychlení tvorby finálního stylesheetu.

Chcete k základní variantě svých webových stránek nabídnout také mobilní zobrazení? Někdo se omezí na redukci grafických prvků, jiný dá přednost tzv. responsive designu. V článku si ukážeme, jak vytvořit mobilní vzhled webu simulující vzhled aplikace pro iPhone.

Nové značky v HTML5 jsme již několikrát nakousli. Dnes se podíváme podrobněji na tvorbu kostry stránky tvořené v HTML5, na nové značky pro její vytvoření a na úpravy layoutu pomocí CSS3. Řada věcí je nová a dobrou zprávou je, že vše je jednodušší, než kdy dříve.

V mailech i komentářích pod články se často ptáte, jak se pustit do stylování Drupalu. Nemůžete se zorientovat ve vygenerovaném HTML ani v připravených šablonách. Je to přitom snadné. V návodu se podíváme, jak připravit vzhled bloku s poslední anketou, přičemž využijeme úpravy pomocí CSS3.

Chcete vytvářet své kaskádové styly efektivně? A ještě jste nevyzkoušeli Firebug? V tom případě se podívejte na video představující jednotlivé vývojářské nástroje zabudované do webových prohlížečů a využijte jejich funkcí pro usnadnění své práce.

Nastavení vzhledu tabulek na webových stránkách je často nejvíce nepříjemná část práce webového designéra, resp. toho, kdo tvoří soubor CSS. Myslím, že nebudu daleko od pravdy, když napíšu, že většina designérů počítá s tím, že tabulky se prostě nějak zobrazí, plus mínus podobně jako zbytek webu. Také si nevzpomínám, že bych někdy viděl grafický návrh, který by nějakým způsobem počítal se zobrazením tabulek.

Relativně novou knihu od Zoner Pressu mám někdy od léta. Často jsem v ní listoval, nakonec ji z větší části přečetl postupně od začátku do konce. Responzivní design je aktuální téma pro všechny webdesignéry a nelze jej ignorovat. Jak vám s tím tato kniha pomůže?

Považujete všemi deseti dokonale ovladatelný editor VIM za výborný nástroj pro úpravu kódu? Pak vás možná překvapí jím inspirovaný nový editor Atom nabízející trošku více flexibility. A pokud VIM neznáte nebo nemáte rádi, pak editoru Atom určitě dáte alespoň jednu šanci.

Ať už programujete a tvoříte weby v PHP, .NET, Pythonu nebo něčem jiném, stejně se neobejdete bez psaní značek HTML a zápisů CSS. Psaní delších, opakujících se kódů je otravné. Ovšem s využitím nástroje Emmet zkrátíte čas pro tuto činnost na minimum.

Už dlouho hledám nějaký jednoduchý, zdarma dostupný nástroj pro tvorbu wireframů pro webové stránky. Zkusil jsem jich mnoho, žádný mě však moc nezaujal. Výjimkou je Pingendo, který jsem našel o víkendu. Podporuje totiž Twitter Bootstrap.

Před koncem roku vždy intenzivně pátrám po aplikacích, které by mi mohly pomoci s prací. Letos jsem mezi jinými vybral CodeKit – nástroj, který optimalizuje velikost obrázků pro web, kontroluje správnost skriptů a případně je minimalizuje. To vše skoro automaticky.

Před pár měsíci jsem tu psal o LESS, dynamickém jazyku pro tvorbu CSS, který vám výrazně zrychlí stylování webu. Dnes se podíváme na jednoduchý program Crunch!, který se vám při práci s LESS může hodit.

Na Maxiorlovi jsem před pár dny upravoval administrační prostředí a mimo jiné jsem mírně optimalizoval rozložení prvků u políček s obrázky. Dle mého názoru výrazně plýtvaly místem. Stačila však troška CSS a modul CSS Injector.

Na letošním Remixu byla jedna z přednášek věnována také málo známým trikům v použití kaskádových stylů. Každý asi zná podmíněné formátování pro nastavení stylů podle použitého webového prohlížeče, rozdíly mezi identifikátory a třídami, dědičnost atd. Molly Holzschlag ukázala i několik méně známých fint, jak přivést webové stránky k dokonalosti pomocí kaskádových stylů. Nabízím vám stručný přehled těch nejzajímavějších.

V dnešním docela jednoduchém návodu si vyzkoušíme vytvoření jednoduché sekce pro často kladené dotazy na webu. Bude obsahovat otázky s odpověďmi, které budou standardně ukryté. Zobrazení odpovědi si vyzkoušíme jen s použitím čistého CSS, ale v další fázi také s pomocí jQuery. A nakonec se podíváme, jak to implementovat do Drupalu.