Scalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture
with Bootstrap 3 + Atomic CSS
Let’s do some intros
I’m dying to meet you, kindred spirits :)
Product Designer, Full-Stack
Head of Product at Spaceship.
@haydenbleasel on the internet.
Nice to meet you.
How many of you know what Bootstrap is?
How many of you know what Atomic CSS is?
• Web development on the client’s side. Everything
the user sees, clicks, smiles at or gets aggravated
by. Kinda extremely important when making a site.
• Used to just refer to HTML, CSS and a little bit of JS
to building the entirety of your website (database
infrastructure and everything) on the user’s
• But that’s for a whole other discussion…
What is Bootstrap and why do I care?
Kind of a big question and a bit of a history lesson.
So what is Bootstrap?
• Bootstrap was a hack-week project between two homies at Twitter
that spawned a community of 9 maintainers and 839 contributors.
• It was the idea that we could create a “skeleton framework” that
every website on the web used. They’re on 3.4% right now
(approximately 12,773,795 websites).
• It’s the most starred repo on Github.
• 15,801 commits, 49,318 forks, 107,745 stars.
• Pretty impressive for a slab of CSS and JS.
• Bootstrap 4 is in alpha now.
WTF is Bootstrap tho?
include in your website with two lines of code.
• You copy markup (HTML) from their documentation and it
renders some pretty boilerplate elements.
• It styles elements like forms, buttons and tables.
• It adds CSS components like navbars, badges, labels and
• It adds JS components like tooltips, modals, dropdowns
What does Bootstrap contain?
• Default styling for HTML elements
• A whole heap of CSS & JS components
• A flexible 12-column grid system
• Bugs, occasionally
Installing is pretty easy…
# Install with BootstrapCDN:
# Install with Bower:
bower install bootstrap —save
# Install with NPM:
npm install bootstrap —save
# Install with NPM:
yarn add bootstrap
# Or just download the files from the website like a pleb
Markup is also pretty easy…
<button type=“button" class=“btn btn-default”>
This is a button
The point is, it’d be a lot
more work to build these
things from scratch.
Just because you’re using
Bootstrap, doesn’t mean it
has to look like Twitter.
The CSS overwrites are purely up to you. Bootstrap is
meant as a boilerplate, not a solution.
Why do we use Bootstrap?
• Startups use Bootstrap to build their entire MVP.
• Small companies build on Bootstrap to create an
intuitive user experience with backbone.
• Big companies use it because their dev team sucks
and they don’t understand how to build custom
interfaces at scale.
• We’re currently moving off it at Spaceship.
I thought you said it was good!
• It is good. It’s good for you, for startups, for MVPs.
• When you scale though, you need to focus on things
like performance, minification, product design etc.
• Only using 500 of the 10,000 lines of Bootstrap in
your production app isn’t efficient.
• Many growing startups like Spaceship have to move
off Bootstrap eventually. It’s like a kickstarter.
Are there any alternatives?
• There’s Foundation by Zurb. 25,000 stars, probably
the biggest Bootstrap rival.
• There’s also Bulma. It’s designed to rival Bootstrap
4, simpler but less thought-out. Based on flexbox
which is great.
That’s enough about Bootstrap
In lieu of a good segue to “how to write good CSS”. Don’t
worry, I’ll show the connection when we get near the end.
How should I write my CSS?
• This is a huge discussion that’s still going on the internet.
• The TL;DR is that we need a way to write stylesheets
that are incredibly modular like Bootstrap, where you
can take any component and smash it together with
another and it’ll look good.
• Easier said than done - you have to take every use case
into account AND THEN THERE’S IE and this is what
being a real front-end developer is all about — dealing
with other people’s shit code.
• The idea that we should write components that
“grow in size”. Atomic refers to a series of sizes:
atoms, molecules, organisms, etc.
• Aggregated atoms create molecules, aggregated
molecules create organisms, etc.
• This is much easier to explain with images TBH:
Atomic CSS: Atoms
Buttons and inputs. Can’t get much easier than this.
Button Button Button Button Button
Atomic CSS: Molecules
We can combine these things to make a form.
Atomic CSS: Organisms
We can combine forms to
create a Settings Page.
+38 (066) 875 67 97
2 ﬁelds selected Mark as OK Mark as Violation Mark all as OK
Select ﬁelds to update status
Working to Current time
Bootstrap + Atomic CSS
• Everyone’s going to have their own opinion on how
to architect CSS. I find the Atomic structure works
for me from a speed and scalability perspective.
• Now let’s start overwriting Boostrap using the
“atomic-overwrite method”. Basically just set up
files that reflect Bootstrap’s different components
and build on it.
• Let’s see what it might look like…
You should use LESS or Sass
• Don’t want to get into it in this talk, but you should
absolutely consider LESS when writing CSS
• It’s a preprocessor. You write fancy CSS (LESS) and
it converts it to CSS when you compile it.
• It will significantly cut down your code and make
writing modules and overwrites ridiculously easy.
• Here’s a quick example:
One last thing: Linting CSS
• My absolute favourite part of this topic on code quality.
Linters are absolutely amazing and indispensable. They
check your code as you’re writing it. They literally enforce
your style on everyone else.
choose from: JSLint, ESLint, JSHint, etc. All of these can be
configured, but the default options and extensibility varies.
• Get them on most text editors - Atom, Brackets, Sublime…
• For CSS, we can use CSSLint.
Some things to check out
Interested in Spaceship?
Skip the waitlist: