Right way to start with a Bootstrap subtheme?

Question

I create my first Bootstrap subtheme (version 7.x-3.0) and I have 3 questions:

1) Theres is the file css/style.css which has more than 6400 lines, is this normal. I expected to it to be an empty page to start adding my custom css styles. Is this right?

2) I guess that I should not add anything in css/style.css and create my own files.E.g: blocks.css, prodcuct.css. Am I right?

3) How to create and declare a new .less file. E.g: blocks.less, products.less, etc. I know that the .css files must be declared in the .info file, but not sure about this kind of files.

I uploaded a capture where you can see the folder structure of the subtheme.

Answer 1

First of all, there is a guide to begin with subtheming with Bootstrap here. And I recommand you to download the starter kit to get ready-to-use subtheme.

1) and 2) To create a subtheme, you don't have to edit any files in your base theme. Just create a custom theme, in sites/all/themes/, just next your bootstrap folder, and declare the yourtheme.info file like this:

name = yourtheme
description = Custom Bootstrap subtheme
core = 7.x
base theme = bootstrap
stylesheets[all][] = css/style.css

It is going to make the heritance of all your bootstrap files automatically.

You can create a new empty css file, in yourtheme/css/style.css, and customize.

You can also create multiple css files, as you said, but you have to declare it in the .info file aswell.

3) LESS is supported by Bootstrap. You just have to follow the guide I told you and have a local LESS compiler to generate CSS.

======

BIG EDIT:

======

How to set up a new Bootstrap subtheme

A) Download Bootstrap project (7.3 is fine to me). Place the bootstrap folder in sites/all/themes/.

B) Download jQuery Update project, which is required by Bootstrap. Go to yoursite/admin/config/development/jquery_update and set the default jQuery version to 1.9.

C) In your bootstrap folder, you're gonna find bootstrap_subtheme folder. Move it to sites/all/themes/ and name it banana (let's suppose your custom theme is called Banana). So you have bootstrap and banana folders at the same level.

D) In banana, rename the bootstrap_subtheme.info.starterkit file to banana.info. And edit its content like this:

name = Banana, a Bootstrap Sub-theme
description = A Bootstrap Sub-theme called Banana.
core = 7.x
base theme = bootstrap

E) Now you have a pretty new Banana theme, inheriting all from Bootstrap theme, and that you can activate in yoursite/admin/appearance/.

F) If you want to try a customization, go to sites/all/themes/banana/css and make a little change to style.css (see, it is not 6400+ lines ;-)). Refresh your site and see if it is applied.

G) If you want to work with LESS, you have to set up a local LESS compiler on your computer. This one seems to be simple to install and configure. Personaly, I use SASS and Ruby Gem to compile, so I cannot give your further information about another compiler here. Maybe someone will.

H) Once you're ready with your compiler, you just need to make your edit in sites/all/themes/banana/less/ folder. All the .less files that appear here are included in style.less. This is the one you have to compile (only this one) to generate css/style.css. Bootstrap gives you 3 empty files where you can put your code, content.less, footer.less, header.less. You can use them or just create new ones (don't forget to import them in style.less if you add new files).

I) Make some changes, compile and refresh your site. See if it is applied.

I wish you good luck (and a merry Christmas ^^)