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]>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. >>>>>>>> >>>>>>> >>>>
