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

30958b9299cfc3e606a1f2b559add92f?s=47 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.

30958b9299cfc3e606a1f2b559add92f?s=128

Rachel Krause

August 08, 2017
Tweet

Transcript

  1. JUMBOTRON THINK OUTSIDE THE CHOOSING A CSS FRAMEWORK  THAT

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

    CONFERENCE #thatconference  RACHEL KRAUSE @rachelbabiak # USER EXPERIENCE ENGINEER Concurrency, Inc.
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. why?

  13. None
  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. ?

  18. None
  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
  23. None
  24. None
  25. fit the framework to the application

  26. None
  27. None
  28. 6,757 lines of CSS

  29. great for large-scale, complex 
 applications

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

  31. None
  32. None
  33. great for rapid prototyping and proof of concepts

  34. None
  35. but… customize it to include
 only what you need

  36. None
  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

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

  41. None
  42. None
  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

  46. None
  47. None
  48. great for highly customized designs or rapid prototypes

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

  51. but… the default styles 
 are more basic

  52. None
  53. None
  54. None
  55. 418 lines of CSS

  56. great for simple sites and 
 applications

  57. None
  58. None
  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

  62. None
  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
  68. None
  69. Base Burma Kube Leaf Materialize Milligram Pure.css Semantic UI UIKit

    Vuetify
  70. None
  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

  77. None
  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