Posts tagged with 'bootstrap'
Rachel Andrew is a member of the CSS Working Group and is working with CSS Grids.
Show Notes:
- Rachel Andrew's site
- Book: The New CSS Layout
- Flexbox MDN documentation
- Bootstrap
- CSS Working Group drafts on Github: CSS grid level 1, CSS grid level 2
- Grid by Example
- Jen Simmons (of Mozilla) CSS Grid labs
- Rachel Andrew writing on Smashing Magazine
- Newsletter: CSS Layout.news
- Rachel Andrew's Wikipedia page
Want to be on the next episode? You can! All you need is the willingness to talk about something technical.
Music is by Joe Ferg, check out more music on JoeFerg.com!
When I open-sourced my C#-rewrite of Ledger recently, I realized that it was quite ugly. Since I look at it nearly every day, I figured I'd better make it look decent (previously I was using a CakePHP default theme, which isn't exactly a treat, but wasn't hard to look at either).
Two things I'm doing with Bootstrap that maybe not everyone agrees with or wants to do. But they make things easier for me:
- I'm using a CDN to host Bootstrap files instead of hosting them myself.
- I'm not using LESS, just plain Bootstrap CSS
For more customized or more critical projects, I could be convinced to do otherwise.
Getting started with Bootstrap is pretty easy, just add a JavaScript and a couple CSS references and away you go:
From there, you can start by looking at the basic Bootstrap template, which is far from intimidating.
Next, there are a bunch of examples, one of which you might want to use a starting point. For Ledger, I simply used the Starter template, and built from there.
The next step would be to check out the CSS classes that are available: what they do, and how they work. Then, you can drill down even farther and look at some of the very useful components that are available.
You can customize styles, and for more elaborate projects than Ledger or this blog, you will certainly need to. But I found nearly everything that I needed within the CSS classes and components. As a nice bonus, your pages will become responsive! If you are reading this post on an Android phone, for instance, note that it takes up the full width of the screen. On my desktop screen, it only takes up maybe 70% of the screen, with the sidebar column with "About Me" and such takes up the remaining 30%. Also, the navbar automatically shrinks down into a "hamburger" menu.
