The Power of Bootstrap

I can not remember the first time I was introduced to bootstrap, but it must have been at least 2+ years ago. Even after all that time, I’m still in awe of how well the CSS framework simply… works. I decided to take this course by Brad Hussey as a refresher to see if I was missing anything in my HTML to WordPress workflow.

Hell I built this blog in 4 hours from this static Bootstrap template! Shhhhh. But almost immediately I picked up some incredibly useful code templates, workflow improvements, and sweet bootstrap techniques. Love it when you pay $10 for a Udemy course and find value almost immediately.

The other benefit is Brad is the BEST Udemy instructor I have ever had. He is knowledgeable, engaging, and doesn’t take himself too seriously even though he has probably had tremendous success.

Sections 1 – 4

A lot of this content was boring review. Though I made a deal with myself to watch everything all the way through. If Brad wasn’t such a easy to follow guy I probably would have skipped it.

Sections 5 – 8

Wow. These sections contained some pretty great coding tactics. I had to make a big ass list (see below) to capture everything here were a few of my favorites.

social.badge.twitter

A CSS class that checks for ALL classes in the element in order to style. #MindBlown

Emmet

Hotkeys + Dynamic Code = Emmet. This will increase my coding speed at least 3x

Full List of Awesome Code Learnings:

  1. social.badge.twitter – checks for ALL classes to exist in order to style. Mind blown.
  2. img { max-width: 100% } – amazingly simple but solved a huge pain
  3. Use Color References in your CSS file as a comment!
  4. Webkit-font-smooth: antialiased and text-rendering: optimizelegibility
  5. Vertically align any content
    1. Parent Div – Display: Table
    2. Child Div (To vertically Align) – Display: Table Cell ; vertical-align: middle;
  6. Coda 2 + “Emmet” allows for code short cuts to auto fill speeding up your coding
  7. Square images to circles – border-radius: 50%;
  8. Using Comments on Columns and Rows within Bootstrap
  9. Button class btn-block – will span the full width of the parent element
  10. Bottom border on a SPAN – #signup h2 strong { border-bottom: solid 2px #dd5638; }
  11. Removes the blue outline default for links/buttons button.btn:focus { outline: none !important; }
  12. HTML Encoding
    1. — = “-“
    2. » = “>>”
  13. .row + .row – styles class of rows in a row
  14. #featurette iframe – can style height of embedded videos!
  15. HTML 5 Tags : <main></main>, <article></article>, <time></time>, <aside></aside> (Sidebar Wrapper)
  16. placeholder=”” <– Placeholder text class inside of a search bar or form field

most-interesting-man

Co-Founder of #TeamRB. Passionate about Salesforce, Wordpress, and Pardot. Love of Burritos, Bourbon, Bacon, Tech and the Arsenal!