How people build software
!
"
I’m Diana Mounter
@broccolini
Slide 3
Slide 3 text
How people build software
!
Diana Mounter! Come to
Buzzfeed and do a talk!
3
About what?
All the things you know!
Slide 4
Slide 4 text
How people build software
!
"
All the things I know
About building design systems
Slide 5
Slide 5 text
How people build software
!
!
5
!
Slide 6
Slide 6 text
How people build software
!
Write down your
principles
6
1
Slide 7
Slide 7 text
How people build software
!
Yup!
7
You’re gonna do it OOCSS/
functional/atomic/BEM
right?
Slide 8
Slide 8 text
How people build software
! 8
When you actually
see the code
Slide 9
Slide 9 text
How people build software
! 9
Lots of arguments
vibrant discussions
Slide 10
Slide 10 text
How people build software
! 10
After 6 months of learning
the hard way…
Principle led development!
Slide 11
Slide 11 text
How people build software
!
!
11
!
Slide 12
Slide 12 text
How people build software
! 12
IT’S A UNIX SYSTEM
I KNOW THIS!
Slide 13
Slide 13 text
How people build software
!
"
Slide 14
Slide 14 text
How people build software
!
"
Slide 15
Slide 15 text
How people build software
! 15
Slide 16
Slide 16 text
How people build software
!
!
Write down your principles
16
•Styleguide driven design and development
•Obvious and transparent
•Components, Objects, Utilities
•Naming convention
•Property order
Slide 17
Slide 17 text
How people build software
!
Naming things is hard,
but it can be easier
17
2
Slide 18
Slide 18 text
How people build software
! 18
Choose a naming convention
• Show the options in code
• Describe the pros and cons
Slide 19
Slide 19 text
How people build software
! 19
Is it searchable?
• In markup and CSS
Slide 20
Slide 20 text
How people build software
! 20
Easy to understand,
quick to internalize
Slide 21
Slide 21 text
How people build software
! 21
Make a list of all
your classes
.boxed-group
.simple-box
.box-group
.box-simple
Slide 22
Slide 22 text
How people build software
!
You can keep things
(mostly) up-to-date
22
3
Slide 23
Slide 23 text
How people build software
! 23
Use routine events to
make updates
• Onboarding
• Training
Slide 24
Slide 24 text
How people build software
! 24
Make it part of your code
review checklist
• Did you update the docs?
Slide 25
Slide 25 text
How people build software
!
Make it easy for
everyone to contribute
to documentation
25
4
Slide 26
Slide 26 text
How people build software
! 26
Slide 27
Slide 27 text
How people build software
!
Let people play with
the lego
27
5
Slide 28
Slide 28 text
How people build software
!
Let people play with
the lego
28
1
Slide 29
Slide 29 text
How people build software
! 29
Cap: Check out basscss. It’s a class library that lets you
build new UI elements quickly.
Sam: I hate it!
https://medium.com/buzzfeed-design/how-i-learned-to-stop-
worrying-and-love-the-atomic-class-98d6ccc45781#.ootp6rbxh
Slide 30
Slide 30 text
How people build software
! 30
Give designers a
prototyping environment
that is easy to setup and
uses production CSS.
Slide 31
Slide 31 text
How people build software
! 31
Styleguides are a gateway
drug for empowering
designers to code.
Slide 32
Slide 32 text
How people build software
!
Look forward,
don’t look back
32
6
Slide 33
Slide 33 text
How people build software
! 33
Slide 34
Slide 34 text
How people build software
! 34
Not everything needs to be
changed all at once.
Slide 35
Slide 35 text
How people build software
!
Just do it
(but choose your ships!)
35
7