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