CSS masonry with flexbox, :nth-child(), and order

Codes

Flexbox has no easy way of rendering items with a column layout while using a row order, but we can build a masonry layout with CSS only—no JavaScript needed—by using :nth-child() and the order property. This CSS-only way of creating a masonry (or mosaic) layout is surely not as robust, flexible, and foolproof as a JavaScript implementation (like Masonry) but if you don’t want…

Open Color – An open-source color scheme

Codes

Open Color is an open-source scheme optimized for UI like Font, Background, Border, etc. Goals: All colors shall have adequate use Provide general color for UI design All colors will be beautiful in itself and harmonious At the same brightness level, the perceived brightness will be constant Note: All the color is tested on deuteranopia…

CSS Reference – A visual Guide to CSS

Codes

Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. The content of this project itself is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

You Might Not Need JavaScript

Codes

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy. Una Kravets (@una) took a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not…

wysiwyg.css (collection of styles)

Codes

Style your TinyMCE or Markdown generated content with a single CSS class, wysiwyg.css file is a simple collection of styles targeted at HTML elements generated from a WYSIWYG editor (like TinyMCE) or Markdown. Its purpose are: readability: both the spacing and colors are visually balanced simplicity: you only need a single class to style all…

Bulma, a CSS framework based on Flexbox

Codes

Bulma is a CSS framework, as such, the sole output is a single CSS file. You can either use that file, “out of the box”, or download the Sass source files to customize the variables. There is no JavaScript included, so you can use your own JS implementation. Therefore Bulma can be considered “environment agnostic”:…

Usage examples for CSS Grid Layout

Codes

The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications. This site is growing collection of examples, with the aim of helping…

WebCodeTools: HTML/CSS Code Generators

Codes

Web Code Tools is a powerhouse of tools for making HTML/CSS easy. It includes many amazing tools for CSS3, HTML5, Microdata, Meta Tags, Facebook Opengraph, Twitter Card etc. CSS 3 generator includes animation, background gradients, border radius, box shadow, layout, transitions and many more. Similarly HTML 5 generators includes wide variety of elements, attributes etc. The website…

Frend: accessible, modern front-end components

Codes

Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies. The purpose of Frend is to offer ready-to-use components for projects. These…