I want a 1000px wide container with 12 columns seperated by 20px gutters.
So I entered the exact pixels:
$total-columns : 12;
$column-width : 65px;
$gutter-width : 20px;
$grid-padding : 0;
$container-style: static;
I end up with these columns:
width: 6.77966% /*(calculated: 67.7833px)*/
margin-right: margin-right: 1.69492%; /* (calculated: 16.9333px) */
I am totally out of clues what is going wrong here. I got the feeling I am missing something very basic.
Any insight welcome.
Thx
Susy was initially built to manage fluid grids, so that's the default setting. If you want static grids, just change the $container-style variable to static:
$container-style: static;
That should do it!
Ok, I found my mistake.
As mentioned above I am using susy with drupal's omega 4 theme. I created a separate file _grid.scss which contained only the grid definitions:
.grid-1 {
#include span-columns(1, 12);
}
What I did not know was that I had to add the column and width definitions in that file as well. So I always ended up with default settings.
Sorry for the disturbance :)
Related
Android and iOS render fonts in vastly different ways. I'd like to be able to get their renders looking a little more similar, so I need to change the font-sizes and weights throughout my entire app depending on whether it's on iOS or android.
Obviously, going through every place font-size or weight is defined and adding a conditional for is out of the question, and (fortunately) I already have all my font sizes and weights defined by sass variables.
Regardless of whether or not there is a better solution than conditional sass variables, I would like to know:
How can I conditionally select sass variables in nativescript?
I know that modules will use MyModule.ios.css or MyModule.android.css depending on the os. Can I take advantage of that?
Yes, you are on right track. You can have MyVariable.android.scss and MyVariable.ios.scss to define different values for Sass variable. In my code sharing project I have MyVariable.scss as well that I use for HTML(Web).
I have created a sample playground for you here.
In my home.component.ios.scss
$labelfontSize: 10;
$labelfontColor: red;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
and in my home.component.android.scss
$labelfontSize: 18;
$labelfontColor: green;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
It shows red text in ios while in android text is green.
So I've got my _grid-settings.css.scss defined as per the docs and in it, among some of the other default overrides is $max-width: 1200px;.
Part of the contents of my override:
$visual-grid: true;
$visual-grid-color: green;
$visual-grid-index: front;
$visual-grid-opacity: 0.2;
$column: 90px;
$gutter: 30px;
$grid-columns: 8;
$max-width: 1200px;
I know this is working because I'm using the visual grid as well and when I change $max-width to 100% I see that change occur.
The problem I'm having is that my #include outer-container on my body is not being respectful of this value, contrary to the docs, it seems not to notice it.
body {
#include outer-container;
}
When I change this to #include outer-container(1200px); the content then falls into place alongside the rest of the grid.
The problem was that I was also using Bitters and did not know that it has its own grid settings as well. I had to make sure that I uncomment #import "grid-settings"; from base/_base.css.scss as per the docs' instructions.
I have a 2 column grid and two divs which I both want to span a single column starting in the first column. I want these to stack on top of each other but they are being overlayed on top of each other. Here is the scss:
#first {
background: red;
height: 30px;
#include grid-span(1, 1);
}
#second {
background: red;
height: 30px;
#include grid-span(1, 1);
}
I've fixed it by inserting an additional div between these two divs and using #include clearfix; or alternatively I can fix it by using #include isolate-span(2,1,'both'); on the second div.
Is there a more 'best practice' way of clearing a row like this?
As discussed in this similar question, Singularity doesn't clear your floats for you when you're using Isolation output (isolation being when each float is isolated from one another's position, as opposed to float where they are not).
The short version of that answer is to use the CSS clear property, as explained very well in the Mozilla Developer Docs
I've finally found some time to test Singularity, and im back to a problem I had before for that I cant find an obvious solution.
My issue is with nested grids.
Let's say i have a simple 12 column grid
$grids: add-grid(12 at $break2);
And my layout uses a main content area that extends for 9 of those 12 columns:
#include breakpoint($break2) {
#include grid-span(9, 3);
border: 1px solid red;
}
The, inside that content area, I need to create a section which is divided in three columns, that means each article inside will span 3 columns of the parent container (which is 9 of 9 columns).
I've tried this with following code, but cant get it to work.
.highlights{
overflow: hidden;
border: 1px solid black;
article{
#include float-span(3);
&:nth-child(3n){
#include float-span(1, 'last');
}
}
}
My goal was to have a simple declaration, where i could have a generic article declaration for every article, passing a rule for the last article in each row like i've done above.
Maybe my confusion its because im so used to the current grid system im using, can you help with this.
What's best and most pratical way to nest grids so they can align with their parent elements?
So the issue you're having is you haven't changed the grid context and are still using your global 12 column grid context at that point. You need to change your grid context to 9 as you're now inside a 9 column grid. The following should fix your problem:
.highlights{
overflow: hidden;
border: 1px solid black;
article{
#include layout(9) {
#include float-span(3);
&:nth-child(3n){
#include float-span(1, 'last');
}
}
}
}
Hi!
This might be caused by my lack of understanding of SASS/Compass.
I'm trying to output grid width with the following SASS code:
$total-columns : 4
$column-width : 4em // each column is 4em wide
$gutter-width : $column-width / 2 // 1em gutters between columns
$grid-padding : $gutter-width / 2 // grid-padding equal to gutters
#page
+container
+susy-grid-background
#block-block-3
div.content
p:first-of-type:after
content: columns-width()
Nothing is printed into block 3. :(
I also tried content: columns-width($total-columns), still nothing. If i do content: "foo", "foo" does get printed.
What am i doing wrong? How do i see susy-calculated grid width? Also, can it be printed in compass watch output?
Ok, the solution is using interpolation:
content: "#{columns-width($total-columns)}"