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