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