$30 off During Our Annual Pro Sale. View Details »

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

Rachel Krause
August 08, 2017

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

Rachel Krause

August 08, 2017
Tweet

More Decks by Rachel Krause

Other Decks in Design

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