Helping professionals and companies to
collect and collaborate on information.
Slide 4
Slide 4 text
Building.
Slide 5
Slide 5 text
How do we use our
resources well?
Slide 6
Slide 6 text
Twitter Bootstrap:
Started about 1,5 years ago by
@mdo & @fat from Twitter
28,000 watchers & 2000 forks
on Github
Slide 7
Slide 7 text
Why Bootstrap?
Slide 8
Slide 8 text
Design Engineering
Frontend
Slide 9
Slide 9 text
Pairing designers
with developers
Slide 10
Slide 10 text
Bootstrap is a set of
common components.
=
A working
styleguide
Slide 11
Slide 11 text
It helps you to
communicate
Slide 12
Slide 12 text
It saves
time
Slide 13
Slide 13 text
How?
Slide 14
Slide 14 text
Start with Bootstrap.
Don’t nish with it.
Slide 15
Slide 15 text
“Seeing a default Bootstrap “theme” site
makes me leave it right away because I
feel the person doesn’t care about what
they are doing”
- Paul Scrivens
Slide 16
Slide 16 text
Don’t use it as a design
for user facing things
Slide 17
Slide 17 text
It’s your foundation.
Not your aesthetics.
Slide 18
Slide 18 text
Don’t destroy your
effort, brand and
user loyalty
Slide 19
Slide 19 text
So how?
1) Design your app
2) Customize it
Slide 20
Slide 20 text
1. Include it
Slide 21
Slide 21 text
1) With LESS
2) Or without
(just download the .css)
Slide 22
Slide 22 text
1) With LESS
+ Several variables, mixins, snippets
(colors, typography, grid, alignment)
+ Normal LESS goodness
Slide 23
Slide 23 text
2) Without LESS
+ Downloading the .css and
including it takes 2 minutes
Customize by overwriting the styles
Slide 24
Slide 24 text
1. Basics:
12-grid & Base CSS
+ Responsive
Slide 25
Slide 25 text
New Kippt landing page:
1:
2: Grab/write the markup
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
New Kippt landing page:
1:
2: Grab/write the markup
3:
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
With Bootstrap:
Took half-day
~10 major changes
lots of tweaking
Slide 30
Slide 30 text
Without Bootstrap:
~1-3 days
lots major changes
even more of tweaking
Slide 31
Slide 31 text
Time saved:
+16 hours!
Slide 32
Slide 32 text
2. Base CSS:
Icons & Buttons
Slide 33
Slide 33 text
Comes with icons
Slide 34
Slide 34 text
.icon-search {
background:url(icons.png) 0 40px no-repeat;
}
If you can, use your own.
You can still bene t from the convention:
Slide 35
Slide 35 text
Time saved:
+1 hour!
Slide 36
Slide 36 text
3. Components
Navbar & Dropdowns
Slide 37
Slide 37 text
Everyone needs
their Navbars.
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
“Simple” structure,
xed or static
...
Slide 40
Slide 40 text
Also
Responsive
Slide 41
Slide 41 text
Time saved:
+3 hours!
Slide 42
Slide 42 text
“We need a dropdown”
Everyone and their mother has a
dropdown implementation.
Which one should I use?
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
After 30 minutes. Done.
Slide 45
Slide 45 text
Time saved:
+4 hours!
Slide 46
Slide 46 text
4. JS Plugins
Modals & Tooltips
Slide 47
Slide 47 text
To wrap up
Slide 48
Slide 48 text
Not so good for:
+ Yet another framework
+ Use it as a design or as is
Slide 49
Slide 49 text
Good for:
Slide 50
Slide 50 text
1) Styleguide for your team
components, naming convetions
Slide 51
Slide 51 text
2) Decent styles to begin
with, and to modify
Slide 52
Slide 52 text
2) Making development &
prototyping faster
Slide 53
Slide 53 text
Time saved total:
+27 hours!
Slide 54
Slide 54 text
When building something
new, you always have
risks and waste
Slide 55
Slide 55 text
Pick you battles.
Innovate on things that
actually matter.