I put that class in just then (I did not pick it up first scan)
My first question would be, why do I have to do this to the framework? What cons will come with it. It seems to be be workign against the framweork. My boxes are alot skinnier now, and more of a gutter is present. 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]<javascript:> > > 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. >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>> >>>>>> >>> >
