Spara tid med CSS Hat

Stora delar av hösten ägnade jag åt att se över mitt workflow samt att testa och utvärdera olika verktyg för att göra mitt utvecklingsarbete snabbare och enklare.

Jag har länge haft en tanke om att sammanfatta detta i en artikel men inte riktigt hittat tiden för det. Efter ett samtal om just arbetsflöden med Viktor Bijlenga har jag dock börjat ta tag i det.

CSS Hat

Ett av de nya verktyg jag börjat använda är CSS Hat, en plugin till Photoshop som ska underlätta processen att översätta en design från Photoshop till HTML och CSS.

Detta fungerar genom att CSS Hat lägger till ett fönster som hela tiden konverterar layer styles för det just nu valda lagret och visar det i form av CSS-regler. Utan att behöva göra någonting kan man alltså få ut så gott som alla stilregler för ett lager inklusive skuggor, kantlinjer, gradients, rundade hörn och teckeninställningar som sedan kan kopieras och klistras in i ditt stilmall.

Som bonus finns stöd för LESS, SCSS, Sass, Stylus och Stylus CSS utöver ”vanlig” CSS så koden förenklas med hjälp av preprocessorerna när det är möjligt.

Jag har kört det under några månader och det har sparat mig enormt mycket tid, inte minst då jag som ren utvecklare inte kan mer Photoshop och Illustrator än det absoluta minimum jag behöver. Och för den blygsamma summan av knappa 200 kronor ($29.99) är det en grym investering!

Läs mer och se några praktiska exempel på CSS Hats webbplats.

Publicerad:

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *