Using the offset to center is fine. On Thu, Aug 16, 2012 at 4:39 PM, 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/**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. >>>>>>>>>>>>> >>>>>>>>>>>> >>>>>>>>> >>>>> >>>
