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.
Related
It seems that the generated project already has lots of colour variables like --bs-body-bg. Dev.tools say it is in _root.scss, but that file does not seem to exist, and I suspect it is inside of bootstrap.in.css. Can I customise those existing colour variables?
It's coming from scss.
You should have other _XXX.scss. SCSS compiler will make a global CSS file for the whole project. Dev tools present you the origin _root.scss not the compiled CSS.
Find the big CSS file of your project, you will find your variables.
If you know scss and have access to the whole tree of scss and all the files, you can rebuild the global CSS in house.
Other way, you make another CSS file, you put it after the global CSS, and you override definition you need... Not the smartest, but if only some changes to do lot quicker.
I'm new to web development and am developing a website using bootstrap. I've got quite a few .css files that involve bootstrap, an open source bootstrap theme, some style sheets for the plugins I'm using and etc. Thing is, I feel like I'm doing the same thing over and over again, putting a lot of overhead on things.
For example, this is how the styles on the web page I'm developing currently operate:
Bootstrap default theme is loaded
Bootstrap custom theme is loaded, overrides the majority of the default bootstrap css configurations
My own custom css file is loaded, overrides the majority of the custom theme css configurations
I guess it's worth mentioning that my custom css file only overrides colours and borders.
I'm thinking if the theme is open source, should I just edit the theme itself? Or should I still be editing everything within my own custom css file?
Again, I'm very new to web development so apologies if this is quite a silly question. Optimisation is key for me, though. After the development stage I will combine the CSS files using bundles provided by the Microsoft.NET optimization package.
Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your fabulous work.
You get the right process right now. Import your libraries, then override them with you own file and lines of codes.
In your case, it does not matter at all the number of files you are importing, because you will combine and minify them.
If you really care about performances, I suggest you to look at the "CDN" systeme, for Bootstrap or jQuery it could be interesting and provide some good benefits.
Look at this question and the answers, they will give you some good hints : Single huge .css file vs. multiple smaller specific .css files?
I am making a website with concrete 5.7. and to edit some things i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)Is there a way to define how the elements are going to be disposed in mobile version or at least at which size the autonav is going to be changed by the menu button?Also in small screens the logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.!
Photo: https://plus.google.com/photos/109724001772064952270/albums/6114581190555851105 The first one is the original and the other is the mobile version.
That's actually a bit complex. In the elemental folder, there's a css folder. Inside that folder there's a bootstrap-modified.css file that is responsible for many things including the grid. As the name suggests, it is minified so hard to read and modify.
You also have a file called main.less and several folders containing a lot of other less files.
main.less gets processed and compiled into a css file on the fly, meaning when the site is visited and the css file was not generated yet or when less files were modified.
Anything you want modified you should modify in the less files.
Look for media queries "#media" to find styles specific to certain screen sizes.
how elements are disposed in mobile version is really something you need to deal with through the use of CSS. It is not really something Concrete5 has control over.
The changes to design made through settings->design->customize are saved in the database.
BUT the things you can modify are defined in the site's css file. You could simply modify the css file directly using any text editor instead of customizing design through the dashboard.
I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices
I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files
but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?
If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.
You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.
Overwrite vs override.
From the first link you give, you can see that both approaches have their supporters.
I've usually used the first method, and this is what I've done.
Download a copy of the less files, here is one source, and add to your project files
Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
Create theme-variables.less and theme-css.less files and save to this less folder
You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with #import "theme-variables.less"; and the theme file at the end of the Base CSS block with #import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit
That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.
Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.
Good luck!
First download form https://github.com/twbs/bootstrap less version
How to use Less and less compilers
http://lesscss.org/
http://winless.org/
Bootstrap tutorial
http://www.w3resource.com/twitter-bootstrap/tutorial.php
I am currently working on a project where a programmer who fancied themselves a graphic designer attempted their hand at ASP.Net themes. The CSS is pretty bad, but that is another question altogether.
What I really need help with is the best way to organize ASP.Net Themes and the CSS that lies within them. Imagine that there is a directory structure that looks something like this:
Themes
Theme A
StyleA.css
Common.css
Theme B
StyleB.css
Common.css
Theme C
StyleC.css
Common.css
Each theme has a common stylesheet in it. Unfortunately the author of those style sheets managed to change only a few things here and there in each copy of Common.css. Eventually I will evaluate whether or not those changes are even necessary, but some major cleanup needs to happen first. For now just assume that the changes, ever so small, are necessary for things to look right with each theme.
I would like to know what the best practices are for using themes while also needing some common styles across your application. I want to minimize the number of AppTurns in the page load, but I really want to consolidate common styles into one place in a way that maintains the ease of themes.
You should just include the standard/common css in the website and include it in the head of the masterpage instead of placing it in themes.
I have written a small article about that:
http://www.sambeauvois.be/blog/2010/01/dont-repeat-your-common-css-between-your-different-themes/
I'll complete it with more information later
Yes, just reference the common CSS file directly instead of putting it in the theme folders.
But what if you have a webpage in a sub folder that uses the masterpage? Won't the page to the css file be wrong then?