hackerthemes / spur-template

A Bootstrap Admin Template

Spur - A Bootstrap Admin Template

Spur is a simple dashboard template (aka admin template) based on the latest version of Bootstrap. It features layouts and components intended to make it easier for developers to build a pretty web application.

Live Demo

A live demo can be found here: https://hackerthemes.com/spur/demo/html/

Download and instructions

The entire template with all necessary assets is found in the dist/ folder. Please find the download and detailed instructions at https://hackerthemes.com/bootstrap-templates/spur/.

You can also install using npm:

npm install spur-template

Creators

Alexander Rechsteiner

• https://hackerthemes.com
• https://twitter.com/arechsteiner
• https://github.com/arechsteiner

Bootstrap

• https://github.com/twbs/bootstrap/

Copyright and license

Code and documentation copyright 2018 HackerThemes Code released under the MIT License.

Changelog

1.1.0: Upgrade to Bootstrap 4.3.1

1.0.0: Initial Release

spur-template's Issues

Using more (ideally Bootstrap) variables for easier cusstomization

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.

Firefox scollbar goes nuts when Chart.js is present

On pages with Chart.js, the scroll bar on Firefox/Win10 can go into a wild frenzy if the viewport is exaclty the right height, i.e. at the frontier of having a vertical scroll bar.

https://www.reddit.com/r/webdev/comments/aos736/i_created_an_open_source_admin_template_with/eg3hwsz/

Incorrect entrypoint in package.json

Should probably be your main js file

Spur classes docs

Is there docs about spur custom classes and their usage? If not, do you plan to create them at some point?

Border-radius override

You either shouldn't override the $border-radius variable (as I don't think it's really necessary; the theme looks just fine with it), or you should also override $border-radius-lg and $border-radius-sm. Otherwise there's a pretty ugly inconsistency within the theme.

how to convert it for PHP MVC

Bootstrap 5.1.3 Card Dropdown

I upgrade this project to Bootstrap 5.1.3 and the drop down menu for cards isn't working, I also had to add text-decoration-none to all the navigation or I would get an underline.

Weird scroll behavior when card dropdown is open on front page

Once the card dropdown menu is open on the chart.js card on the frontpage, scrolling is messed up on mobile.

https://www.reddit.com/r/webdev/comments/aos736/i_created_an_open_source_admin_template_with/eg3e0h4/

Information: I have converted this theme into Angular 8+

First of all, let me thanks to @arechsteiner for this awesome theme as well to the community, I don't know if this would help anybody but I have converted this theme into Angular. So there you go:

https://github.com/ruslanguns/Spur-for-Angular

separate bootstrap.css and spur.css

Mixing and editing bootstrap is bad practice, it’s better that they are separated and the styles overlap the original

How to sort in table