You can throw in as many classnames as you like, just be sure to not change the total width. Just inspect with your developer tools, to check the width/margins/etc.
On Thu, Aug 16, 2012 at 3:32 PM, Backspace <[email protected]>wrote: > thanks man > > > "When using the default box-sizing, the paddings and margins are added to > the width (see > http://css-tricks.com/box-**sizing/<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/<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/<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. >>>>>>>>>> >>>>>>>>> >>>>>> >>
