Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Sass’

Writing clean CSS is a laborious task when you get into newer CSS3 properties and their respective browser prefixes. Thankfully some crafty developers have built online web applications to save us all that tiny bit of frustration.

Take a glance over these links and see if you can find any gems. Those who understand Sass/Compass will find some cool webapps in the list. Plus a number of code generators and other helpful CSS tools for any frontend developer.

CSS Comb

webapp tool css comb logo

Read the rest of this entry »

There are great and popular CSS preprocessors like SASS and LESS.

Myth is an other one which allows us to write pure CSS without having to worry about browser support, or even slow spec approval.

Myth CSS

It simply functions like a CSS polyfill but we can still use variables and math functions.

The tool auto-adds browser-prefixes, runs on Nodejs and has a nice JavaScript API.

There are popular CSS preprocessors like Less or Sass which are written with a custom syntax (and compiled to CSS with JavaScript or scripting languages).

AbsurdJS is another preprocessor which supports both HTML + CSS and written in JavaScript.


It is available for Nodejs + the browser and has the advantage of providing an already-popular syntax: JavaScript.

Just like other pre-processors, it can be only used to generate the CSS file or as JavaScript to make use of variables and any other dynamic features.

FireShell is an open source framework for quickly creating a front-end boilerplate and workflows.

It comes with an HTML5 boilerplate (baseline HTML5 features, DNS prefetching, responsive meta) and Sass (with pre-setup files and folders).


Grunt.js is used for compiling Sass, concatenating JavaScript files, connecting to a localhost server and live file reloads + injection.

Also, FireShell includes popular libraries like jQuery, Moderniz, HTML5 Shiv and Google Analytics code.

Web designers/developers who write client-side code with a language that needs to be compiled, usually lose some time going back and forth with their editors and the compiling interface (usually command line).

If you don’t already have a setup for auto-compiling, Koala might be what you need.

It is a desktop application that works on Windows, Mac + Linux and can compile Less, Sass, Compass + CoffeeScript.

Koala Compiler

Koala can compile the files manually or automatically once they are changed and compresses them.

Also, it is possible to set different options for each file to be compiled.

Furatto is a front-end framework, that uses Bootstrap and Foundation as a base, for developing websites quickly.

The framework makes use of the popular flat UI trend and built with responsive layouts in mind.

Furatto Front-end Framework

Besides the typography + grid, it has styles for all the major elements like buttons, tables or forms and various JavaScript components like modal or tooltips.

The colors and styles used in Furatto can be changes easily as it uses Sass and it is a must-bookmark framework specially for flat UI fans. is a fresh “photo community” web application (that is in beta status) for presenting + sharing photos and getting feedback.

The code powering this community is recently open sourced (GitHub repository) so that anyone can either contribute to the code or create their own site.

It is built with Ruby on Rails, CoffeeScript, SASS and PostgreSQL + Redis for storing the data.

The system has a powerful “photo exploring” feature where you can find photos by category, latest uploaded, random, recommended or via searching for keywords.

Each user has a profile page where his/her photos are listed and each photo can be recommended or commented on too.

And, the EXIF data of photos are available, if a location is included, it is displayed in a map as well.

KineticWing is a free IDE that is lightweight, portable and works on all major operating systems (Mac support is mentioned to be coming soon).

It is not a complicated IDE but more like a smart text editor with modern features.

These features include support for Sass or Less (with built-in compiler), HTML5-CSS3 or CoffeeScript.

KineticWing IDE

A great feature is the ability to extending it with JavaScript plugins and there are already many like JSHint, JSLint, Less Compiler, JSBeauty..

KineticWing is supporting server-side languages as well and more of them are being added within time.

The editor is not yet perfect, it is in beta status, but the features and roadmap are very promising.

Buttons is a CSS library for creating highly customizable, flexible and modern web buttons.

It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow).

The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.

P.S. A Ruby Gem-friendly version exists as well.

CSS Buttons Library

When building websites with scripting languages that require compiling (Sass, Less, Stylus..), compiling them manually (or via refreshing the page) is usually an extra step.

Prepros is an open source application for Windows OS that can do that automatically for Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown.


It auto-compiles the source and injects the CSS (also HTML and JS) to the browser so that no refresh is needed.

There are options for the compiling process like the output format or its style (compressed, nested..).

Prepros also has a built-in + static HTTP server for testing any ajax requests.

Uptime Robot