Styleguide (the Half-Naked Truth)

Standard

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

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…

Flexbox Patterns, examples and source code

Codes

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…

Gridlex, a Flexbox Grid System

Codes

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…

Basscss: Low-level CSS toolkit

Codes

Basscss is a lightweight collection of base element styles, immutable utilities, layout modules, and color styles designed for speed, clarity, performance, and scalability. Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. Composable Reusable, interoperable styles work like building blocks to lay the…

Solved by Flexbox: Cleaner, hack-free CSS

Codes

This is not another CSS framework. Instead, the purpose of this site is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser. View…

csstyle: clean, simple styling for the web

Codes

csstyle is a modern approach for crafting beautifully maintainable stylesheets and makes your project’s styling refreshingly consistent! The csstyle method is implemented using a set of SASS mixins that make your CSS readable and semantic, generate your selectors for you, and automatically handle things like specificity and nesting. To get started just import the csstyle…

AMCSS, Attribute Modules for CSS

Codes

Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS. It’s not a framework or a library, it’s a style that better describes…