blog

40 TOOLS FOR WRITING BETTER CSS

We all know CSS is great. It makes our sites look good, can be used to add animation, and keeps the presentation separate from the content. It can be hard, though, to know everything there is to know about CSS. It only gets harder as we try to make our code cross-browser compatible.

This is where third-party tools come in. From simplifying our workflows, to generating actual CSS, these tools give us the code we need, faster, even as we learn to write it ourselves.

PURE

Pure is not quite a framework. Rather, it’s a collection of CSS code that has been divided into modules for ease of use. Grab what you need, and only what you need, for your project. All components are, of course, responsive. Pure includes a grid system, buttons, tables, forms, and menus, and is built on normalize.css.

MAGIC ANIMATIONS CSS3

A collection of CSS3 animations designed to be applied to just about anything. Swap your elements in, slide them out, twist them, fade them, and generally go wild.

JEET GRID SYSTEM

Jeet is a SASS-based grid system that works a bit like semantic.gs. Instead of adding classes to your markup, you define columns (and sometimes rows too) right in your CSS. This makes creating responsive layouts even easier, and further separates content from presentation, just like (insert your favorite deity here) intended.

10 PURE CSS FLAT MOBILE DEVICES

A man named Oleg went and re-created ten different mobile devices (including the iPhone 6, iPad Mini, Nexus 5, and Lumia 920) in pure CSS, for use in your mockups and prototypes. Thank you, Oleg.

CODYHOUSE

A library of unrelated, self-contained components for your website. They’re built with HTML, CSS, and JavaScript. Your options include various kinds of navigation, parallax effects, pagination, modal windows, page layouts, and still more. Each comes with an actual tutorial to get you set up faster.

RATCHET

If you use HTML, CSS, and JS to write mobile apps, then Ratchet might be the framework for you. Each UI component is tailor-made for mobile devices, and there are more than a few that you won’t see in traditional HTML/CSS frameworks. The defaults look good.

ANIMO.JS

Animo is a jQuery-based library that gives you more ways to trigger CSS animations. You can stack animations, or trigger a second animation once a first has completed, and all while taking advantage of the hardware acceleration that CSS animations provide.

ADOBE EXTRACT

Converting the layer styles from a Photoshop file to CSS can be a real pain, at times. Fortunately, Adobe went and made a tool (which works in your browser), that allows you to select a layer, and convert its properties to CSS code. You can also select any text in the PSD for use in the live site as well.

SCULPT

Yet another framework! Well, the more the merrier. This one’s based on SASS, and unlike many others out there right now, Sculpt is designed to support legacy browsers. If you like building mobile-first sites with SASS, and want them to look decent on old versions of IE, look at Sculpt.

CSS3 GENERATOR

A simple generator for commonly used CSS3 properties. It’s not new, but it’s useful for when you forget the exact syntax.

BOURBON NEAT

More SASS love! Bourbon Neat is a simple and semantic grid system that can be used on its own, but was designed to be used with the Bourbon mixin library.

ENJOY CSS

Enjoy CSS is another CSS3 generator, but with an interesting twist. Instead of just generating CSS3-related code, you can pick the kind of element you want to apply it to: a div, a text input, a button, and so on. It’s a simple, visual way of getting the exact effect that you want.

KEYFRAMER

Start creating your keyframe-based CSS animations here! Just head to the site and follow the directions.

GUMBY

Gumby is a HTML/SASS framework designed more for those who like to work in a Ruby environment. You can download it separately, of course, but it also comes packaged as a Ruby gem, and was created by people who love that technology.

CSSHAKE

More CSS animations, here, with an emphasis on shaking things up a little. (See what I did there?) But no, seriously, these guys have shaking their online money makers down to a fine art (I can’t help it).

BOUNCE.JS

Bounnce.js combines visual tool (for designing CSS animations) with a JS library (for the implementation). It’s pretty simple to use, for those who love to design things visually.

GRIDLOVER

Need a simple, visual way to set up your font sizes? GridLover gives you an easy way to preview your typography, set up your vertical rhythm,  and grab your CSS. Best part? You can grab the CSS with pixel values, EMs, or REMs, formatted as regular CSS, SASS, LESS, or Stylus code.

EXTRACTCSS

Want to set up your CSS file quickly? One way would be to write your HTML first, set up your IDs, classes, and so on. Copy and paste the HTML into Extract CSS, and the web app will list all of your selectors for you, ready to be put in your CSS file.

KITE

Kite is a CSS layout library that is designed to work like the new flexbox CSS layout module, but without actually using flexbox. It’s compatible with IE 8+.

PESTICIDE

Need to figure out exactly what’s going on with your layout? Add the Pesticide CSS file. It will add outlines to each and every element on the page, subtly changing the outline color as elements go further down in the hierarchy. Simple, but impressive.

PLEEEASE

Tired of having to look for different tools to preprocess your CSS, add vendor prefixes, include IE filters, and all the rest? Don’t mind using the command line? This is for you. Compatible with SASS, LESS, and Stylus,

CSS COLOURS

A list of CSS-friendly color names. The hex and rgb values are provided as well.

CSS VOCABULARY

A small app that provides a handy list of CSS-related terms. Select one, and it will show you what the term refers to by highlighting some example code.

TRIDIV

Build complex 3D models with pure CSS.

BUTTONS

A CSS button library built with Sass & Compass.

CSS MENU MAKER

CSS Menu Maker will help you to build clean, responsive website navigations.

ONE% CSS GRID

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort.

SIMPTIP

Simptip is a simple CSS tooltip made with Sass. You can have a tooltip in different directions (top, left, bottom, right). You can also have a Tooltip in different color such as success , info , warning and danger.

MYTH

Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.

HOVER CSS

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration.

CSS ANIMATION CHEAT SHEET

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

SPINKIT

SpinKit contains some simple but awesome loading spinners animated with CSS.

TYPEBASE.CSS

Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects.

SPRITEBOX

Make your CSS imager sprites with a simple Drag ‘n’ drop editor, and let it write the code for you.

CSS RATIOCINATOR

This is a command line tool that will clean out unused CSS code by examining what actually gets rendered. It’s perfect for those large projects where the CSS files may have gotten out of hand.

CSS BEAUTIFIER

Make your CSS pretty! If you’ve got a minified file and can’t find the original (or you’re just a bit messy when you code), the beautifier can fix that with proper formatting and indentation.

CSSCOMB

After you’ve made your CSS look readable with the CSS Beautifier, you can run it through CSScomb to make sure all of your properties are organized in alphabetical order. Not your selectors, mind you. Just their properties, so width: always comes after font-family:, etc.

ANIMA

An animation library designed to expand on what you can do with CSS animations, and animate up to 100 elements at a time.

RECESS

Recess is a “linter” program that can also be run as a compiler to make sure that your CSS conforms to a set of rules for keeping it clean. Each rule can be disabled individually to suit your coding style.

BONUS: A TO Z CSS

It’s not a tool, but it is a fantastic resource for beginners. On A to Z CSS, Guy Routledge gives solid lessons in the very basic principles of working with CSS, like the box model, and the most commonly-used CSS properties.

Related posts

7 Replies to “40 TOOLS FOR WRITING BETTER CSS
  1. 只需要上網辦理手續,手續簡單,提供最貼心的方案 樓宇按揭貸款- 中國及海外業務| 中國業務| 海外業務. … 永隆銀行竭誠為您實現置業大計,提供一站式的國內樓宇按揭貸款服務,透過本行的專業服務及靈活貸款安排, …

    http://wealthlink.hk/?page_id=122

  2. 以低能量的1064-Q激光反覆掃於皮膚表面,逐步改善皮膚色素問題。 治療時產生的熱能能促進膠原蛋白的再生,回復肌膚彈性。 使用7mm平行光光頭,使輸出的激光更溫和及均勻。功效: 去除紋身 美白及去除面毛 令整體膚色更白更均勻 減淡及去除荷爾蒙斑或反黑 增加皮膚膠原蛋白,改善皮膚彈性 減淡深層色斑 : 黃褐斑,荷爾蒙斑,蝴蝶斑 以低能量的1064-QS激光反覆掃於皮膚表面,逐步改善皮膚色素問題 使用8-10mm平行光光頭,使輸出的激光 更溫和及均勻 1. 激光能透進皮膚深層 2. 激光被黑色素吸收 3. 產生熱能將黑色素體分解 4. 被呑噬細胞吸收及排出體外

    http://cosmedicbook.com/treatments/info/水光槍-美白祛斑-水潤亮肌

  3. 當蛋白線埋入皮膚後,皮下組織會將蛋白線視為異物,啟動異物反應,因此刺激膠原蛋白生長,且可促進新陳代謝,更新老化肌膚,所以客戶在術後也會發覺膚質變得較透亮白皙。膠原蛋白提拉線像一個“磁力線”一樣,將埋入處附近的肌肉和脂肪固定在原處,不會往下墜,其後會吸引皮下組織往蛋白線集中部位移動,就會逐漸產生提拉的緊實效果。也被用於填充美容的微整形,蛋白線材就好比蓋房子的鋼骨支架,先埋入皮膚當作基底結構,然後再注入好比水泥的玻尿酸或自體脂肪,因為有吸附力不易擴散,就可穩定固定住填充物,讓立體支撐力效果更好。

    http://cosmedicbook.com/treatments/info/CO2-Laser-祛痣祛疣

Leave a Reply