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/
Related
.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
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
OK I've searched a lot but I am now out of options and not having a degree in Hogwarth cannot figure it out.
First, I know it's common typographic problem when there are divs with content inside one main wrapper div and they don't want to expand to the height of parent container.
I have minimal example that works here - white and yellow divs extend correctly with the main container (background green).
However...I am working currently on Jekyll 2-column template for my blogging page using Compass with Susy for grids. And things are going complicated.
my html:
<body>
<div id="root" role="mainwrapper" class="container">
<div role="sidecontent" class="sidebar">
nawigacja jakas
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div role="zawartosc" class="main">
cos cos cos cos
</div>
</div>
</body>
and my computed style.css
Susy grid setting as follow:
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
// Podstawowa typografia
$total-columns: 12;
$gutter-width: 1em;
$column-widht: 5em;
$grid-padding: $gutter-width;
$development:true;
$border-box-sizing:true;
$max-width: 1200px;
#import "susy";
[class^="container"] {
#include container;
overflow:hidden;
#include susy-grid-background;
#include box-sizing(border-box);
}
[class^="sidebar"]{
#include span-columns(3,12);
min-height:100%;
#include box-sizing(border-box);
}
[class^="main"]{
#include span-columns(9 omega,12);
min-height:100%;
#include box-sizing(border-box);
}
I know I am definitely missing something here but none of my friends was able to help me :(
Getting 100% height in CSS can be very tricky and unreliable, but I think I tracked down the actual difference between your two examples (it isn't Compass or Susy). The sample that doesn't work is missing height: 100%; settings on the html, body, and container elements. Add that, and it will work.
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
I'm desperately trying to get a site mocked up with Susy. I fear I may just be missing something obvious but when I nest items in my Susy grid each column percentage width and margin seem to be slightly overshooting such that they add up beyond 100% and wrap to the next line. In the following example the #main_headernav is set to span 8 of 12 columns and each li within should fill 2 of 8 columns. Each li has a computed style as below which adds up to more than 100% and causes the last item to wrap
width: 22.58065%;
float: left;
margin-right: 3.22581%;
This is is the offending example:
<header id="main_header">
<img id="main_banner" src="images/test_banner.png" alt="Test">
<nav id="main_headernav">
<ul>
<li>About</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</header>
And SASS:
$total-columns : 12;
$column-width : 60px;
$gutter-width : 20px;
$grid-padding : $gutter-width;
//Set border-box sizing - also alters SUSY grid math
//#include border-box-sizing;
// Main Container
#main_container {
#include container;
}
#main_header {
#include span-columns(12 omega);
#main_banner {
#include span-columns(12 omega,12);
}
#main_headernav {
#include span-columns(8 omega,12);
li {
#include span-columns(2,8);
}
}
}
Ok so I knew it would be my problem :)
Of course it is necessary to use the nth-omega mixin on every 4th li child to avoid the extraneous margin and prevent wrapping.
And it only took 2 hours of staring at the same screen :)