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