Build Shit in CSS

  1. Introduction
  2. Blocks, Inlines, and Display
  3. Selectors
  4. Box Model
  5. Floating+Clearing I
  6. Floating+Clearing II
  7. Centering
  8. Positioning
  9. Vertical Centering and Radius
  10. Z-Index
  11. :before and :after
  12. Columns
  13. Image Grids
  14. Say No To Bootstrap
  15. The Baseline
  16. Forms
  17. Tables
  18. Background Image
  19. More Transforms
  20. Other Resources I like

Say No to Bootstrap (Sometimes)

Above, you see several CSS components from Bootstrap, the popular (and highly opinionated) front-end framework.

I bet you can build them on your own.

I bet you don't need Bootstrap at all.

Why?

Some Bootstrap users borrow pieces of it because the tooltip is nice and ready to go. Great.

But others use it as a crutch because they're soft on the front-end. But you're not. This is a piece of cake compared to our last exercise.

You can evaluate front-end tools and take the pieces you need, leave behind what you don't, and not be trapped doing things their way because you don't know how to draw a button.

Buttons are easy.

For Extra Points

I didn't do any hover effects. You could if you want to show off.

Now tell us, what do you really think?

I use Bootstrap's tooltip in production because it's nice and it works. I may even borrow a few idea from their form code some day - they're good at forms.

Their responsive stuff, however, is a tragic mess.

But you're a professional developer. You shouldn't listen to me. You've got an Inspect Element and a Github, you can read the code of any front-end library and evaluate it for your purposes.