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.
Related
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 use the cascade bootstrap plugin and like it very much. Now i need to add additional classes to the rows and columnes for styling it more precisely via css. I would like to add style or id -fields to the cascade plugin. I thought the simpliest way is subclassing the cascade plugin but I cant find any way for doing this and I dont find the right place in the docs. Maybe you can give me a hint or point me in the right direction.This is my first djangocms project, I moved from zope.
Any tip or help is appreciated!
Regards,
Klaus
The CSS files that need to be overwritten are in static/css for whatever framework (Bootstrap/Grid System 960) that you want to use. I suggest creating a custom file and including it after the vendor CSS files, leaving them as-is, and have yours overwrite theirs.
See their documentation. In case the link changes: http://djangocms-cascade.readthedocs.org/en/latest/tutorial-bs3.html
They maintain Bootstrap's typical classes for structures, you could probably include a theme from Bootswatch
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
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.
In my Play 2.0 project I already have Bootstrap integrated (as the less files, Play can compile them in the fly) but now I found Boilerplate and I think it would be a nice idea to make use of it also.
After a bit of googling I found this:
http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa
So, looks like integration should be possible, and there are even 2 projects which try to do that. The only problem is that they do completely different things and I'm not sure which one is correct.
https://gist.github.com/1422879 in its current state seems to just ignore styles.css file coming from Boilerplate. It's renamed to h5bp.css, but I don't see h5bp.css included anywhere.
https://github.com/elgreg/html5-boilerstrap on the other hand uses both of them, just splitting styles.css file into two parts (h5bp_normalize.css and styles.css, bootstrap.css is included between them). But aren't there any conflicts between Boilerplate and Bootstrap this way?
So I'm a bit lost. What is the proper way of doing things in this case?
Just use Initializr, it's the semi-official solution and it has a huge set of options too. Bootstrap + H5BP is supported out of box!
http://www.initializr.com/
I've removed reset styles from twitter bootstrap(by removing less #import statement) and pasted it into html5-boilerplate(in user styles section). Worked fine.
Workless http://workless.ikreativ.com is another Bootstrap/H5BP combo.
the Gist https://gist.github.com/1422879 is H5BP + twitter bootstrap integration