hackerthemes / spur-template Goto Github PK
View Code? Open in Web Editor NEWA Bootstrap Admin Template
Home Page: https://hackerthemes.com/bootstrap-templates/spur
License: MIT License
A Bootstrap Admin Template
Home Page: https://hackerthemes.com/bootstrap-templates/spur
License: MIT License
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.
Mixing and editing bootstrap is bad practice, itβs better that they are separated and the styles overlap the original
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.
Is there docs about spur custom classes and their usage? If not, do you plan to create them at some point?
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.
Should probably be your main js file
Once the card dropdown menu is open on the chart.js card on the frontpage, scrolling is messed up on mobile.
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.