HackerThemes / spur-template

A Bootstrap Admin Template
https://hackerthemes.com/bootstrap-templates/spur
MIT License
359 stars 72 forks source link

Using more (ideally Bootstrap) variables for easier cusstomization #9

Open Amunak opened 5 years ago

Amunak commented 5 years ago

Since you are already dependent on Bootstrap and their styles and variables, why aren't you using them more? There are many unnecessarily "hard-coded" values in your theme.

There is no need to "invent" stuff like spacing/padding for elements like toolbar items, when you have Bootstrap's $spacers and can just do something like padding: map_get($spacers, 1), etc.

The same could be said even about .dash-nav's min-width property, .spur-logo spacing and font sizes, etc.

Imagine that I have heavily customized _variables.scss to fit better with my idea; if you have everything hardcoded I have to re-define all those properties. You have a full power of the preprocessor, use it, please!

The ideal fix would be to define all those values in your theme's _variables.scss, and where it makes sense use Bootstrap's variables as defaults. That way it'll "automagically" fit with any customization of Bootstrap's initial variables, but it will also allow easy customization of just the theme's styles without necessarily changing Bootstrap's values.

Oh and even if you can't use a Bootstrap variable directly, you can always derive from them: let's say that you want .spur-logo be of a size that fits nicely with the user-chosen Bootstrap variables, but neither $font-size-base nor $font-size-lg work for you (one is too small - obviously, and the other is too large). Well you can just do what Bootstrap does, define your own font size like this: $font-size-logo: $font-size-base * 1.20 !default;. And this could (and should!) be done with pretty much every value that's currently hardcoded.


As a side note, using variables also helps "explain" why you've chosen some values as they are. For example, why does .dash-nav-item i have a width of 36px and font-size of 19px? It has probably something to do with the icon sizing within the nav item being dependent on the font size of the nav items, but I don't really know. And if I do change the font size of nav items, is the icon going to be sized wrong? Possibly. Will I not even notice that I need to also change the icon size? Most likely.

Providing variables for all that would fix this guessing and also allow for easy customization.