[That Conference 2017] Think Outside the Jumbotron: Choosing a CSS Framework

Bootstrap is considered the go-to front-end CSS framework for many companies when developing applications. While CSS frameworks are great for prototyping or internal applications, they may be extending your development time in the long run. They’re also contributing to the cookie-cutter design of every website on the internet. It’s time to change our approach and create a more interesting web while maximizing the value of CSS frameworks.

There are many options out there to make your front-end development easier. In this session, you’ll learn how to decide which CSS framework is right for your application. We’ll compare Bootstrap to other well-known frameworks like Foundation and Skeleton, or even starting from scratch. You’ll see how using a CSS framework as a starting point can help your development process and set your application apart from the sea of jumbotrons and carousels.

Transcript

1. JUMBOTRON THINK OUTSIDE THE CHOOSING A CSS FRAMEWORK  THAT CONFERENCE #thatconference  RACHEL KRAUSE @rachelbabiak # USER EXPERIENCE ENGINEER Concurrency, Inc.
4. JUMBOTRON THINK OUTSIDE THE CHOOSING A CSS FRAMEWORK  THAT CONFERENCE #thatconference  RACHEL KRAUSE @rachelbabiak # USER EXPERIENCE ENGINEER Concurrency, Inc.
12. why?
14. framework a standard way of dealing with 
 a common type of problem
15. Standardization 
 slows down 
 — or stops — 
 innovation
16. “Stinnovardation” Standardization + Innovation
17. ?
19. collaborative design
20. benefits builds trust amongst the team multiple perspectives saves time
21. entire team participates fives minutes to draw 
 six quick sketches regroup and discuss 6 up 1 up
22. five minutes to draw one
 layout in more detail regroup and discuss consolidate and agree 6 up 1 up
25. fit the framework to the application
28. 6,757 lines of CSS
29. great for large-scale, complex 
 applications
30. great for working with many developers familiar with the documentation
33. great for rapid prototyping and proof of concepts
35. but… customize it to include
 only what you need
37. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
38. but… have a justification for using components
40. but… don’t be afraid to add your own components
43. 5,608 lines of CSS 3,440 lines of CSS Complete Essential
 (Typography, Buttons, Reveal, Interchange)
44. great for small to large applications that are simple to complex
45. great for commerce platforms or sites that communicate via email
48. great for highly customized designs or rapid prototypes
50. but… the community is smaller than Bootstrap’s
51. but… the default styles 
 are more basic
55. 418 lines of CSS
56. great for simple sites and 
 applications
59. great for a lightweight starting point with the basics
60. but… no CSS pre-processors built in when downloading
61. but… media queries focus on mobile and desktop only
63. Scratch
64. great for unique designs that require a lot of customization
65. great for complete control of naming conventions
66. but… cross-browser compatibility doesn’t come for free
67. but… a grid-only option may be a great place to start
69. Base Burma Kube Leaf Materialize Milligram Pure.css Semantic UI UIKit Vuetify
71. pick the right tool for the job
72. we reach for what’s most comfortable
73. we reach for what’s most comfortable — challenge this mindset —
74. standardization innovation
75. “Stinnovardation”
76. Thank you! speakerdeck.com/rachelkrau @rachelbabiak #thatconference
78. further reading Bootstrap 4
 https:/ /v4-alpha.getbootstrap.com/ Foundation
 http:/ /foundation.zurb.com/ Skeleton
 http:/ /getskeleton.com/ The Low Down on Frameworks
 http:/ /selfteach.me/frameworks-bootstrap-foundation-susy/ Lean UX
 https:/ /www.amazon.com/Lean-UX-Applying-Principles-Experience/dp/1449311652