30 Best CSS Resources from 2013
“Most people have no idea of the giant capacity we can immediately command when we focus all of our resources on mastering a single area of our lives.” – Tony Robbins
As far as web design resources go, having a good, competent CSS resource is essential in optimizing the time and money you invest in creating a website. This list contains 30 of these resources, to make you life easier, and be sure that your design is top-notch and competitive, in what truly is a difficult market.
1. Animate.css
When your goal is to catch the user’s attention, animations are usually the right way to go about this. Animate.css is here to help, putting several stunning, cross-browser animations at your disposal. They are brilliantly suited for home pages and sliders, and they are also really easy to use.
2. Mueller Grid System
A modular grid system with a knack for style, the Mueller grid system is made for responsive, adaptive and non-responsive layouts, based on Compass. Column width, gutter width, baseline grid and media query are completely under your control, making sure everything is just the way you want it to be.
3. Sosa Icon Font
Icons play an important role in giving your website personality. Choosing the right icons can, essentially, be the difference between a stylish website, and an ugly one. Sosa is a lovely, elegant plain-black icon pack, ranging from a WordPress icon, to a Wi-Fi icon, to a Contacts icon, this font has it all. Its 160+ range won’t leave you wanting.
4. Makishu 3D Dropdown Menu
Having an interesting dropdown menu can be a real upper hand in designing websites. Makishu looks real neat and is a pleasant departure from the droll “just-appears” dropdown menu. It gives your website just that extra bit of personality that will make it stand out in a crowd
5. Centurion
Centurion is a framework built using Sass and CSS3, making it very adaptable. It automatically scales your website so that it remains responsive and viewable on any device. The makers of this framework even boast that by “using some basic magic”, the framework even works on IE7.
6. piCSSel-art
This resource is a double whammy of awesome. Simple, easy and fun to use, piCSSel-art lets you draw in 8-bit, then converts your masterpiece in HTML and CSS code, ready to be implemented in your web design. You can either use it of their site by clicking the link provided above, or fork it off of GitHub from the link we are providing now.
7. Screen Sizes
When designing a website, you have to take into account all the different devices that your website is going to be browsed from. Different devices mean different screens, and it’s nigh impossible to optimize for every last one. If you want your design decisions to be backed by cold, hard statistics, this is the resource you’ve been waiting for you.
8. DiagnostiCSS
Checking for errors is extremely tedious and can really put a dent in your work flow. DiagnostiCSS aims to help you in this daunting task by visually detecting potential invalid, inaccessible or erroneous HTML markups.
9. CSSO
Usually, minimizers do basic, safe transformation processes like removing whitespace or comments, or minimizing multi-line strings or color properties. CSSO takes it one step further by performing structural optimizations such as removing overridden properties, or partially merging blocks.
10. Anima.js
If you find animating difficult, than this is definitely the tool for you. Being the only animation framework that has elementary physics integrated, Anima allows you to use delays and durations normally, even on pure CSS animations.
11. Animated CSS3 Web Banners
Codrups is, in general, a great resource for web designers. So it wouldn’t be a proper web design resources list if we didn’t have at least one entry from them. This tutorial teaches you how to build web banners and ads using CSS3 animations. These animations should work on any standards-compliant web browser.
12. Normalize.css
Normalize’s mission is to help you move away from standard CSS resets. Forms, headers and other such typical browser elements are pre-formatted and mirrored, so that they are ready for display in any browser. This allows you to design on what is basically a blank slate, and get perfect results.
13. Create Polaroid Image with CSS
Even though actual physical polaroid pictures have been dead and buried for some time now, they still are an iconic image. They are universally accepted as “the way vacation photos look”, so they can be quite effective in building travel websites. This tutorial does exactly what it says; it teaches you to make polariod images, using CSS.
14. Clank
Web apps are all the rage right now, so when designing you need a good prototyping framework to start with. Clank is just the thing you’re looking for.
15. This is Responsive
A nifty collection of patterns, resources and news to help you design great websites.
16. SpritePad
Photoshop takes a long time to master, and even then the problem of whether or not your computer is powerful enough to run rears its ugly head. SpritePad won’t replace all of Photoshop’s uses, but you can definitely use it for generating sprite sheets. It gets the job done and will run on any computer.
17. Typeplate
Unsatisfied with the fact that pattern libraries don’t separate styling and markup, making them difficult to use in a modular modular way, the makers of Typeplate created a “typographic starter kit”. It defines markup with extensible styling, taking care of the technical implementation, without affecting the design.
18. Prefixr
Filling in prefixes in CSS3 code is soul-crushingly awful, and that’s why you’re going to fall head-over-heels in love with this web app. Simply copy over a snippet of CSS3, and it will automatically fill in the prefixes accordingly.
19. Furatto
A simple, flat and classy front-end framework, Furatto is a great starting point for any project you might have in mind. The website even provides a few examples if you’re suffering from designer’s block.
20. Bootstrap
When designing a website, you have to take into consideration the fact that a lot of people are going to access it via mobile device. The people at Bootstrap know this, and provided a nice little mobile first framework for you to work with.
21. CSS-Only Responsive Layout with Smooth Transitions
Like we’ve said before, this wouldn’t be a proper list without at least one entry from Codrups. That being said, here’s another tutorial from them, this time teaching you how to make a responsive layout with smooth transitions, using only CSS.
22. PixelKit Bootstrap UI Kit
A really cool looking, flat front-end kit, the Bootstrap UI Kit brings some rather stunning buttons, bars and web apps to the table, so that you don’t have to design them from scratch.
23. CSSDeck
This is an online coding app with a twist. Unlike other such apps, CSSDeck also offers a gallery of small code snippets for you to browse and draw inspiration from. These snippets are, of course, user generated.
24. Siiiimple
Here’s something that’ll really help you shine. This is a stunning 12 column CSS grid that is really easy to use, and really easy to read. The creators themselves call it a “super, super, super, super simple CSS grid”.
25. Pondasee
Pondasee is starter kit for creating front-end fast. It’s supported on all browsers, and is made using SCSS and Compass, allowing it to dynamic CSS data.
26. Girder
“Minimalist” is the name of the game, and Girder plays the game well. This grid has elegance and simplicity written all over it, with its flexible grid units based on page sections, and its Breakpoint support that lets you build mobile-first. Simply put, its a layout helper with the essentials.
27. Profound Grid
Seamlessly switching from fluid to fixed layouts is any web designer’s dream. That’s why this grid system is your dream come true. You can make the grid fluid or fixed, add media layouts as needed, change the column and gutter width, add or remove columns as whimsically as you want.
28. Nifty Modal Window Effects
Oh, Codrups, you spoil us. First two tutorials, now this: a modal window effects pack to make our windows pop-up in cool ways. These are are some stunning examples of how you can make really cool transition effects and animations using CSS.
29. CSS Trashman
A truly useful tool to have in your belt, CSS Trashman automatically refactors your CSS and makes a new stylesheet for the website you insert in its textbox.
30. 320 & Up
Our last entry is a web design boilerplate, designed by Andy Clarke and Jina Bolton. Andy, who is also part of Stuff & Nonsense, said about his boilerplate that “I’ve used versions of it on every website I’ve worked on since I wrote it.”, so if 320 & Up is S&N approved, you should definitely give it a try.
We hope you enjoyed our list of CSS resources, and that you’ll find it eye opening and helpful. If you think there’s anything we missed, or would like to share how any of the entries on our list was useful to you, please let us know in the comment section.
How’s the weather in your computer? “Photoshop takes a long time to master, and even then the problem of weather or not your computer is powerful enough to run rears its ugly head.” :-)
Thanks for your observation :) Well played Jo! Well played.. :D
Gracias, muy buen contenido en CSS
Excelente articulo y muy completo.
Thanks for this lovely collection! Love those guys at Typanus/Codrops…btw, was the typo for ‘Codrops’ to ‘Codrups’ intentional? I hope not :)