.main {
background: green;
#include span-columns(9,12);
}
Is there an easy or inbuilt way in Susy to include , say, a 10px padding inside .main keeping its initial width intact so that the green background doesnt bleed ?
Thanks in advance, and sorry if a version of this question has been asked before.
There are two options:
Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:
#include border-box-sizing;
Use the $padding argument (docs) to the span-columns mixin. With this approach you are limited to the same units you used for declaring your grid - and just like those, these will be converted to fluid values if they aren't fluid already.
You can see why option #1 is way better, as long as you are OK leaving IE7 out of the fun.
Related
I'm trying to add padding to the .container without it effecting the grid. The best example I can think of is I don't want the content to hit the sides of the .container because if the design has say a blue background and the .container is white I want there to be a padding on the left and right. I quick made an example page here to show the problem.
I'm basically trying to make a container of 1000px with gutters of 20px and each will then take up 65px. Outside of the grid though but inside the .container I want the padding left and right to also be 20px. Not sure if this helps or makes things worse but this is my Calca workout sheet for the grids
Neat has a mixin called pad which applies padding to the current element.
Where you've declared your outer-container just add a pad mixin and specify the left and right values, e.g.:
#container {
#include outer-container;
#include pad(default 50px default 50px);
}
In the above example the parameters are in the order top, right, bottom, left. Handily, the mixin accepts default so you don't need to know the existing values for the top and bottom if you don't care about them.
That said, if your use case is to prevent the background from hitting the side (rather than the content) then padding won't help you, and you'll need to fix margins instead.
Typically grid systems use box-sizing: border-box; to overcome issues with box model calculations concerning margins and padding.
Here's a good article by Paul Irish on this very issue: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Chris Coyier from CSS Tricks has a good article too: http://css-tricks.com/box-sizing/
Using the susy compass addon, when use the span-columns mixin to be set to $total-columns how can I disable the margin-right value being set by $gutter-width?
At the moment my code is:
.element{
#include span-columns(12);
}
results in
.element{
width: 100%
margin-right: 2.12766%;
}
ideally i would like margin-right not to exist?
There is no reason to use span-columns() at all in this case. Block elements span 100% width by default, and there is no reason for any of the other properties (float & margin) that are part of the mixin.
That said, simply add omega and the right margin will go away. Still, it's a bulky way to achieve any of the goals you might be after. If you need it to clear other elements, you should use the simple clear: both;. If you need it to wrap internal floats, use a clearfix (Compass has several).
the image below will explain what I mean
click here for image
pretending that the red area is not a divider since I just want it to be empty with a fluid-like divider
position:absolute; left:0px; right:100px;
the above thing wont work because im trying to do this with a table inside a divider that is already using the position:absolute.... and it's actually for height but to make explaining simpler im just asking for the width
Your specific question is rather confusing, but, no, CSS has no concept of math. You can't do 100% - 50px, for instance, even though that would be really handy.
However, you can give elements margins of specific measurements, and if you don't give the element a defined width, it is, by default, 'auto' so will take up the remaining space.
So the left DIV could be set with a 100px right-margin.
That would answer your question if it were about CSS and horizontal spacing of a fluid layout.
As for your vertical spacing issues and a table, that's really an entirely different thing, so would suggest you revise your question with the specific markup you are looking for help on.
You could have a loot to less css framework (it deals with js)
you can use operators, check the Functions & Operations in less official website, very interesting, you can do things like:
#base-color: #000000;
#footer {
color: #base-color + #003300;
}
You can use width: calc(100% -100px); but it's not supported by all browsers unfortunately.
I have declared common css classes for common margin and padding classes in my css so that i can use them without making other css declarations too specific.
For example :
.padTB5{padding:5px 0;}
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;}
.mTop5{margin:5px 0 0;}
Is this method right??
If not then why?
If yes then which is better margin or padding? (I know margin issues with browsers)
Please guide... thanks in advance :)
This is bad practice as classes should be semantic - that is they should describe the type of thing you are styling. For example "blog-header", "primary-this", "secondary-that" etc.
In practice, the downside to using classes as you describe is that if your visual design changes and you need different sized margins or padding, then you will need to change the class names too - which means changes to both the CSS and HTML. Or if you just change the CSS then the class names no longer describe what they're for. This approach is not much better than using inline styles.
Margins and padding are different things and behave in different ways. Margins can collapse in certain circumstances whereas padding doesn't. Padding will include background images or colours whereas margin doesn't. Borders will display between padding and margin.
In my opinion, this is not optimal, unless you do it right.
In your markup, you now have something like this:
<div class="pad10 mTop10">
and you have that all over your site.
What if you want to change your CSS to have a little extra margin/padding?
.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 }
Oh. Those class names aren't looking so sensible anymore: you have to either put up with wrongly named selectors, or go Find and Replace in all your files.
What if you decide that some elements with .pad10 need to have red text?
.pad10 { padding: 12px; color: red }
Now the class name makes even less sense.
It might be alright to do this type of thing if you also apply a relevant (semantically sensical) class/id to each element in your HTML:
<div class="contactErrorMessage pad10 mTop10">
because that way, at least you can do:
div.contactErrorMessage { color: red }
You shouldn't do that. Naming classes like left or margintop20 is unadvised. You should use classes like content or sidebarBox, that describe the content.
Let's say you want to change the margin-top from 10px to 1em. Using your method either
mTop10 will have margin-top: 10px;
or you have to change your className to mTop1em
None of this is good.
See w3.org goodclassnames about this.
Also see w3.org about box model for margin, padding.
Margin is different then padding. Margin is the space out side the box, padding is the space inside the box. Both margin and padding are cross browser compatible. Your declarations are correct although it is not a recommended practice to create classes for margins or padding. One good use to this is creating a class for rounded corners or shadows, where you can quickly apply round corners by specifying the round corner class.
I want what in the good old days would be a two-column table layout. It's for http://paulisageek.com/resume and is working perfectly with:
.dates {
float:right;
width:171px;
}
but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font-sizes, etc).
Is there a way to make the second column autosize without forcing a width (or using javascript)? Will CSS3 have a way?
Give your dates column a min-width and a max-width instead of a fixed width. This gives you flexibility but ensures your design won't break:
.dates {
float:right;
min-width:171px;
max-width:300px;
}
Note that min-width and max-width do not include padding, borders, or margins.
Another possibility is make the dates to align right and display inline:
.dates p{
text-align:right;
display:inline;
}
This way you won't need a separate div for the dates.
...Or, if you want to be super-cutting-edge and ensure that your layout breaks in IE, you can use the new CSS3 columns (not recommended here, but still worth reading)
What you've got here is something that works extraordinarily well and easily with tables. Not only that it's incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML zealots might say).
Yup, it's possible. The keyword to search for is liquid columns. For example this deals with whole layouts but the points are the same.