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