Living Styleguide Made Easy

Tools
Excerpt

Transform your variables into elegant styles, color swatches or typography charts can be generated automatically directly from you variables files. Just group them with the comments and you are done. Edit snippets, organize categories, update styles, everything can be done directly in the browser. This tool is developed as npm package, because node packages can…

sanitize.css: render elements consistently

Codes
Excerpt

sanitize.css makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box. Sanitize follows in the footsteps of normalize.css and reset.css — standardizing browsers while giving you the canvas you want to play with. sanitize.css contains the baseline styles many of us end up writing anyway. CSS inheritance is assigned universally…

Styleguide (the Half-Naked Truth)

Shoutout
Excerpt

A style guide is a list of all design-related directives (UX / UI) and deals with questions regarding the use of typography, specific HTML (text) elements, embedded media and the right corporate colors. With a visual style guide or style guide, the emphasis is on the accurate monitoring of the online branding of your website…

MaintainableCSS

Resources
Excerpt

Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, semantic, scalable, high performing and of course, maintainable CSS. MaintainableCSS is a set of principles, guides and conventions that help you write CSS for large or small scale websites. If you have ever experienced pain in maintaining…

Let’s Encrypt, HTTPS Certificate Authority

Tools
Excerpt

You can now get free HTTPS certificates from the non-profit certificate authority Let’s Encrypt! This is a website that will take you through the manual steps to get your free HTTPS certificate so you can make your own website use HTTPS! Let’s Encrypt is a free, automated, and open certificate authority (CA). The objective of…

Flexbox Patterns, examples and source code

Codes
Excerpt

Flexbox is a new set of rules for positioning child elements within a parent element. You can think of it as a way of predictably laying out items within a container. Flexbox CSS is awesome, but it introduces many new concepts that can make it difficult to use. Without flexbox, CSS layouts have to be…

Unslider: an ultra-simple jQuery slider

Scripts
Excerpt

Unslider is an ultra-simple jQuery slider for your website. The easiest way to get a simple slider up and running in seconds. All you need is some valid markup, jQuery and some extra CSS, and Unslider can do the rest. Despite being small, Unslider is very flexible and extensible: you can change pretty much anything…

Gridlex, a Flexbox Grid System

Codes
Excerpt

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules. The concept is simple: you need to wrap your .col in a .grid. That’s all. Basically each column is the same width as every other cell in the grid, but you can…

Colorify.js, a tiny javascript color extractor

Scripts
Excerpt

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs! In summary, with Colorify.js, you can : Extract the dominant color…