-1

I'm searching for a effective way to customize bootstrap layouts. Currently i use layoutit.com to get the basic layout and then the software Brackets to edit. I make changes to the less for customization. But it is very complicated that way...my problems are:

-Layoutit is great but places some containers very oddly so you have to change that manually

-Brackets only shows you what css rules are used for specific html (just like firefox) but it cant show what less rules apply and it can handle the minified css stuff (whats that by the way) so you cant really make changes that way in a fast and effective way

-Editing within firefox works great, but it only edits css and can't save the changes.

So what can I do to layout fast and customize effective? Any help?

strivedi183
  • 4,749
  • 2
  • 31
  • 38
user3006700
  • 11
  • 3

1 Answers1

0

Customising it in SASS and LESS is very easy, and also the most effective way--since that's your question. Take a look at the source, specifically in the variables.less file starting at line 240.

// Number of columns in the grid system
@grid-columns:              12;

// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;

Change those two values to the values you want, and you are essentially done.

If you are using containers, you will also want to look at the bottom of that file.

/ Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

Here you can customise the size of your containers.

Bootstrap also comes with mixins, so you can create your own grid with semantic names. The following example would provide a centred column with a width of 50% of your container size.

.post {
  @include make-lg-column(6);
  @include center-block;
}
Mohamad
  • 34,731
  • 32
  • 140
  • 219
  • my greatest problem is that i have to search for every little change i want to make. it would be so cool to just select some html (for example the navbar) and see exactly what less rules are used for it. that combined with instant visual preview would make the whole thing so much easier, atm its way to complicated to search->edit->preview->search->undo->change->preview... – user3006700 Dec 03 '13 at 13:54
  • You do not have to do that. Everything you need is in a single file: `variables.less`. It's designed that way for a reason: To make editing it easy. What's so hard about changing 2 values? Also, there is a way to see what rules are applied: **Developer Tools** and **Fire Bug**. They tell you exactly what rules are applied. Don't be daunted; it's a lot simpler than it looks. – Mohamad Dec 03 '13 at 13:56
  • yeah but they tell me what css rules are applied, but i customize using less. and less rules are in variables.less and navbar.less (navbar example), then there are rules applied from grid.less so again i see no way to see what less rules are applied, just css but thats useless for me. thanks for your help ! – user3006700 Dec 03 '13 at 16:29
  • All you need to know is what rules are applied. You look at the rule and notice, for example, that a `col-lg-1` has a `width` of `x`. If you read the code, you should automatically know what variable that is. It's not hard to see that the width of a column is the size of the container divided by the number of columns, 12 in this case. Perhaps you are trying to run before you could walk? The whole point of abstracting with Less and Sass is to make things easier... that's why a variables.less exists in the first place. Take your time and read the code. – Mohamad Dec 03 '13 at 18:35