I'm not visualizing what you are trying to achieve based on your description, but it's early. I think you want the icon above the badge? In that case the thumbnail might work.
But to address at least part fo your question, any span* class can contain spans (within a row or multiple rows) that add up to its width. So a span 12 could have 6 * span2. In short, yes, the gutter is accounted for. Also, there is nothing technically work with adding additional styling to the scaffolding classes, as long as they don't have styling that disrupts the grid you are trying to achieve. I don't think this makes it leaner in the sense that you'll see actual performance gains on loads. It may be slightly less verbose, but it is also them less flexible and I like separating church and state (layout styling from visual styling) because I think it makes the markup more expressive. Again, this is entirely a personal choice, but using find and replace and or zen coding should make changing the markup very simple. Not sure about the padding, but I would have to look at the box model and see. using firebug should make it easy to visually see what's happening with the box model. On Fri, Aug 17, 2012 at 8:47 AM, Backspace <[email protected]>wrote: > oh i see - > > I mean I will have a badge with an icon 'on' the badge it's self, not a > thumbnail next to it. > > Another question: > > If I have a span 2, how come I can fit two span 1s inside, is it because > the gutter is taken into account? > > > On Friday, 17 August 2012 20:56:57 UTC+10, Ryan wrote: > >> I'm thinking your markup would look something like this: >> >> <div class="span2"> <!-- skinny column --> >> <div class="row"> >> <div class="span1"> >> //badge markup >> </div> >> <div class="span1"> >> //thumbnail markup >> </div> >> </div> <!-- end row --> >> <div class="row"> >> <div class="span1"> >> //badge markup >> </div> >> <div class="span1"> >> //thumbnail markup >> </div> >> </div> <!-- end row --> >> ...etc, etc >> </div> <!--- end skinny column --> >> >> On Fri, Aug 17, 2012 at 1:03 AM, Backspace <[email protected]>wrote: >> >>> The long skinny span 2 - It is going to have some badges in it from >>> bootstrap (with an ico on each one) >>> >>> What's the best way to lay these out? with the thumbnails class? >>> Or should I nest a fluid inside (want to avoid this) >>> >>> >>> Woot so happy! >>> >>> >>> >>> On Friday, 17 August 2012 15:01:21 UTC+10, Backspace wrote: >>>> >>>> yay it works >>>> >>>> thanks so much! >>>> >>>> >>>> it is also responsive now bonus! >>>> >>>> I have further questions though. Should I start a new thread? >>>> >>>> >>>> >>>> >>>> >>>> On Friday, 17 August 2012 10:18:44 UTC+10, Backspace wrote: >>>>> >>>>> sweet let me punch that in, really greatful for all of the help! >>>>> >>>>> On Friday, 17 August 2012 02:44:32 UTC+10, Ryan wrote: >>>>>> >>>>>> I'm not sure why you are using the pull-right. Based on the image you >>>>>> sent out, you should be able to achieve that entirely with using >>>>>> scaffolding. The attached image is the output of the code I pasted before >>>>>> with soem lorum ipsum insterted: >>>>>> >>>>>> [image: Inline image 1] >>>>>> >>>>>> On Thu, Aug 16, 2012 at 11:48 AM, Backspace >>>>>> <[email protected]>wrote: >>>>>> >>>>>>> I think the 'pull-right' class is messing things up - however I have >>>>>>> no other way to get this box to work 'inline' >>>>>>> >>>>>>> >>>>>>> On Friday, 17 August 2012 01:40:23 UTC+10, Barry vd. Heuvel wrote: >>>>>>> >>>>>>>> Or use border-box, to apply the padding without changing the width >>>>>>>> ;) >>>>>>>> >>>>>>>> On Thu, Aug 16, 2012 at 5:35 PM, Backspace >>>>>>>> <[email protected]>wrote: >>>>>>>> >>>>>>>>> I have something looking pretty good - using a pull right on the >>>>>>>>> span class though. The gutter is not ideal (too thick, I can look at >>>>>>>>> less >>>>>>>>> for that right). not sure why padding seems to affect boxes. wait I >>>>>>>>> should >>>>>>>>> apply the padding to the elements inside the wells. arrrr >>>>>>>>> >>>>>>>>> On Friday, 17 August 2012 00:46:10 UTC+10, Ryan wrote: >>>>>>>>> >>>>>>>>>> That's how I would do it, yes. >>>>>>>>>> >>>>>>>>>> span12 >>>>>>>>>> row >>>>>>>>>> span10 offset1 >>>>>>>>>> row >>>>>>>>>> //more stuff >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On Thu, Aug 16, 2012 at 10:39 AM, Backspace < >>>>>>>>>> [email protected]> wrote: >>>>>>>>>> >>>>>>>>>>> So it's ok to have margin on-top /bottom, just not left-right. >>>>>>>>>>> >>>>>>>>>>> I have my stuff contained within a span 10 with an offset of 1. >>>>>>>>>>> >>>>>>>>>>> I really have a lot more questions. I have been fool with the >>>>>>>>>>> code for a while now. >>>>>>>>>>> >>>>>>>>>>> edit making progress, got something to line up that was annoying >>>>>>>>>>> for ages (removed some padding) >>>>>>>>>>> >>>>>>>>>>> Edit - Padding left or right, will affect the box, I see it now. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> - adjusting colour on span 10 'container' so the span 12 .... >>>>>>>>>>> >>>>>>>>>>> Question, I center a span 10 - inside a span 12with span 10 >>>>>>>>>>> offset1 >>>>>>>>>>> >>>>>>>>>>> Is this the best way? I can post all of the code if needed, make >>>>>>>>>>> it look the way I think it should look. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Thursday, 16 August 2012 23:44:35 UTC+10, Backspace wrote: >>>>>>>>>>>> >>>>>>>>>>>> ok that makes sense.So I can just remove the width (either >>>>>>>>>>>> margin or padding) on any classes, and nest to position? >>>>>>>>>>>> >>>>>>>>>>>> did you see my pull right class? According to what you say, >>>>>>>>>>>> this is ok, it's not adding width. >>>>>>>>>>>> >>>>>>>>>>>> Oh I have a while to go. >>>>>>>>>>>> >>>>>>>>>>>> Is it ok for an element to 'butt' up against it's parent, is >>>>>>>>>>>> that part of the grid? >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>>>>> On Thursday, 16 August 2012 23:41:04 UTC+10, Barry vd. Heuvel >>>>>>>>>>>> wrote: >>>>>>>>>>>>> >>>>>>>>>>>>> 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-**sizi >>>>>>>>>>>>>> **********ng/ <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/**p********npUW/embedded/result/<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-** >>>>>>>>>>>>>>> sizi**********ng/ <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. >>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>> >>>>>>>> >>>>>> >>
