Twitter Bootstrap comes with its source code in the form of Less files. So if I want to change the default size of the top navbar for instance, then I'd have to (as far as I understand) do this in the theme.less.
But what if I'd like to change some default colors as well. These are defined in the variables.less file. Should I alter that file? Or should I (in the form of good practice) override them (if that's even possible) in the theme.less file as well?
I'd like to know the good approach for this, because I'd like to create my own Bootstrap theme.
What we do at our team (and best practice) is to include a custom variables files at the bottom of all bootstap's imports. This way, all variable you declared will overwrite bootstrap's default and you will not being overwriting bootstrap, what will give you the possibility of update without conflicts.
Related
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
Case 1
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
#import 'theme1';
#import 'base';
#import 'other';
theme2.sass:
#import 'theme2';
#import 'base';
#import 'other';
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
Case 2
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
You have 2 options I think.
Option 1) Recompile the styles whenever a change is made by running a command serverside to generate a new CSS file for the user. This will be potentially very resource hungry and probably not recommended.
Option 2) Take the variables you want to be accessible, find where they are mentioned in the bootstrap source and either generate a file or just inline these styles after the stylesheet is included in the template.
So for your example here, depending what language you're coding in, or templating (this is a twig example) you're using, you could inline the following in the head of your template:
<style>
.navbar {
background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>
It's tough to tell you exactly how to do this without knowing what frameworks/languages/infrastructure you're using.
If you were using Twig & PHP for example, you could send a user_theme object to the template, and have an include file which contains all the styles that need modifying with default values as above.
How can I add further col-* classes.
I want to add col-xl-* but it's very time consuming adding every class manually.
If i use http://getbootstrap.com/customize/ I just can edit the lg but i will loose a screen width so I want to add another one. Is there a easy way to do that?
Regards
The "easiest" way to do it is use the .LESS source files. Besides that no.
The files you should look at are: grid.less, variables.less and mixins.less. I wouldn't edit those actual files though, because of updates to Bootstrap. I would start your own custom.less file and then #import that into the bootstrap.less file. That way it will generate your CSS with the rest of the bootstrap CSS.
This article on SmashingMagazine is an excellent example and where I got the idea from: Customizing Bootstrap
For some reason though, the article is currently not there or broken. I reported this to them, so hopefully it comes back soon.
I use less for theming. I have a couple of themes of different colors.What i do now is comment other variables definitions , leaving out variables for one theme and compile less to css. I generate the css for all others themes repeating this for other themes. Is there any other way where I could generate all theme css at once ?
I am even ready to change the structure of my less files.
You can always divide your stylesheets into two -- variables and then the theme. Say variables.less and theme.less
If you make the general theming variables abstract enough (say #primary and #secondary for colors), you can write as many variable.less sheets you would like, and decide which to show dynamically through jquery. Then the theme.less will stay constant, and the variables which populate it will be placed dynamically in there by how you decide to do so using jQuery.
Yes,
Based on that theme name you have to create the css file like theme1.css,theme2.css .
So based on that you check with which theme you currently running and based on that theme.css you can load.
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. #purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others.
Here's what comes in the bootstrap.zip the site spits out:
css
bootstrap.css
bootstrap.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
...and that's it.
So, no colors anywhere in these files as far as I can tell. No LESS files included in the download. Am I doing something wrong? Is the site doing something wrong? Am I just not seeing something that is in fact there? To the best of my diffing abilities, the downloads seem identical regardless of the customization options I choose...
And, pending whose messing up here, what would be the alternative best way for me to customize a color palette for my Bootstrap site?
You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like #purpleLight you mentioned.
If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your #purpleLight.
I'm creating a small WordPress theme, which has a separate control panel. This panel has a lot of color and font changes. I had no problem in saving all the data into mysql, but I can't figure out the best way to apply these changes to the design.
What I want to ask, is what is the best, most efficient and popular way to apply color and font settings?
Should I apply these changes with style="" while generating the design? Should I edit it with JavaScript? Include it in headers <style>, or maybe even edit the .css file?
The best way would be to make the changes directly to the css file. For this you would need to parse the css content. Grab a specific selector content and change it's properties.
An easy way is to output the custom properties in the page header (after the style.css in order to overwrite the default properties) or to put them in a separate css file.
Also, it my be helpful an existing Wordepress theme generator, like http://www.lubith.com