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.
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.
It simply functions like a CSS polyfill but we can still use variables and math functions.
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).
Also, FireShell includes popular libraries like jQuery, Moderniz, HTML5 Shiv and Google Analytics code.
Requirements: Nodejs, Sass and Grunt
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 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.
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.
Photographer.io 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.
Requirements: Ruby on Rails, Redis
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 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.
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.
Requirements: Windows OS