100Shapes.com "Lithium"

This project is the "Lithium" release of the 100 Shapes site.

We've built it under an open MIT licence so you can pick it apart and use the ideas in your own projects.

About Us

We're a User experience (UX) & design agency based in London, UK. We specialise in working with broadcasters and media brands like the BBC & ITV.

If you think you can help us build things for these types of organisations, give us a shout.

Questions/Issues

Ping us: @100shapes, email hi@100shapes.com, or make an issue.

Tech

Here's the tech you'll find here:

• Webpack
• Babel + ES6
• AngularJS
• LESSCSS + CardinalCSS
• Docker
• NGINX
• Prerender.io

Webpack

Webpack does all the tooling for the project. See the webpack.config.js file for tips here.

Key points:

• DefinePlugin to set up our API_BASE_URL (an environment variable we pass in on the server)
• noParse set up to save on build time
• HtmlWebpackPlugin to take a base index.html template and wire it up with webpack

Babel + ES6

We were keen to see what all the fuss was about with ES6 so we went slowly and mixed in some of the features we needed. (it's pretty easy to be honest).

AngularJS

The site is an Angular app. We wanted to see how Angular fitted with a content-driven site. This is the result.

LESSCSS + CardinalCSS

CardinalCSS is an incredible library that changed the way we wrote CSS. Using micro-styles, we found there was no longer a need to make lots of css modules files and concatenate them all together. See the CSS directory and the individual .less files within the directives i.e. ohs-contact.less.

Docker + NGINX

We leverage docker to run the app using a base image from Phusion – Passenger.

Prerender.io

SEO was kind of a big thing. Prerender.io made it no big thing.

"Lithium"?

Instead of versioning our projects with numbers, we use the atomic number in the periodic table – it's just a thing we do.