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.
A set of small, responsive CSS modules that you can use in every web project.
Minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes you create. Grab the code, remix and enjoy.
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 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 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.
A lightweight semantic grid framework for Sass and Bourbon.
Learn CSS from A to Z. Guy Routledge shares his knowledge and experience in high-quality video series.
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.
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.
Useful CSS classes for making shaky animations for your web apps.
Bounce.js lets you create tasty CSS3 powered animations in no time. Give it a spin.
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.).
A handy list of colour names in CSS, hex and rgb values are provided.
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.
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 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 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 is a free library of HTML/CSS/JS nuggets to boost your web projects.
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.