Are You Charging Enough?

Learn to charge what your worth, take our free course.

20 Fresh CSS Tutorials and Tools to Try

Web is evolving at a rapid pace and allows us, creators, to make ideas happen quicker and in more beautiful way. Web development community is extremely friendly and collaborative pushing the limits every single day. There are numerous quality blogs, communities and individuals sharing their knowledge, experience and tools in front-end development.

In this round-up I’d like to share some of my favorite findings on CSS (Cascading Style Sheets) and front-end development. You’ll find time saving frameworks, lessons, tutorials and neat tools for making your next project much more enjoyable.

Pure

Pure

A set of small, responsive CSS modules that you can use in every web project.

8 Pure CSS Flat Mobile Devices

8 Pure CSS Flat Mobile Devices

Minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes you create. Grab the code, remix and enjoy.

How to create a scrollable splash screen with CSS3 and jQuery

A great way to catch the attention of a visitor to your website is a “splash screen” or an “intro screen”. In this tutorial you’ll learn a basic method to achieve this effect, which you can modify easily to make nice-looking intros to web experiences.

Macaw

Macaw

Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.

Ratchet

Ratchet is a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.

Bourbon Neat

Bourbon Neat

A lightweight semantic grid framework for Sass and Bourbon.

A to Z CSS

A to Z CSS

Learn CSS from A to Z. Guy Routledge shares his knowledge and experience in high-quality video series.

Medium-Style Page Transition

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page.

Card

Make your credit card form better in one line of code. Beautiful animations for 4 different card types, an intuitive experience for your users and pure CSS, HTML, and Javascript.

Gumby

Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit.

CSShake

Useful CSS classes for making shaky animations for your web apps.

Bounce.js

Bounce.js lets you create tasty CSS3 powered animations in no time. Give it a spin.

Pleeease

Pleeease is a CSS post-processor. The main goal of this tool is to perform all treatments that a pre-processor shouldn’t have to do (dealing with prefixes, convert rem to px, support older browsers, etc.).

CSS Colours

A handy list of colour names in CSS, hex and rgb values are provided.

extractCSS

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you.

CSS Vocabulary

A small app to browse through which is what in CSS. Has some sample css with a list of CSS terminology. Clicking on anything in one panel highlights the corresponding items in the other.

Project Parfait

Project Parfait allows you to turn Photoshop comps into code-based designs. Right in your browser you can extract color, gradient and font from a PSD, copy text and CSS, get accurate measurements between elements and save web-optimized images.

Jeet Grid System

Jeet

Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.

Cody

Cody

Cody is a free library of HTML/CSS/JS nuggets to boost your web projects.

Magic Animations CSS3

Magic Animations

CSS3 Animations with special effects. Now on beta, more effects coming soon.

Did you enjoy this post?

Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.

Powered by ConvertKit