Bootstrap is an amazing library for web developers. It has almost every element most developers need, pre-defined in ways that are easy to use, and truly attractive. No messing with margins, padding, pixel widths, hexadecimal color codes, custom-designed buttons and menus — you simply write your text, use basic HTML, and with a few custom Bootstrap options in your code, you’re well on your way to a functional, visually appealing site. And there are a lot of custom themes floating around. It’s a great way to build a website with the control and stability of hand-coding, but also the visual appeal of more advanced design tools.
In other words, Bootstrap helps you make hand-coded websites, without them looking hand-coded.
The problem is that many of the themes don’t come with everything you need! For a seasoned designer/developer, that’s not a problem. But for students like mine, it can be a big problem. So I built something to try and help.
The backstory
Lots of students want (or need) to learn HTML, CSS, and maybe a little JavaScript, so they can get under the hood and make their websites really stand out. But if you’ve hand-coded a website from scratch, you know how long it can take to get your coding skills to the point where you can make it look the way you like. And that’s assuming you have training in design (or at least a good eye for it).
I had one such student in my office last week. She’d done WordPress before, and wanted to try something different for her domain project in my Digital Storytelling class. After wrestling for a few weeks with Known, she decided she wanted to just learn some HTML. Even if it wasn’t the world’s greatest website in the end, she’d have learned a new skill. And she already knew WordPress, anyway.
I suggested she use Bootstrap to frame her domain project. After all, once she picked her theme and started the site, she’d be doing the same HTML work, and I could help her get it all organized…
90 minutes later, we finally had enough of the dependencies collected that she could start putting some content on her site! I thought, there’s got to be a better way. (And after lots of Googling around, it seems that there really isn’t.)
So before I forgot what we did, I picked a theme, collected all those files, fonts, and folders on my own computer, and built a small sample website. Then I zipped it up, so anyone could download it, extract it into their shared hosting environment, and start building their own site.
The result is Bootstrap Starter Kit.
The details
Bootstrap Starter Kit is based on the United theme for Bootstrap (inspired by Ubuntu Linux’s “Unity” desktop theme), made by Thomas Park and licensed under the MIT License (open-source). United is one of many themes available from Bootswatch — a place to find some great stuff, but where clicking “download” doesn’t give you all you need. (In fact, even clicking the drop-down menu and downloading all the files listed doesn’t give you everything you need.)
If you go to the examples page, you’ll see all the things the Bootstrap theme can do out-of-the-box. And that examples page is included in the ZIP file, so you can copy and paste the code, tweak it to your heart’s content, and learn how it all works in the process.
I’m hoping this starter kit will be useful for people, especially students learning HTML and CSS. If you use it — or if you find it’s still missing something! — let me know. And if there’s a lot of demand, I’ll look to coding some other themes and posting them as well.
Happy building!
Featured image by Jonatan Pie on Unsplash