.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
Related
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/
I am working with Neat the first time. I am wondering how I can accomplish a padding for the outer .container. When giving the container a padding, the width of the columns within aren't right anymore and shift to the right/left.
Like this one:
<header>
<div class='container'>
<div class='logo'>
<img alt='Logo' src='assets/images/logo.png'>
</div>
</div>
</header>
.container
{
#include outer-container;
padding-left: 15px;
padding-right: 15px;
}
header
{
.logo
{
#include span-columns( 3 );
}
}
I know I could give the first element in the container a padding and the columns would adjust, but that isn't a consistent solution imho.
What is the best practice to use a consistent padding to the outer container without changing the columns within?
Thank you very much in advance!
This is currently not possible in Neat 1.6, but it is a known issue that looks like it might be solved in Neat 2.0.
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 just started using compass blueprint and I'm making a simple frame with the following:
$blueprint_grid_columns: 12;
$blueprint_grid_width: 60px;
$blueprint-grid-margin: 20px;
#import "blueprint";
.frame {
#include container;
.header{
#include column(12);
background:#000;
height:100px;
}
.left_bar{
#include column(1);
background:#ccc;
height:450px;
}
.content{
#include column(10);
background: #000;
height:450px;
}
.right_bar{
#include column(1);
backgrounf:#ccc
height:450px;
}
}
Html:
<body>
<div class='frame'>
<div class='header'>
</div> <!-- end header -->
<div class='left_bar'>
</div> <!-- end left_bar -->
<div class='content'>
</div> <!-- end content -->
<div class='right_bar'>
</div> <!-- end right_bar -->
</div> <!-- end frame -->
</body>
The right_bar isn't fitting into the space for the last column but rather appearing exactly under the left_bar. Can anyone tell me why? Any help greatly appreciated.
C
I think you have to add true to the header and right_bar classes:
.header{
#include column(12, true);
....
.right_bar{
#include column(1, true);
This lets compass know that it's the last column, and that the margin needs to be zeroed out.
I figured that out. I added some borders that pushed the grid out of whack a bit. I fixed it by overriding widths but it seems a bit hacky. Is there a blueprint way to take borders into account?
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 :)