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.
Related
Any help is much appreciated. I'm using Sass, Compass and Susy to redesign my website. I'm needing to figure out how I can set up a vertical center in browser. I have a row with five columns and I need to center it vertically.
Here's the HTML:
<div class="layout">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
The sections create the row of columns. I need to center the .layout class vertically.
For any issue like this, start by solving for vertical-centering in CSS. The two best methods I know, only work in modern browsers. The best option is flexbox, followed by a little trick using position and transform. There are other solutions if you search around for "css vertical center".
Both of those require prefixing to work across browsers, which is where Compass might be helpful. Compass has mixins to help with both flexbox and transforms.
I'm just trying to familiarise myself with the new Susy Next options and I have my code:
.grid
+clearfix
clear: both
.grid__item
+gallery(1)
+rem(margin-bottom, 20px)
I want a 5 column grid inside .grid so that .grid__item's span 1 column in a gallery formation.
If I add +with-layout(5 1/4 fluid show background) inside .grid then I don't get the debug background output.
If I add +container(5 1/4 fluid show background) inside .grid then I get the background but the items don't span correctly as the context is not there.
Are there any docs on how to use +with-layout as I think that might solve it but can;t find anything on http://susydocs.oddbird.net/en/latest/install
I'm just after the best way to use Susy Next to solve this. I need .grid to contain 5 fluid columns with 1/4 gutters and to then allow me to span my .grid__item's based upon it. I also need to be able to output debug backgrounds on .grid.
I think my main issue is that I am getting confused between: +container, with-layout and how things roll in together. I have read the latest docs but it doesn;t quite click in my head.
Might just be me!
You need to establish your grid. with-layout is one way to do that for a small block of nested code, but why not just set them globally? There are several ways you could do it, all of them documented, but most likely you just want the layout() mixin:
// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)
Now you have a global context, and you can build your grid:
.grid
+container
.grid__item
+gallery(1)
That's it. If you really just want the grid set for a small section of code, you can use with-layout. It works just like layout, but it only affects the code nested inside it.
// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
.grid
+container
.grid__item
+gallery(1)
I've found this nice slick effect in here - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.
Here is a copy of this - http://jsfiddle.net/cyvvilek/cL7x6/3/
I was wondering if there is any way to get this effect on hover.
Together with some CSS animation would give a nice effect, I think.
There is a heavy use of :after and :before in CSS so it cannot be #box:after:hover or anything like that :)
I've heard about possibility of nesting stuff in SASS or LESS..
Can this be done with CSS alone?
Thx
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.
I am using compass on my site, and have created a style such as:
#include background-image(linear-gradient(top, #C9C9C9, #FFF));
The problem is, this doesn't incluse a solid-color fallback for older IEs. Do I simply have to include a line like
background-color: #c9c9c9;
Or is there a way to have Compass handle this automatically for me?
As far as I know there is no way in Compass to have the background color automatically computed from a background-image declaration, because of the way it is built : you could have several gradients in there, and Compass can't really know which of all those colors is supposed to be the base one.
One way I advice is to create a gradient-wrapper like the following :
=gradient-horizontal($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-color: mix($startColor, $endColor) // Second possibility
+filter-gradient($startColor, $endColor, horizontal)
+background-image(linear-gradient(left, $startColor, $endColor))
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/