Flexbox Patterns, examples and source code

HTML/CSS

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

HTML/CSS

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…

Browser Diet (Performance)

HTML/CSS

It’s a no-brainer that performance matters! So why do we keep making slow sites that lead to a bad user experience? This is a community-driven practical guide that will show you how to make websites faster. The guide informally titled “Browser Diet” can be found on GitHub for free. It can actually be installed locally…

Basscss: Low-level CSS toolkit

HTML/CSS

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…

Hover.css v2, CSS3 powered hover effects

HTML/CSS

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can…

Front-End Development Guidelines

HTML/CSS

This document details the guidelines and standards adhered to by the Creative Technology department at TMW, and all web applications built should take into consideration. It is an evolving document and should be reviewed as and when required to keep up with changes in technology and best practice. These guidelines have been compiled looking at various…

Solved by Flexbox: Cleaner, hack-free CSS

HTML/CSS

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

HTML/CSS

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…