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