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
Related
I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.
I'm working on several WordPress projects that all use the same template and core WordPress files. So I split the folders like so:
wordpress-
-wp-content
-themes
-mytheme
-output
-core.css
-src
-bootstrap
-files.scss
-sass
-core.scss
project
-outputs
-project.css
-sass
-project.scss
both my project.scss and core.scss use #extend and #include using bootstrap sass files.
I can indeed #import bootstrap at the top of project.scss as well as core.scss, but then I will end up with duplicate of bootstrap.
Is there a way to avoid it? how would you approach it? I feel that importing just the bootstrap files I need for the project is still a waste. There must be a way for sass to go into the files, extract what final css it needs from bootstrap for #extend/#include and leave the rest out of the final project.css
I hope I'm explaining this right.
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'm new to Cakephp and I have been developing a website for my client. I'm not satisfied with the look of the website and I've been trying to figure out how to use Bootstrap with Cakephp. I have been introduced to Sass and it seems like this is a great way to write css. So I want to use Bootstrap-sass. But after seraching a lot I still cannot find a good tutorial on how to approach this matter. Most of the tutorials are for Ruby on Rails with Bootstrap even the official Bootstrap-sass Github page https://github.com/twbs/bootstrap-sass
I would be gratful if someone could guide me through this or if this is not the way to go, which Bootstrap should I use If I want to have the sass functionality as well.
Also there is another doubt that I have:
Is it possible to overwrite Bootstrap css without using LESS or SASS?
That is more than one question.
SASS and CakePHP, easy. First of all, understand there are 2 SASS dialects. Original SASS tries to use the minimum of characters and is indent-sensitieve like Python. SASS 3 brought SCSS, which is more like CSS on steroids and easier to use. Then - outside of Ruby - you need a SASS compiler. SCOUT for SASS - Windows and Mac - is dead simple and does the job. You indicate your source SCSS folder, sits in webroot in my CakePHP, a target folder, the CakePHP CSS folder and a temp folder sitting in CakePHP/tmp for me. That is all it takes, save a SCSS file and Scout watches this and generates the CSS.
Bootstrap. Not easy to integrate in CakePHP templates. Additionally it uses some questionable JavaScript. Take a look at Compass, the same thing integrated in Scout.
If you want Bootstrap for a responsive grid, use SimpleGrid instead. As the name says simple and CSS only. Drupal is based on it.
Remember SCSS is a CSS superset; copy your CSS to your SCSS folder and start adding to it.
Good luck, André Hartman, Belgium.
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.