A starting point for frontend best practices.
JavaScript CSS CoffeeScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
boilerplate
LICENSE
README.md

README.md

100YRS-frontend-styleguide

A starting point for frontend best practices.

Purpose

The goal of this repository is to help make sense of the frontend development processes at A Hundred Years. This Styleguide is aimed at addressing the things that will come up during the course of every frontend project we do here. Most things are presented as suggestions, hence the term "Styleguide" vs. "Standard", which implies authoritative truth. Truth needs to exist in the specification, the tools we use should be the best possible solution for the problem at hand. Technology advances and so should our processes and tools. Help us make life easier by contributing to this repository and related Wiki pages, but specifcally help us all by writing brilliant, efficient and understandable code.

- 100YRS Team


Technology Stack

CSS

CSS Pre-Processors & Tools

CSS Grid Frameworks

CSS Boilerplate

CSS Polyfills

CSS Columns (spec)

CSS Columns are used to flow a block of inline content (usually text) between multiple columns, newspaper layout style.

.flow-2-col {
  column-count: 2;
  column-gap: 20px;
}
<p class="flow-2-col">
  Lorem ipsum....
</p>

Browser support is pretty wide-spread from IE10 and up. For IE9 support, we can use Columnizer and a bit of additional javascript as a polyfill.

Using a Modernizr build that detects CSS Columns, we can load the Columnizer jQuery plugin:

Modernizr.load({
  test : Modernizr.csscolumns,
  nope : ['jquerycolumnizer.js', 'jquery.csscolumns.js']
});

...and then in jquery.csscolumns.js, we invoke Columnizer on any elements with a specific class (the same class we use to apply the column CSS to modern browsers):

$('.flow-2-col').columnize({
  cssClassPrefix: 'columnizer',
  lastNeverTallest: true,
  width: 340
});

More info on CSS Column support and polyfills

Javascript

Javascript Frameworks & Tools

AngularJS

Templating (HTML)

Other Useful Tools and Further Reading

tbd