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…

Front-End Developer Handbook

Resources

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. It is specifically written with the intention of being a professional resource for potential and currently practicing…

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…

sanitize.css: render elements consistently

Codes

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

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…