I am trying to make a nav bar with sass and foundation grid. I have links in the nav bar, but I don't want them to each be #include grid-column(4); instead I would like them to be 3 columns each and then have an empty space of 3 columns on the right end. It would be something similar to this:
(the email tab is currently hovered)
How do I add a space there with the Foundation Grid Sass Mixins.
I fixed the issue by just changing each id to #include grid-column(3); that were previously #include grid-column(4);. I believe this worked because they are in a row and the next column down is larger than 3 so it doesn't automatically jump to the nav bar above, but it lays underneath it.
My mixins are laid out something like this:
header {
#include grid-row;
}
h1 {
#include grid-column(9);
}
.login{
#include grid-column(3);
}
nav {
#include grid-column(12);
}
#games {
#include grid-column(3);
}
#email {
#include grid-column(3);
}
#archive {
#include grid-column(3);
}
.breadcrumbs {
#include grid-column(12);
}
nav a {
}
Related
How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line.
.story4 {
#include bleed-x();
#include span(2);
background: yellow;
height: 80px;
#include breakpoint($small) {
#include span(8 last);
}
}
Codepen:
http://codepen.io/meijioro/pen/aBdWyO
Bleed is a combination of negative margins and positive padding. Reset both to 0 to override:
#include breakpoint($small) {
#include span(8 last);
margin: 0;
padding: 0;
}
In general, I try to avoid breakpoint overrides by limiting the original application. Something more like this:
.story4 {
#include span(2);
background: yellow;
height: 80px;
// use your own tools to create max-width breakpoints...
// this limits the bleed, so we don't have to override it later.
#media (max-width: $small) {
#include bleed-x();
}
#include breakpoint($small) {
#include span(8 last);
}
}
I'm getting some strange behavior and was wondering if I am using a grid-column-row incorrectly.
I have the following HTML structure:
<div id="homeTop">
<!-- homeTop content such as headings and other nested rows and columns -->
</div>
<div id="homeMain">
<div id="homeMain-left"></div>
<div id="homeMain-right"></div>
</div>
<div id="homeBottom">
<!-- homeBottom content such as headings and other nested rows and columns -->
</div>
I then have the following SCSS to style this content:
#homeTop {
#include grid-column-row;
}
#homeMain {
#include grid-row;
}
#homeMain-left {
#include grid-column(12);
#include breakpoint(medium) {
#include grid-column(8/12);
}
}
#homeMain-right {
#include grid-column(12);
#include breakpoint(medium) {
#include grid-column(4/12);
}
}
#homeBottom {
#include grid-column-row;
}
When I view the page on a desktop-sized screen, there is one line of css that's causing the homeBottom div to float right, which is throwing off the layout. The line of CSS causing the issue is here:
#homeBottom:last-child:not(:first-child) {
float: right;
}
Since a column-row is meant to be a single element acting as a row and a column, in other words, a full width container, I'm confused why I would ever want it to have a float property. It seems that this line of CSS makes sense for columns, but not for column-rows, since the column-row behavior shouldn't depend on whether or not it's the last-child of its parent.
Is this a bug, or am I using the column-row incorrectly? I'm just trying to avoid setting homeBottom as a grid-row, and then including an extra html element inside of it just to act as a full-width grid-column. As you can see, this isn't necessary for homeTop, even though it's also using the grid-column-row mixin. This makes me think I may be using it incorrectly.
I guess another option would be to define my own my-grid-column-row mixin that includes the float declaration:
#mixin my-grid-column-row {
#include grid-column-row;
float: none !important;
}
But this seems like it shouldn't be necessary.
It looks like this is an issue with foundation:
http://github.com/zurb/foundation-sites/issues/8108
My workaround for now is to override the grid-column-row mixin with the following:
#mixin grid-column-row(
$gutter: $grid-column-gutter
) {
#include grid-row;
#include grid-column($gutter: $gutter);
float: none !important;
}
I'm using Compass in my CSS and I am trying to specify part of my Sass Css to be run only in Chrome. I tried #include with-prefix but it dosen't seem to work. Is there anyway to run these specific animations only for specific browsers, in this case chrome?
#include with-prefix(-webkit) {
.slideFromRight {
&.ng-enter {
#include animation(slideFromRight ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
&.ng-leave {
position: fixed;
#include animation(slideToLeft ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
}
}
Question
Why is the bootstrap-sass makeColumn(X) mixin not behaving the same as the Bootstrap .spanX class? For example, a class using makeColumn(9) does not look the same as the same div using a .span9 class.
Context
I'm building an application using Ruby on Rails and having major problems trying to use the mixins in the bootstrap-sass gem.
When I use the classes I've defined I don't get the same styling as if I were to just use the .span class in Bootstrap. I've looked all over the Internet and can't figure out what's wrong. I'm guessing it's something fairly obvious that I'm just not seeing because I've been staring at a screen for too long.
HTML
<div class="content">
<div class="main">...</div>
<div class="sidebar">...</div>
</div>
scss file
#import "bootstrap";
body {
.main-content {
#extend .container;
}
.content {
#include makeRow();
}
.content .main {
#include makeColumn(9);
}
.content .sidebar {
#include makeColumn(3);
}
.feature {
#include makeColumn(4);
}
padding-top: 60px;
}
footer {
#extend .container;
}
#import "bootstrap-responsive";
Thanks for the help.
I'm not sure what SASS Adaptation you're using but in the one I'm using (https://github.com/anjlab/bootstrap-rails), there isn't a lot of documentation and the format changes.
Instead of #include makeRow(); you have to use:
#include make-row();
Instead of #include makeColumn(3); you have to use:
#include make-column(3);
more documentation can be found here: https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_mixins.scss
From the Susy docs: http://susy.oddbird.net/guides/reference/#ref-grid-background
SUSY GRID BACKGROUND
Show the Susy Grid as a background-image on any container.
// susy-grid-background();
.page { #include susy-grid-background; }
If you are using the element as your Container, you need to apply a background to the element in order for this grid-background to size properly.
Snippets of my css:
$total-cols : 16;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
html { background: #fff no-repeat left top; }
.standard {
#include container;
#include susy-grid-background; /* Susy */
and in my Haml:
%body.standard
Whatever I've tried the grid always shows 12 columns. Would anyone be kind enough as to point me in the direction I need to go to get this debug tool to work?
susy (1.0.rc.1)
compass (0.13.alpha.0)
If you have some breakpoints, you also need to address these directly in order to change the number of columns $susy-grid-background shows:
.page {
#include container ($total-columns, $break1, $break2);
#include susy-grid-background;
#include at-breakpoint($break1) {
#include susy-grid-background;
}
#include at-breakpoint($break2) {
#include susy-grid-background;
}
}
$total-cols should be called $total-columns. The name of that variable changed in 1.0. The default setting is 12 columns, and you are not actually overriding that anywhere.