My HTML looks like:
<head>
<link href="stylesheets/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='holder'>
<div class='block-a'>A</div>
<div class='block-b'>b</div>
</div>
</body>
My SCSS looks like
$grids: 12;
.holder {
max-width: 80%;
margin: 0 auto;
#include clearfix;
#include background-grid;
}
However, when I compile and view the scss, I just see A and B. If I add a background color to block-a, it displays the background color. Why is the background grid now showing up?
you are running singularity 1.2? Then try to add aside the #include background-grid; mixin in the scope of your global singularity definitions also the following statement:
#include sgs-change('debug', true);
U need to add a mixin
#mixin clearfix {
clear:both;
/*-- rest of ClearFix Atributes --*/
}
.holder {
max-width: 80%;
margin: 0 auto;
#include clearfix
#include background-grid(10) ;
}
I'm not getting any result using Sass 3.3.5, Compass 1.0.0.alpha.18 and Singularity 1.2.0.
This line below Throws an Error => wrong number of arguments (25 for 1..2) for `_linear-gradient'
#include sgs-change('debug', true);
Demo:
http://sassmeister.com/gist/11350705
It appears as if this is the identical issue referenced in Singularity Issue #168. Please follow that issue.
Related
I found myself with a problem. When I was using css I had no problem setting the properties of the html elements with css, but I'm now trying to use scss and, for some reason that I'm unaware of, I can´t change the properties using the scss variables.
I'd be thankful if anyone could give me a solution for this issue.
HTML
<html>
<head>
</head>
<body>
<div id="example"></div>
</body>
</html>
SCSS
$color-1 : #202020;
#example {
background-color: $color-1;
width: 200px;
height: 100px;
}
Can this be done? I've looked into susy, jeet, singularity etc. I'm using latest version of libsass. I might have a few more options if I switched to Ruby.
I love susy, but for my next project I need fixed gutters (set them in px).
Suggestions welcome!
If I wanted to use Susy (my favourite grid) with this approach, I’d set the gutter to 0 and manage the margins manually in my Sass, like this:
$susy: (columns: 4, gutters: 0, math: fluid, output: float, last-flow: to)
#import "susy/susy"
body
background-color: #fff
margin: 0
padding: 0
font-size: 100%
color: #000
.container
#include container()
.box
#include span(1)
&:last-child
#include last()
div
background-color: #ccc
margin: 0 10px // Will result in 20px margin
&:first-child
div
margin-left: 0 // Skip, if you want outer gutter
&:last-child
div
margin-right: 0 // Skip, if you want outer gutter
Now, with markup like …
<div class="container">
<div class="box">
<div>A</div>
</div>
<div class="box">
<div>B</div>
</div>
<div class="box">
<div>C</div>
</div>
<div class="box">
<div>D</div>
</div>
</div>
… you’ll get fluid columns with fixed gutter – which is not a gutter for Susy, but a “visible” gutter. Of course if you need breakpoint-dependend behaviour, it’s a little extra work, but IMHO acceptable.
And Susy aside: Bootstrap uses a fixed gutter width. Although I find it pretty cumbersome to rip the grid out of the Bootstrap bloat, if I only want a grid and nothing else.
Singularitygs Grid overlay Not Showing
This is driving me up the wall, i've finally got singularity working but can't seam to show the grid - if someone could help that would be great.
Not bothered about the fancy toggle solution just want to see the grid-overlay desperately!
My HTML
<body data-development-grid="show">
My SASS
#import "singularitygs"
// Singularity 1.2 Syntax
#include add-grid(12)
#include add-gutter(1/3)
.container
#include background-grid
max-width: 940px
margin: 0 auto
min-height: 100%
.one
background-color: black
width: 100px
height: 100px
top: 2px
left: 5px
If it helps i'm using codekit.
Thanks in advance
Finally got it working. The solution is to apply sgs-change ('debug', true).
Here's my Sass code if anyone needs it:
#import "breakpoint"
#import "singularitygs"
//////////////////////
// Set up the grid //
//////////////////////
+add-grid(12)
+add-gutter(1/3)
+add-gutter-style('split')
+sgs-change ('debug', true)
body
#include background-grid
Demo: http://sassmeister.com/gist/fa0ac03b02e604f6bdf6
I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using #include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?
Here's my html:
<section class="blog">
<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
</article>
<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>
And here's my SASS: `
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1
#import 'bourbon/bourbon'
#import 'neat/neat'
#import 'variables'
///////////////////////////
html
#include linear-gradient(black, gray)
height: 100%
body
background-color: $baseColor
font-family: $type
body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
//////////////////////////////
.blog
#include outer-container
aside
#include span-columns(4)
background: $thirdColor
//height: 100%
//#include fill-parent()
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
Thanks for reading.
EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.
One solution to equal column height is making all parents to height:100%.
Using your example:
html, body
height: 100%
.blog
#include outer-container
height: 100%
aside
#include span-columns(4)
background: $thirdColor
height: 100%
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%
This should work
To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.
Like the following:
.blog {
height: 100%;
aside {
min-height: 100%;
}
}
and it should work.
fill-parent only makes it full width, not full height of its container. It is equivalent to this:
.element {
width: 100%;
// Also sets box-sizing if global $border-box-sizing is set to 'false'
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source
I am using susy grids 1.0.9 and noticed something which has me confused.
I have two elements, ".page_1" and ".page_2", with identical settings -- spanning 10 columns each, padded on both sides.
I noticed an unexpected behavior: if I use $container-style: static, the container size starts changing depending on the font-size applied to said container.
If I change font-size to 1em both containers are again the same size.
If I change '$container-style' to 'magic' both containers are the same size, too. This behavior takes place only with a font-size specified on the element when the $container-style' is set tostatic.`
What am I doing wrong?/Is there a workaround for this? Code below.
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$container-style: static;
#section_1 {
background-color: #963;
border: 4px solid green;
.pages_wrapper {
#include container;
}
.page {
border:1px solid yellow;
#include prefix(1);
#include span-columns(10,12);
#include suffix(1);
text-align: center;
color: #fff;
}
.page_1 {
font-size: 1em;
}
.page_2 {
font-size: 1.25em;
}
}
HTML:
<section id="section_1">
<section class="pages_wrapper">
<section class="page_1 page">
<h1>Page 1</h1>
</section>
<section class="page_2 page">
<h1>Page 2</h1>
</section>
</section>
</section>
Screenshot showing the issue (Latest Chrome):
$container-style:static; , .page_2 {font-size: 1em} :
The width of .page is calculated in em, because you set your column/gutter widths as ems (which are font-size based). Since you're giving .page_2 a larger font-size than .page_1 the width of the container will grow as well.
If you want to use the static layout you can change your column/gutter settings, or set a fixed container-width:
$container-width: 960px;
This will apply a fixed width of 960px on .pages_wrapper and the width of .page will get calculated in percent.
Alternatively, you could alter your HTML and apply font-size on an additional container inside the container that uses the span-column mixin:
<section id="section_1">
<section class="pages_wrapper">
<section class="page">
<div class="page_1">
<h1>Page 1</h1>
</div>
</section>
<section class="page">
<div class="page_2">
<h1>Page 2</h1>
</div>
</section>
</section>
</section>