Susy columns overflowing grid
Your columns are actually correct, and the background gradient is wrong. It's a browser bug. See the documentation.
Adding divider between horizontal sass susy grid
The goal of grid system like Susy is to fill up all the available space by arranging elements. But there are a couple of options for adding borders: 1) Add box-sizing: border-box;, probably by putting @include border-box-sizing; in your li declaration. See more on box-sizing. 2) Use outline, which doesn't...
Gutters in Susy remaining intact as spacing between elements. Bonus: wider doesn't work
susy-compass,susy-sass,susy,susy-next
Add the no-gutters keyword to your wide span. While wide tells it to add more space to the span width, it does not automatically remove the gutter output. @include span(1.75 wide of 9 no-gutters);...
Adding Padding to the sides keeps breaking layout
Add it to your columns, like this: #content { @include span(9 of 12); padding: 20px 0 20px 20px; } #sidebar { @include span(last 3 of 12); padding: 20px 20px 20px 0; } Here you have it working: http://codepen.io/yivi/pen/BywygG And here with fluid math: http://codepen.io/yivi/pen/jEGEjj Regards...
What happened with gutter function/mixin in Susy 2?
compass-sass,susy-compass,susy-sass,susy,susy-next
Your layout settings are wrong, so your gutters are undefined and hence the null values you are getting. It's gutter-position: after, not gutter-position: right. (The valid settings are these). See it working here. (Spoiler alert, output for your code is .test { margin-right: 1.0989%; margin-bottom: 1.0989%; } .test2 { background:...
The $susy setting global-box-sizing doesnt change anything in Susy2
That's right. global-box-sizing is actually descriptive, not prescriptive. It tells Susy how you have set your global border-box. By default it is set to content-box (the browser default, and the border-box-sizing mixin will set it to border-box for you automatically. The only time you ever need to change the setting...
Susy 2.1.3 issue regarding layout change on breakpoint
html,grid,sass,susy,breakpoint-sass
with-layout only changes the settings used for Susy mixins/functions nested inside it: @include with-layout($layout2) { // code nested here will use the $layout2 settings } You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what @cimmanon was trying to explain in the comments....
Can't get susy to use gutter in 'px' while in math:static mode
You need to specify gutters proportionally to your columns. In this case: gutters: 1/9, The end result (being your columns 90px) would be gutters 10px wide. You can specify your gutters width in pixels by expressing it as a proportion. As per the docs, you can speficy gutter width in...
Changing Gutters only for a section using susy
You can use the with-layout mixin to [change your grid settings for a nested block of code]](http://susydocs.oddbird.net/en/latest/settings/#with-layout). @include with-layout($new-settings) { // code you want affected... } ...
How to assign the height of an element as a ratio of its width with Susy v2
Without any code is very hard to understand what are you trying to accomplish and how, but at first sight you wouldn't need a new mixin. You could just simply say: .element { width: span(9 of 12); height: span(3 of 12); } or .element { @include span(9 of 12); height:...
Elements not sitting side by side (Complex Grid) There is space, but acts as if there isn't
If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it. You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not...
Susy Gutter Size
css,css3,susy-compass,susy-sass,susy
You should take a look at the Susy settings (susydocs.oddbird.net/en/latest/settings/). The gutters setting is what you are looking for. Also, gutter-position is also worth taking a look at. Additionally, typically (depending on the grid and the grid settings) you will need to declare the last grid column by using the...
Different gutters with susy sass
sass,compass,susy-compass,susy
You can change the layout like this @include with-layout(12 1/8 fluid float after) { .box-5 { @include span(2 of 12); } .box-6 { @include span(10 of 12 last); } } Where the 1/8 is the gutter width....
Sass importing bower components
To manage your dependencies, you can use Grunt Wiredep (https://github.com/stephenplusplus/grunt-wiredep) to automatically add the files in your main.scss file. Add the main.scss to your wiredep config. wiredep: { task: { src: [ 'app/styles/main.scss', // .scss & .sass support... ] } } And pop this in your main.scss file. // bower:scss...
How to use Susy for Static Layouts?
twitter-bootstrap-3,responsive-design,susy
Ok I think I figured it out. This is the configuration I used to mimic the Bootstrap Grid. $susy: ( columns: 12, column-width: 70px, gutters:30px/70px, debug: (image: show) ); This generates exactly the grid used by Bootstrap ...
Struggling with creating a navigation bar with angled divs that are stacking on top of each other
css,sass,positioning,compass,susy
With one nav and a couple of rotated and translated (and suitably positioned) pseudo elements. html, body { height: 100%; } .container { width: 80%; height: 100%; overflow: hidden; margin: 0 auto; border: 1px solid black; } nav { height: 75px; background: steelblue; margin-top: 75px; position: relative; } nav:before {...
How to work around @mixins naming conflicts?
sass,zurb-foundation,mixins,susy
I can imagine only a not so clean way: if you can separate the .scss that is using Susy grids from the other foundation stuff, you could use grunt to compile 2 separate files, one sass run for foundation and one run for Susy grids, then eventually merge the 2...
How to propery define nested elements?
Bootstrap uses rows to remove the edge gutters. Susy doesn't use or require rows, so span() is all you need. There is also no need for the repeated container() mixin. If you want the article to clear floats, you can use a clearfix instead (ours is called susy-clearfix()).
Susy gallery breaks height for display table and table-cell
The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the...
Getting Libsass Gulp Susy to work together
The complete working setup package.json "devDependencies": { "gulp": "~3.8.10", "gulp-sass": "~1.3.2", //this installs libsass for us "gulp-sourcemaps": "~1.3.0", "gulp-plumber": "~0.6.6", "susy":"~2.2.2" } Gulp sass Task var gulp = require('gulp'); var sass = require('gulp-sass'); var handleErrors = require('../util/handleErrors'); var sourcemaps = require('gulp-sourcemaps'); var minifyCSS = require('gulp-minify-css'); //libsass gulp.task('sass', function () {...
Layout order which differs from markup order with Susy
Unless you use float isolation (with the isolate keyword), passing in a location (first, last, at 10, etc) only affects gutters and last-flow. With isolation, you can get what you want. Try this: #content{ @include span(7 at 4 of 12 isolate); } #sidebar1{ @include span(3 first isolate); } #sidebar2{ @include...
Susy grid alignment a bit off
The only problem is that for someone reason the global-box-sizing: border-box parameter not working. .full { @include span(2 of 2 border-box); } SassMeister...
set column position with Susy
Susy uses standard float layout by default. Because floats stack up in the flow, you can't position them in any "absolute" way — you have to push or pull them from one position to another. Susy has no way of knowing their default position in the flow, but you can do...
Libsass with Susy not working + Gulp
I've managed to get susy working with libsass (gulp-sass) gulp-sass needs to know where to find files specified with an @import directive. You can try set the includesPath option in gulp-sass to point to your local copy of susy. As I've installed susy with bower, I have something like this:...
Can susy return a span in pixels?
Susy will calculate your spans by default in percentages, but if you specify "math: static' in your settings, all your outputs will be in your given settings. Let's say you have $susy: { container: auto, columns: 12, column-width: 60px; gutters: 1/4, math: static, } Then you can use the function...