thanks man
"When using the default box-sizing, the paddings and margins are added to
the width (see http://css-tricks.com/box-sizing/ ), so when you add those
classes to the same element as .spanX, the grid doesn't fit, so use them in
a element inside the span, not on the span itself."
So would say though
so use them in a element inside the span (with no added margin /padding)
Hope that makes sense. I know what the box model is, but I guess I am
missing something,
In this context
<div class="row">
<div class="span8">
<di vclass="myclasswithmargin"/>
</div>
</div>
<div class="row">
<div class="span8 myclasswithmargin"/>
</div>
------
Say css is for first one
.myclasswithmargin {
margin:10px 4px 20px 10px;
}
Would do the same thing if it was for the second one, screw with the
framework. It's not just where you put the code (perhaps even in row) as
long as it does not fight the position of the structural elements.
This awesome example confuses me. The only dif
http://jsfiddle.net/Sherbrow/pnpUW/embedded/result/
The onlyu dif in two examples is no class in row / but still in span. Does
that make sense? Because it confuses me, as you are telling me to further
separate classes. I thought you could throw class names into divs
willnilly. padding / margin aspects make sense though!
On Thursday, 16 August 2012 23:13:46 UTC+10, Barry vd. Heuvel wrote:
>
> The .spanX classes have a margin. When you give it an extra class with
> margin, you overwrite the first margin. So you cannot combine the spanX
> class with classwithmargin.
>
> When using the default box-sizing, the paddings and margins are added to
> the width (see http://css-tricks.com/box-sizing/ ), so when you add
> those classes to the same element as .spanX, the grid doesn't fit, so use
> them in a element inside the span, not on the span itself.
>
> If you want to add padding/borders to the span elements, without changing
> the width, use border-box:
> http://paulirish.com/2012/box-sizing-border-box-ftw/ or the
> mixin: .box-sizing(@boxmodel);
>
> When you want to update easily, don't update the core bootstrap files, but
> overwrite them in a custom less file, you import after the bootstrap code
> (or custom css). This wil give more css output, but easier updates.
>
> On Thu, Aug 16, 2012 at 2:52 PM, Backspace
> <[email protected]<javascript:>
> > wrote:
>
>> Hi Barry
>>
>> That's what I was thinking, just use borders and padd content inside of
>> it, but leave the structural stuff to grid (starting to get it). I suspect
>> this will help me with responsive adjustment.
>>
>> Question1:
>>
>> If I do this
>>
>>
>> <div class="row">
>> <div class="span8">
>> <di vclass="myclasswithmargin"/>
>> </div>
>> </div>
>>
>> is same as
>>
>> <div class="row">
>> <div class="span8"myclasswithmargin"/>
>> </div>
>>
>> (keeping inheritance and stake order in mind of course).
>>
>> Q2
>> Some of my elements contain specific padding / margin for positioning. Do
>> I need to contain these inside further structural code to ensure they
>> respond according to the responsive features (I am sticking to fixed width
>> boxes). I guess if it's not style, use the framework, makes perfect sense
>> now.
>>
>> Q3
>> I use a custom.css file to add anything I want on-top. I am adding my own
>> updates into My Less file, but I realised if I update the core I
>> overwrite). Should I put all of my .less updates into a .less file called
>> after the bootstrap .less files? What's best practice and what's light
>> weight.
>> Q3a If you were working large scale project, would you even auto update
>> a site (with any type of frame work), or do it manually (Add bits of code
>> from update as you see fit {as long as it works})
>>
>> I have a few thousand lines of code to re-write.
>>
>>
>>
>>
>>
>> On Thursday, 16 August 2012 16:37:16 UTC+10, Barry vd. Heuvel wrote:
>>
>>> The span classes are calculated to fit exactly. When you add extra
>>> styles that change the width, it doesn't fit.
>>> So you can use styling, bit nothing that makes it larger, so no border
>>> or margins/paddings.
>>> But you could use the border-box model, to create borders/paddings,
>>> without changing the width
>>> Op 16 aug. 2012 06:21 schreef "Backspace" <[email protected]> het
>>> volgende:
>>>
>>> Cool
>>>>
>>>> I am using my own well class in the less file.
>>>>
>>>> So to recap. <class "row">
>>>> <class "span4">
>>>> <class "mywell"/>
>>>> </div>
>>>> </div>
>>>>
>>>> Can any one lese confirm that placing class names in spans (my own
>>>> classes) is bad practice? I can see your point, it's jut there will be a
>>>> load of reworking going into my site if that's the case. It sounds fair
>>>> though. I can see sherbrow has pretty much confirmed this for me too, I
>>>> just thought I could place my own class names alongside the span class div
>>>> tag. So <div class="span 5 myclass">
>>>>
>>>> It makes sense though.
>>>>
>>>> I have not had a chance to look at your code on how to achieve the,
>>>> let's call it 'float emulation', I am after. However I am currently
>>>> pulling
>>>> a row to the right. I guess this is bad too though.
>>>>
>>>>
>>>> --------------------------
>>>>
>>>> On Thursday, 16 August 2012 12:14:56 UTC+10, Ryan wrote:
>>>>>
>>>>> Stupid IE 10 is sending blank messages when I reply. Guess that is
>>>>> what I get for using the release preview. So to recap, but shorter.
>>>>>
>>>>> I'm pretty sure it messes with the formatting, but this is also a
>>>>> better practice. Only use grid/scaffolding classes for layout, put
>>>>> visible
>>>>> content inside them. I would also add your own clas, instead of just
>>>>> well,
>>>>> so you can override the css in the future if you want.
>>>>>
>>>>> On Wed, Aug 15, 2012 at 8:49 PM, Backspace <[email protected]>wrote:
>>>>>
>>>>>> Hi Ryan, thnaks (and you too
>>>>>> Sherbrow)
>>>>>>
>>>>>> first question -
>>>>>>
>>>>>> With this code
>>>>>>
>>>>>> <div class="span5"><div class="content well">content</div></div>
>>>>>>
>>>>>> Would this not be the same?
>>>>>>
>>>>>> <div class="span5 content well"></div>
>>>>>>
>>>>>> I am justa adding another couple of classes to the span 5. Or are you
>>>>>> sayin that the margins / padding in span 5 and well will conflict?
>>>>>>
>>>>>> Rather
>>>>>>
>>>>>>
>>>>>> On Thursday, 16 August 2012 02:14:06 UTC+10, Sherbrow wrote:
>>>>>>>
>>>>>>> As said before, you should definitely not use formatting classes
>>>>>>> (like well - or you own styles) on scaffolding.
>>>>>>> The same for mixing spans and rows. The most obvious reason is that
>>>>>>> both those classes have different margin behavior, which creates
>>>>>>> paddings
>>>>>>> not supported by the grid.
>>>>>>>
>>>>>>> Here is an example of your first code, showing the differences (you
>>>>>>> can see that the 2nd col is actually a span4, which added to the span6
>>>>>>> fills the span10)
>>>>>>>
>>>>>>> http://jsfiddle.net/Sherbrow/**p****npUW/embedded/result/<http://jsfiddle.net/Sherbrow/pnpUW/embedded/result/>
>>>>>>>
>>>>>>> Ryan idea about giving classes to style the content instead of the
>>>>>>> spans is definitely a good practice.
>>>>>>>
>>>>>>> On Tuesday, August 14, 2012 12:20:50 PM UTC+2, Backspace wrote:
>>>>>>>>
>>>>>>>> Here is a pic to make it easier. Perhaps I need to use a clear fix?
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> On Tuesday, 14 August 2012 19:31:14 UTC+10, Backspace wrote:
>>>>>>>>>
>>>>>>>>> Sorry if this is not clear, what I want to do.
>>>>>>>>>
>>>>>>>>
>>>>>
>
