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…

PerfTool: Display Performance Statistics

Tools

Collect various information about your website and displays it in an easy-to-digest manner on the reports page. This is a npm package to display statistics about your web pages, including Google PageSpeed Insights score, resources count, recommendations how to fix performace issues, html errors and many more in one custom web page. This package mainly…

Web Fonts Performance by Bram Stein

Preso/Video

This is the third talk in a set of three talks on Visual Performance delivered on April 1, 2016 at Fronteers Spring Conference in Amsterdam Web fonts are great. They are also be really bad for performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank…

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…

Branding: a 14 style font family

Fonts

Branding is a sans-serif spurless typeface with a medium-large x- height, slightly wider horizontal proportions, straight curves and convex terminals. This font is well suited for logotypes, isotypes, short text, etc. Branding comes in 7 weights, ranging from thin to black, with matching italics and includes a set of 544 characters that supports 128 different…