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