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