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 :)
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/
.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
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.