CSS

Zkoušíte-li rádi nové vývojové pomůcky, mrkněte na online vývojové prostředí pro tvorbu webů. Codio nabízí online správu projektů, zabudované virtuální prostředí pro ladění, podporu Gitu nebo SFTP, konzolu Node.js, podporu různých komponent od PHP přes Ruby až k Pythonu, ale i databáze.

Experimentální projekt Adobe s názvem Project Parfait si klade za cíl nabídnout online aplikaci schopnou zpracovat nahrané soubory PSD přímo v prohlížeči a pomoci s exportem CSS a jednotlivých vrstev coby obrázků. Na první pohled tento experiment funguje skvěle a vypadá jako užitečná pomůcka pro každého kodéra CSS.

Určitě jste několikrát řešili problém, co s příliš širokou tabulkou na webové stránce. Jedním z řešení může být otočení popisků v záhlaví tabulky, takže zaberou méně místa. Dnes tento úkol snadno zvládnete jen s pomocí několika řádků CSS a výsledek plně postačí. Především u tabulek s širokým popiskem a krátkými hodnotami.

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.

Občas potřebuji provést nějaké změny v CSS na webu bez toho, že bych styly rovnou ukládal na server a ladil to před lidmi. Vývojová kopie webu není vždy dostupná. Co s tím? Řešení může nabídnout jednoduché rozšíření webového prohlížeče Chrome.

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.

Design stránek, který pružně reaguje na velikost okna prohlížeče, je stále populárnější. V Drupalu není problém použít některý z obecných responsivních frameworků. Ty odlehčené ale většinou nijak neřeší přeskládání menu v případě, že je stránka zobrazena na smartphonu. Co s tím?

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.

Jen málo nově vznikajících nebo redesignovaných webů se obejde bez responsivního layoutu. Vybral jsem několik nejznámějších frameworků, které jsem využil u některých projektů a které bych vám rád doporučil.

Dnes mám pro vás malý tip na malé vylepšení vašich webů, které souvisí s typografií. A myslím, že jej málokdo řeší. Jak jste na tom se zarovnáváním obrázků do pomyslných textových řádků a dodržováním řádkování?

Připravujete-li responsivní layout webové stránky, pak zdánlivě není nic jednoduššího, než měnit velikost okna prohlížeče a sledovat, jak se web mění. Je ovšem dobré vědět, jak bude web vypadat na konkrétním rozlišení.

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.

Udělat před lety webový formulář, který bude na klientské straně ověřovat data a následně je zpracuje pomocí AJAXu, aniž by se znovu načítala celá stránka, vyžadovalo množství kódu. Dnes je situace jiná, stačí vám troška JavaScriptu a CSS pro úpravu vzhledu formuláře.

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.