5

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.

enter image description here

  • Import your own less files into the style.less file. The whole lot (your files and the libraries) are compiled into the style.css file. You are free to structure your imported files any way you want, but check out SMACSS for guidance. If you don't like less you can use the sass port. You can also customise the Bootstrap source code to include only what you want and need and not the whole lot, but do that only if your requirements demand it. – J. Reynolds Dec 23 '14 at 15:17
12

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 ^^)

  • Small addition - I don't know specifically about 6400+ lines, but Bootstrap is notoriously a very heavy, erm, would you call it a 'library'? Not sure, but either way it doesn't surprise me to hear that there are thousands of lines of CSS. It's not exactly built to be lightweight – Clive Dec 23 '14 at 14:39
  • 1
    Is it not called a "frontend framework"? And yes it is quite heavy. – Djouuuuh Dec 23 '14 at 16:10
  • 1
    @Djouuuuh Thanks, but I had no problem at all to create the subtheme. The structure you see in the capture it is the subtheme, not the base theme. – chefnelone Dec 23 '14 at 16:21
  • @Clive you are right, but the interesting thing about Bootstrap library is that it provide a Framework with many Components which are really useful for fast develpment. – chefnelone Dec 23 '14 at 16:30
  • Oh don't get me wrong, I'm not knocking it - Bootstrap has its place, definitely. I was just pointing out that the free functionality comes at the price of a pretty bulky front-end framework (thanks @Djouuuuh :P) – Clive Dec 23 '14 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.