As many of you will know, I've been learning to use bootstrap and am creating a dummy project to learn html better as well as these invaluable framework skills. What I have noticed so far, particularly as I have now completed the homepage and am moving onto a linked page, is that there seems to be a lot more manual repetition in bootstrap than in vanilla CSS.
It is of course entirely possible that I have missed the point here, or that my creations have been too basic to notice a difference...
Let's use my creation of a newpage.html as an example. When you create a page, you would usually have either a style.css sheet to link it to or a section of <style></style>
at the top, in the <head>
as I have here:
<style>
h1,
h2 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h1 {
background-color: #326273;
color: rgb(255, 253, 253);
}
h2 {
background-color: #5C9EAD;
color: rgb(0, 0, 0);
}
</style>
Of course, you'd expect there to be more CSS than that - but as I am using bootstrap, I've used classes. Also, the page is quite simple. Normally you'd copy that little style section, or link your style sheet, into the top of each page you create. Consistency throughout your website is key!
Usually, I'd have defined the margins and padding of these, but I've used bootstrap classes to do that:
<h1 class="rounded py-4">Node CMS</h1>
<h2 class="rounded py-4">Who are the developers?</h2>
This means, that instead of setting the padding (top and bottom) in the CSS and typing it once, I need to put in that class every time I create a new <h1>
element in order to maintain consistency...
It's not really a hardship, but it seems to me that the time you need to put into CSS in the first place isn't really saved by bootstrap?
Am I missing something here or is this just what we need to do for the convenience of frameworks...?
Update
So it seems that I'm not missing anything - and this is just the way it is. That's fine, I'm still enjoying learning bootstrap as a framework, and it's good to know that it does just add that little bit more customisation opportunity if you need it. For example you may not want every <p>
to look the same, and rather than fiddle about with !important
in CSS, you can manipulate this with bootstrap.
I suppose the little bit of extra work needed does have it's benefits!