Susy: How to extend content box to cover grid-padding as well? - css

I just started to play with Susy. I have a 12 column grid that has grid-padding on it. Now i want the header of my page to span the whole grid including the grid-padding. What I'm doing right now is calculating the overall width and then setting a negative margin on the header. That's feels rather hacky to me... Is there a cleaner way to do it?
$total-columns : 12;
$column-width : 3.5em;
$gutter-width : 1.25em;
$grid-padding : 2em;
$total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width;
header {
height: 150px;
width: $total-width;
margin-left: -$grid-padding;
}

You have two good options. One is a simplified version of what you have. Since block elements are 100% width by default, you can simply eliminate your width setting (and all that hacky math).
header {
height: 150px;
margin: 0 0 - $grid-padding;
}
Your other option is to use multiple containers on the page. That requires a change to the markup, but sometimes it's a simplification that works well. If you move the header outside your current container, and declare it as a container of it's own, that will do the trick.
(as a side note: if you do need the full width ever, you can simply use the columns-width() function (for inner width, without padding) or container-outer-width() for the full width including the padding.)
UPDATE:
I've been using this mixin, to apply bleed anywhere I need it:
#mixin bleed($padding: $grid-padding, $sides: left right) {
#if $sides == 'all' {
margin: - $padding;
padding: $padding;
} #else {
#each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
Some examples:
#header { #include bleed; }
#nav { #include bleed($sides: left); }
#main { #include bleed($sides: right); }
#footer { #include bleed(space(3)); }

Related

Sass calculcate columnwidth percentage

I'm trying to make my own little columngrid with sass but I can't wrap my head around this problem.
This is what I have come up with so far but it is no the right solution. I'm getting a clean grid like this but the problem is that I'm removing an extra percentage in every row.
I'm removing the gutter_width of 1%(in this case) on the width of each column and replacing the room by using my gutter_width as the margin-left. So for each column I'm removing a percentage and adding it as margin, creating the gutters. The problem arises when I remove margin of the first-child in the row wich leaves me with a 99% row.
Could somebody help me out with this? Or maybe suggest a better way.
$container_width: 970px; // Main container width
$gutter_width: 1%;
$columns: 12; // Twelve columns
/* #Calculate the columnwidths */
/* Calculate the width of a single column and multiple it by columncount
================================================== */
#for $i from 1 through $columns {
.column-#{$i} {
width: ((100% / $columns) * $i) - $gutter_width;
}
}
.container {
max-width: $container_width;
margin: 0 auto;
}
.row {
width: 100%;
margin: 1em 0;
#include pie-clearfix;
}
// Select all element that contains class 'column'
[class*="column"] {
float: left;
margin-left: $gutter_width;
&:first-child {
margin-left: 0;
}
}
There should be one less gutter than there are columns - both in the context and in the span-width. The correct math is actually:
// the width of a single column has to account for "$columns - 1" gutters.
$column_width: (100% - $gutter_width * ($columns - 1)) / $columns;
#for $i from 1 through $columns {
.column-#{$i} {
the width of a span should cover "$i" columns, plus "$i - 1" gutters
width: $column-width * $i + $gutter_width * ($i -1);
}
}
Classes like this create a fairly fragile system if you want to nest any grid-spans inside other grid-spans, but it should cover the basics. Once you are using a pre-processor like Sass, I recommend leaving behind .column-x classes entirely, and just using mixins.
Because you have removed a $gutter_width from the first child you need to add it again to the last. One way to go about it could be to place this inside your loops:
&:last-of-type{
width: (100% / $columns) * $i;
}
That way if the column is the last element the width is recalculated with the extra 1%. If you want older browser support just replace it with a utility class called .last-column or something.

Susy Grids: change the size of 12-column div without changing the overall grid size?

I am using Suzy for partial re-design of an existing website. In stage 1, I am designing the top part of the page: header, etc. and using the legacy code for the rest.
At this point I need to fit the new headers to the old page content. Unfortunately, the usable space I end up with is smaller than the width of the existing content.
Any idea on how to adjust the content space (the width available for content placed inside the container) of #legacy-content-wrapper to be 1002px wide?
Here's my code:
$total-columns : 12; // a 12-column grid
$column-width : 69px;
$gutter-width : 14px;
$grid-padding : 25px;
$container-style: static;
// the resulting grid is 1032px wide
#header-wrapper {
#include container;
.some-header-content { #include span-columns(3,12); }
.some-other-header-content { #include span-columns(9 omega,12); }
}
#page-wrapper {
#include container;
// legacy item, needs to be 1002px wide!
#legacy-content-wrapper {
#include span-columns(12 omega, 12);
// my children will be 982px at 100% width
// #include bleed($gutter-width) changes the width of the container
// but does not change the size of the usable space within it.
// how can I modify this item to have content swidth of 1002px?
}
}
This is what I am looking for:
<div id="page-wrapper">
<div id="legacy-content-wrapper">
<div>I'd like to be 1002 pixels wide!</div>
</div>
</div>
I ended up with:
#legacy-content-wrapper {
margin: 0 0 -$grid-padding;
padding: 22px 14px;
#include clearfix;
}
You can adjust any of the grid settings to fit within the required space. Probably the most straightforward way to trim 30px off your grid size would be from the grid-padding setting.
$total-columns : 12;
$column-width : 69px;
$gutter-width : 14px;
$grid-padding : 10px;
$container-style: static;
You could alternatively tweak the column-width or gutter-width settings to achieve the same number. It's hard to say the best approach without seeing the design. Either way should get you to 1002px.

SASS mixin for grid layout

Let's say that we have the following markup:
<section class="wrapper">
<div>column1</div>
<div>column2</div>
<div>column3</div>
<div>column4</div>
</section>
I need a mixin which will set equally the width of the columns and will float them to the left. A simple four column grid. Here is what I came up so far.
#mixin grid($columns: 2, $tag: "div") {
#{$tag} {
width: 100% / $columns;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
&:after {
display: table;
content: " ";
clear: both;
*zoom: 1;
}
}
My question is: is there any better way to do this and do I miss something.
You might want to have a look at singularitygs!
With this sass extension you can write
div {
#include grid-span(1,1,4,$output-style: 'float');
}
The parameters for grid-span are (with, startpos, context, options). All numbers will be converted to ratio-based widths. The above example can be read as:
width 1 at position 1 in a grid-context of 4
=> width: 25%; margin-left: 0;
(ouput-style: 'float' is needed, because you are targeting multiple divs)
Or you can define your base grid first, and leave out the context:
$grids: 4;
div {
#include grid-span(1,1,$output-style: 'float');
}
You can even go further and use breakpoints to have different grids for different window sizes:
$grids: 4; // base grid (mobile first)
$grids: add-grid(12 at 980px); // 12-grid for everything above 980px
$output-style: 'float'; // set the output-style globally
div {
#include grid-span(2,1); // => 50%
#include breakpoint(980px) {
#include grid-span(4,1); => 33.3333%
}
}
There is alot more possible with Singularity, so check out their wiki!

LESS mixin with parameters syntax error

I've got the following mixin that adjusts the width and padding of an item to cope with IE7's lack of support for box-sizing:border-box. It gives me a syntax on & .width(#width: 100, #paddinglr: 0)
I appreciate this is missing a % but any ideas why it's breaking?
.width(#width: 100, #paddinglr: 0) {
width: #width;
padding: #paddinglr;
}
body {
&.lt-ie8 {
& .width(#width: 100, #paddinglr: 0) {
width: #width-#paddinglr;
padding: #paddinglr;
}
}
}
You cannot define a mixin as a selector string, so & .width() for your nested portion cannot be a mixin definition (which is what you have tried to make it).
I think what you are trying to do is make a generic .width() mixin to use on any particular element. It appears that you intend to just set a single number for padding, which is fine.
However, it also appears that (based off your % comment), that you expect this code to produce a width value that is 100% of the parent minus the value of the padding. This is okay, too, assuming you are using percentages for padding also. If you are not, but intend instead that the padding be a pixel value, that mixed units cannot be done by LESS as you might expect, as LESS is a preprocessor, so it is not dynamic in the sense of being able to detect the width of the parent based off the percent at run time and then subtract the padding pixel value.
Now, if your intentions are percentages, or any equal measurement values for both width and padding (whether both px, both em units, etc.), then you can get what you desire by various means. One of the many solutions would be by overriding the .width() mixin within the .lt-ie8 nest, so for example:
.width(#width: 100%, #paddinglr: 0) {
width: #width;
padding: #paddinglr;
}
body {
.someDiv {
.width(100%, 10%);
}
&.lt-ie8 {
/* here is the override of the mixin */
.width(#width: 100%, #paddinglr: 0) {
/* note, I believe you will want to multiply the padding by 2 for the width change due to left and right padding */
width: #width - (2 * #paddinglr);
padding: #paddinglr;
}
/* and here is the override of the actual css */
.someDiv {
.width(100%, 10%);
}
}
}
Which produces this CSS (minus the comments above which were just to communicate to you):
body .someDiv {
width: 100%;
padding: 10%;
}
body.lt-ie8 .someDiv {
width: 80%;
padding: 10%;
}

css to align title and everything below it

I wish to align the title and summary(click the plus sign in site below)
as shown in the screenshot
my site
http://pligg.marsgibson.info/
screenshot
http://i47.tinypic.com/ntn55.jpg
suggest css for this
Without changing your current markup, a simple fix can be:
CSS
.title h2 {
color: #187AAB;
font-size: 14px;
font-weight: bold;
margin: 4px 0 0;
padding: 0 20px 0 32px;
position: relative;
}
.title h2 span {
left: 0;
position: absolute;
}
Print-screen:
What I did was to give some left and right padding to the h2 element, to limit the space available for the text inside it.
Then, to place the avatar on the proper place, I've used the CSS position.
EDITED
To address the issue of your trigger element, add to its CSS:
p.trigger {
position: relative;
z-index: 1;
}
EDITED
To address the height issue mentioned on the comment!
See this working Fiddle Example!
jQUery
// run only if elements are found
if ($('.title').size()>=1) {
// initialize variables
var $target = $('.title'),
size = 0,
count = $('.title').size();
// for each element found
$target.each(function() {
// check the tallest element
if (size===0) {
size = $target.outerHeight(true);
} else {
sizeTMP = $target.outerHeight(true);
size = (sizeTMP> size) ? sizeTMP : size;
}
// decrease the counter
count--;
// counter is 0, set the height
if (count===0) {
$target.css({ "height" : size + "px" });
}
});
}
Ps: The CSS display declaration for the class .subtext1 must be updated to: display:inline-block.

Resources