does anyone know why my gutters in Susy seem to be different widths?
I have a nested grid layout. Changing the gutters to larger values seems to even things out.
Also, the text seems to be overflowing a bit. Here are my default values:
$column-width : 12em; // each column is 4em wide
$gutter-width : 4em; // 1em gutters between columns
$grid-padding : $gutter-width; // grid-padding equal to gutters
$total-columns : 16;
You'll see in the docs for susy-grid-background that it shouldn't be trusted as a pixel-exact representation of your grid. It's only there as a rough guide. Browsers are terrible at handling sub-pixel rounding in background gradients.
Related
I need to create PDF’s based on designs from Sketch.com, where dimensions like font sizes and positions are given in pixels, and it seems to be using the standard resolution of 72dpi (A4 being 595×842).
It seems that WeasyPrint uses 96dpi for sizes given in pixels, when generating PDF’s.
The command-line API documentation indicates that there is a resolution parameter, but it only applies for PNG (and appears to be deprecated).
I see there is also a zoom parameter in the python API but it does not seem to be available in command-line, and anyway that would break dimensions given in physical units like cm and also my target page size, A4.
So how do I set the resolution to 72dpi? Or should I convert all units instead, applying a 4/3 factor on them?
I found a workaround inspired by the 62.5% font-size CSS trick – make 1rem in WeasyPrint = 1px in Sketch:
html {
/*
Make 1px on Sketch = 1rem in pdf
Normally we should set font-size: 1px, but we multiply by 4/3
as we are in 96dpi instead of the 72dpi from Sketch.
*/
font-size: 1.3333px;
}
body {
/* restore a decent default font-size */
font-size: 10rem;
}
After that I can use rem everywhere I would normally use px.
For people who prefer to keep the more usual 1rem = 10px, just multiply the html font-size by 10 above, or use font-size = 83.333% (i.e. 62.5% * 4/3).
I have a Singularity layout that puts padding either side of a 'container' like proposed in the Singularity issues here: https://github.com/Team-Sass/Singularity/issues/91
.container {
// Sets a max width. Site will be fluid until it reaches 960px, then stick there.
max-width: 960px;
// Centers the container.
margin: 0 auto;
// Sets padding equal to a gutter.
padding-left: gutter-span();
padding-right: gutter-span();
// Might as well clearfix it as well.
#include clearfix;
}
The basic want for this is so there's a gap either side so it looks cushioned on smaller screens.
What I don't understand is on what element I would show the grid using the #include background-grid whilst developing.
If I put it on the .container then the grid will display under the padding, which is not really part of the grid. Of course, I could create an element inside that, but that element is purely for visual development purposes and so is redundant once I switch the grid display off.
You can see on the image below how the black line goes out to the edge of it's parent .container but the grid is going beyound that.
So you use padding to add gutters to container. Backgrounds happen to stretch to padding gutters, so your grid is off.
The head-on solution is to use a subcontainer. Apply padding to the outer container. Apply clearfix and grid background to the inner container.
background-clip: content-box is indeed a better solution. You don't need debug grid background in IE8 anyway.
I'm trying to position two buttons side-by-side using Susy and this seems to work fine:
.fifty {
#include span-columns(3);
#include nth-omega(2n);
}
However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.
I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.
This is related to "How to include padding in column width with Susy", but your second option is a bit different. This problem isn't specific to Susy - it's true of any fluid layout - But Compass and Susy can help you with the first solution:
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;
Or just use the Compass box-sizing(border-box) mixin where you want it (on these buttons).
Since borders don't take % values, there is simply no good way to add borders to fluid elements (using the default content-box model). If you can't use the border-box model, the only other option is to add an internal element in the markup, use the outer for sizing, and the inner for borders and styles.
There is a third option - using calc() - but it's harder to do, and has even less browser support...
Option #1 is the best by far - as long as you can leave IE7 out of the fun.
I'm using Isotope (http://isotope.metafizzy.co/) for a website. As you know Isotope creates a fluid grid of elements that can be filtered, sorted, clicked etc.
It appears that for some reason Isotope orders everything in a grid that in horizontal dimension is multiples of 120px wide, e.g. if I set my elements as 115px wide, then Isotope will ad a small 5px margin to the ride of each element. If my elements are 119px wide, it will ad 1px. If my elements are 121 px wide it will magically ad another full 119px.
Is there a reason for this? How do I change these 120 px to another value?
Thanks
You probably have columnWidth set to 120, as this is the default value in the examples.
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/