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.

The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

1. Animate.css


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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.



Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

A nifty collection of patterns, resources and news to help you design great websites.

16. SpritePad


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

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


Image source

“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


Image source

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


Image source

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


Image source

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


Image source

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.

(Visited 759 time, 1 visit today)

5 Comments 30 Best CSS Resources from 2013

  1. Jo Feb 4, 2014 at 20:48

    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.” :-)

  2. Elena Simionescu Feb 5, 2014 at 11:10

    Thanks for your observation :) Well played Jo! Well played.. :D

  3. Fran Ruiz Feb 7, 2014 at 20:59

    Gracias, muy buen contenido en CSS

  4. Gary Feb 9, 2014 at 22:19

    Thanks for this lovely collection! Love those guys at Typanus/Codrops…btw, was the typo for ‘Codrops’ to ‘Codrups’ intentional? I hope not :)


Leave A Comment

Your email address will not be published.