How to use semantic grid in Foundation? - sass

I am having some trouble with the semantic grid mixin. I'm am sorry if I am missing something obvious, but I seek you help. I have the following code:
index.html
<header>
<a id="logo" href="#">Logo Link</a>
<div id="search">
<span class="prefix">#</span>
<input type="text">
</div>
</header>
app.scss
header { #include outerRow();
#logo { #include column(8); }
#search { #include column(4); #include innerRow(collapse);
span { #include column(3); }
input { #include column(9); }
}
}
This works correctly with the screen wide, but the prefix stretches to full width in narrow mode. I am a newbie in this adventure, but I believe it recalculates on it own for narrow screens, or do I have to a #media for this to work properly?
to new to post images so here are links:
Wide (correct) - http://imgur.com/dtsGtxM
Narrow (foofed) - http://imgur.com/jX4D1NU
edit: Well the solution seems to be:
span { #include column(3); #include mobileColumn(1); }
input { #include column(9); #include mobileColumn(3); }
although I don't fully understand it. Still not sure whether calling for a new nested row in the column is acceptable, as below, but it seems to work:
#search { #include column(3); #include innerRow(collapse);

Foundation has a default breakpoint at 768px using media queries.
So, when viewing on the larger device it uses the column() mixin and then on smaller screen size it uses the mobileColumn() mixin.
Also, setting a div (in your case #search to be a column and an inner row is going to produce unexpected results. You should wrap your columns in a separate inner row container:
<header>
<a id="logo" href="#">Logo Link</a>
<div id="search">
<div class="inner-row">
<span class="prefix">#</span>
<input type="text">
</div>
</div>
</header>
and
header { #include outerRow();
#logo { #include column(8); }
#search { #include column(4);
span { #include column(3); }
input { #include column(9); }
}
.inner-row { #include innerRow(collapse); }
}
http://foundation.zurb.com/old-docs/f3/media-queries.php

Related

Media selectors "extending" bootstrap SASS classes

On a site I'm developing w/ Bootstrap/SASS (SCSS) I'd like to have a Bootstrap button group (.btn-group) become a vertical group (.btn-group-vertical) using media selectors, rather than JavaScript. However, the well-known issues that #extend will not work inside a media selector, has left me befuddled. E.g., this raises an error:
.navGroup {
#extend .mt-1;
#extend .btn-group;
#include media-breakpoint-down(xs) {
#extend .btn-group-vertical;
}
}
If I were developing from scratch I'd rewrite .btn-group and .btn-group-vertical to simply #include a mixin, so that I could do something like:
.navGroup {
#extend .mt-1;
#include media-breakpoint-up(xs) {
#include btn-group-include();
}
#include media-breakpoint-down(xs) {
#include btn-group-vertical-include();
}
}
I would rather not change the original bootstrap _buttonGroup.scss file, since it will be overwritten at the next release/update. So I'm currently needing to copy and past the whole .btn-group-vertical definition:
.navGroup {
#extend .mt-1;
#extend .btn-group;
#include media-breakpoint-down(xs) {
flex-direction: column;
align-items: flex-start;
/* etc. for 70 lines */
}
}
Is there a way to easily convert an existing class definition into a mixin within Sass that would solve such a problem?
You could try using the flex classes. Sorry, I don't know the markup for the navGroup.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
You can apply these per breakpoint. Checkout https://getbootstrap.com/docs/4.0/utilities/flex/

Foundation flexbox issue using scss

.test {
#include flex-grid-row();
.eight { #include flex-grid-column(8); }
.four { #include flex-grid-column(4); }
}
<div class="test">
<div class="eight" style="background: red; height: 150px;"></div>
<div class="four" style="background: blue; height: 150px;"></div>
</div>
Given the above code why does the grid stack and not display side by side? if I remove the 4 from flex-grid-column() then is displays as I would expect as the .four takes up all the available space, but why not if I specify how many columns?
The markup looks correct and works great in my flex project.
You can make sure you have the flex-grid setup in app.scss
[]
and
After importing Foundation via npm #import "node_modules/foundation-sites/scss/foundation.scss"; I then needed to #include foundation-everything(true); Passing true switches to flexbox.
I found that out on this page http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode

Susy. Wrong margins for columns in fixed layout

I am making a fixed layout with Susy and stuck with this issue when the second column has a right margin even if I specify that they are nested within a container.
Codepen
HTML
<div class="control">
<label class="control__label">Email</label>
<input type="text" class="control__self">
</div>
CSS
#import "susy";
$fixed: (
box-sizing: border-box,
math: static,
columns: 12,
column-width: 60px,
gutters: 20px/60px,
gutter-poistion: inside
);
#include with-layout($fixed) {
.control {
#include container(12);
.control__label {
#include span(3 of 12);
}
.control__self {
#include span(9 of 12);
}
}
}
Changed
.control__self {
#include span(9 of 12);
}
to
.control__self {
#include span(9 of 12 last nest);
}
and works like a charm.

reorder columns with bourbon neat (tablet, desktop)

I'm trying to make a page with "content" on the top (for mobile view) and the sidebar below.
Here is my html:
<section>
<div class="homepage-content"></div>
<div class="homepage-sidebar"></div>
</section>
Here is my scss using bourbon:
section {
#include outer-container;
}
.homepage-content {
#include span-columns(8);
#include shift(4); /* this block should be on the RIGHT on desktop/tablet view */
}
.homepage-sidebar {
#include span-columns(4);
#include shift(-8);
}
I'm under the impression that "shift" shifts to the right (positive) and then to the left for negative numbers.
So I would think that the "content" is 8 columns wide and then shifted over to the right. So my content would be on the right-hand side.
What seems to be happening is that my "content" div is now sitting on top of my "sidebar" div:
Try to apply a float: right; on your .homepage-content:
.homepage-content {
#include span-columns(8); float:right;
}
.homepage-sidebar {
#include span-columns(4);
}
See: http://sassmeister.com/gist/a96439d9062ec6fddd73

How to render a grid element in front or behind an overlapping sibling element using Singularity GS

Is it possible to specify an overlapping grid element to be rendered in front or behind its siblings?
My code below will render the .l-branding div behind the .l-header. I need .l-branding before .l-header in the source order so it renders above .l-header (slideshow) on mobiles.
HTML:
<div class="l-container">
<div class="l-branding">
<!-- logo -->
</div>
<div class="l-header">
<!-- image slider -->
</div><!-- end .l-header -->
<navigation class="l-navigation" role="navigation">
<!-- navigation -->
</navigation>
</div><!-- end .l-container -->
SCSS:
I can use position:absolute; and z-index:10 for the $tab & $desk breakpoints but would like to know if there is a better way.
///////////////////////////////////////////////////////////
//
// HEADER
//
///////////////////////////////////////////////////////////
.l-header-wrap {
#include clearfix;
}
.l-header {
#include grid-span(4,1);
#include breakpoint($tab) {
#include grid-span(12,1);
min-height:$vert-spacing-unit * 5;
}
#include breakpoint($desk) {
#include grid-span(18,1);
}
}
///////////////////////////////////////////////////////////
//// BRANDING
///////////////////////////////////////////////////////////
.l-branding {
#include grid-span(4,1);
#include breakpoint($tab) {
#include grid-span(11,1);
//position: absolute;
//top:1em;
}
#include breakpoint($desk) {
#include grid-span(17,1);
}
}
///////////////////////////////////////////////////////////
//// NAV
///////////////////////////////////////////////////////////
.l-navigation {
#include grid-span(4,1);
#include grid-background;
#include breakpoint($tab) {
#include grid-span(12,1);
//margin-top:-100px;
//position: absolute;
//bottom:0;
}
#include breakpoint($desk) {
#include grid-span(18,1);
//margin-top:-100px;
}
}
You cannot do this with singularity per se, but it can be done with normal CSS. The answer is what you've already done, absolute positioning and z-index. A quick preview of what it would look like is here on CodePen.
I'm not entirely sure if even Flexbox will solve this issue, I believe this is something that just needs to be solved using position and z-index as that's what you're asking to do.

Resources