[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.
   

   View Slide

2. View Slide

3. View Slide

4. JUMBOTRON
   THINK OUTSIDE THE
   CHOOSING A CSS FRAMEWORK
   
   THAT CONFERENCE
   #thatconference
   
   RACHEL KRAUSE
   @rachelbabiak
   #
   USER EXPERIENCE ENGINEER
   Concurrency, Inc.
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. why?
    

    View Slide

13. View Slide

14. framework
    a standard way of dealing with 

    a common type of problem
    

    View Slide

15. Standardization 

    slows down 

    — or stops — 

    innovation
    

    View Slide

16. “Stinnovardation”
    Standardization + Innovation
    

    View Slide

17. ?
    

    View Slide

18. View Slide

19. collaborative
    design
    

    View Slide

20. benefits
    builds trust amongst the team
    multiple perspectives
    saves time
    

    View Slide

21. entire team participates
    fives minutes to draw 

    six quick sketches
    regroup and discuss
    6 up 1 up
    

    View Slide

22. five minutes to draw one

    layout in more detail
    regroup and discuss
    consolidate and agree
    6 up 1 up
    

    View Slide

23. View Slide

24. View Slide

25. fit the framework
    to the application
    

    View Slide

26. View Slide

27. View Slide

28. 6,757 lines of CSS
    

    View Slide

29. great for
    large-scale, complex 

    applications
    

    View Slide

30. great for
    working with many developers
    familiar with the documentation
    

    View Slide

31. View Slide

32. View Slide

33. great for
    rapid prototyping and
    proof of concepts
    

    View Slide

34. View Slide

35. but…
    customize it to include

    only what you need
    

    View Slide

36. View Slide

37. integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    

    View Slide

38. but…
    have a justification for
    using components
    

    View Slide

39. View Slide

40. but…
    don’t be afraid to add
    your own components
    

    View Slide

41. View Slide

42. View Slide

43. 5,608 lines of CSS
    3,440 lines of CSS
    Complete
    Essential

    (Typography, Buttons, Reveal, Interchange)
    

    View Slide

44. great for
    small to large applications
    that are simple to complex
    

    View Slide

45. great for
    commerce platforms or sites
    that communicate via email
    

    View Slide

46. View Slide

47. View Slide

48. great for
    highly customized designs
    or rapid prototypes
    

    View Slide

49. View Slide

50. but…
    the community is smaller
    than Bootstrap’s
    

    View Slide

51. but…
    the default styles 

    are more basic
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. 418 lines of CSS
    

    View Slide

56. great for
    simple sites and 

    applications
    

    View Slide

57. View Slide

58. View Slide

59. great for
    a lightweight starting
    point with the basics
    

    View Slide

60. but…
    no CSS pre-processors
    built in when downloading
    

    View Slide

61. but…
    media queries focus on
    mobile and desktop only
    

    View Slide

62. View Slide

63. Scratch
    

    View Slide

64. great for
    unique designs that require
    a lot of customization
    

    View Slide

65. great for
    complete control of
    naming conventions
    

    View Slide

66. but…
    cross-browser compatibility
    doesn’t come for free
    

    View Slide

67. but…
    a grid-only option may be
    a great place to start
    

    View Slide

68. View Slide

69. Base
    Burma
    Kube
    Leaf
    Materialize
    Milligram
    Pure.css
    Semantic UI
    UIKit
    Vuetify
    

    View Slide

70. View Slide

71. pick the right tool for the job
    

    View Slide

72. we reach for what’s most comfortable
    

    View Slide

73. we reach for what’s most comfortable
    — challenge this mindset —
    

    View Slide

74. standardization innovation
    

    View Slide

75. “Stinnovardation”
    

    View Slide

76. Thank you!
    speakerdeck.com/rachelkrau
    @rachelbabiak
    #thatconference
    

    View Slide

77. View Slide

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
    

    View Slide