How do I make a fixed positioned element work with Neat grid system? box3 is an element with fixed position, I didn't give it a width because I want it to fit in the grid with span-columns(6) and shift(3), so it is centered. Anyway can make this happen? Any help would be appreciated.
.test {
#include outer-container;
#include padding(15px);
border: 1px solid red;
.box1 {
#include span-columns(6);
border: 1px dashed green;
height: 100px;
}
.box2 {
#include span-columns(6);
#include omega;
border: 1px dashed green;
height: 100px;
}
.box3 {
#include span-columns
background:red;
opacity:.5;
#include position(fixed);
padding:30px;
color:white;
}
Live code is here
Your live code does not reflect what you have above.
As for the fixed positioning breaking the grid, fixed positioning is always relative to the window, not an element.
To fix, put a wrap inside of your ".box3" class, position that fixed, and give "box3" a height.
Related
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
Singularitygs Grid overlay Not Showing
This is driving me up the wall, i've finally got singularity working but can't seam to show the grid - if someone could help that would be great.
Not bothered about the fancy toggle solution just want to see the grid-overlay desperately!
My HTML
<body data-development-grid="show">
My SASS
#import "singularitygs"
// Singularity 1.2 Syntax
#include add-grid(12)
#include add-gutter(1/3)
.container
#include background-grid
max-width: 940px
margin: 0 auto
min-height: 100%
.one
background-color: black
width: 100px
height: 100px
top: 2px
left: 5px
If it helps i'm using codekit.
Thanks in advance
Finally got it working. The solution is to apply sgs-change ('debug', true).
Here's my Sass code if anyone needs it:
#import "breakpoint"
#import "singularitygs"
//////////////////////
// Set up the grid //
//////////////////////
+add-grid(12)
+add-gutter(1/3)
+add-gutter-style('split')
+sgs-change ('debug', true)
body
#include background-grid
Demo: http://sassmeister.com/gist/fa0ac03b02e604f6bdf6
I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using #include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?
Here's my html:
<section class="blog">
<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
</article>
<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>
And here's my SASS: `
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1
#import 'bourbon/bourbon'
#import 'neat/neat'
#import 'variables'
///////////////////////////
html
#include linear-gradient(black, gray)
height: 100%
body
background-color: $baseColor
font-family: $type
body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
//////////////////////////////
.blog
#include outer-container
aside
#include span-columns(4)
background: $thirdColor
//height: 100%
//#include fill-parent()
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
Thanks for reading.
EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.
One solution to equal column height is making all parents to height:100%.
Using your example:
html, body
height: 100%
.blog
#include outer-container
height: 100%
aside
#include span-columns(4)
background: $thirdColor
height: 100%
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%
This should work
To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.
Like the following:
.blog {
height: 100%;
aside {
min-height: 100%;
}
}
and it should work.
fill-parent only makes it full width, not full height of its container. It is equivalent to this:
.element {
width: 100%;
// Also sets box-sizing if global $border-box-sizing is set to 'false'
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source
I've this mixin applied on a menu, I don't want see on small resolution:
#mixin visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
This working fine. But on bigger resolution I will show this menu. Obviously I can restyle and revert these attributes (I'm allready done it). But I was thinking if is there some built-in way to remove mixins – something like #uninclude visuallyhidden;.
Or is there a better way how to do this?
Thanks for all suggestions.
Use media queries to only apply the styles when appropriate. Doing and undoing bloats your CSS unnecessarily.
#media (max-width: 45em) {
.foo {
#include visuallyhidden();
}
}
Somehow it seems i run into issues on that image matrix example again and again i deal with in combination with Susy. :/ In preparation of finishing the project by applying media queries to it making things responsive i initially inspected the current state and resized the browser window. There happened the following:
https://dl.dropbox.com/u/8578/Resize.mov
Both shown image matrices consist of raster images. The black image matrix resizes and enlarges without a problem. But the second matrix has issues on enlarging again. Is that a plain CSS issue or more Susy related? And is there a way to fix it? :/
The basic Susy settings are:
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
For images the following was applied:
img{
width:100%;
max-width: 100%;
height:auto !important;
}
The HTML part for the first matrix looks like that (i've entered only one li element - the other 27 differ only in title and linked images):
<ul class="customers sectionwrap">
<li><a><img title="Company" src="img/logo.png" alt="Logo" /></a></li>
</ul>
The Susy and layout relevant CSS parts for the first matrix (7x4) look that way:
.customers {
#include with-grid-settings($gutter: 0.1%){
li {
margin-right: -100%;
#include span-columns(2,14);
#include nth-omega(7n);
#for $g from 1 through 28
{
&:nth-child(#{$g}){#include push(0);}
}
}
}
}
The HTML part for the second matrix looks like that (i've entered only one li element - the other 8 differ only in title and linked images):
<ul class="moodlegrid sectionwrap">
<li><a class="ajax1" href="projekt1.html"><img title="Projekt1" src="img/1.jpg" alt="Projekt1" /><img title="Projekt1" src="img/2.jpg" alt="Projekt1" /><span class="spiceup">Zum Projekt</span></a></li>
</ul>
The Susy and layout relevant CSS parts for the second matrix (3x3) look that way - they are split because they are located in different partials:
.moodlegrid{
#include with-grid-settings($gutter: 0.8%){
li{
margin-right: -100%;
#include trailer(1 / 2);
#include span-columns(6,18);
#include nth-omega(3n);
#for $i from 1 through 9
{
&:nth-child(#{$i}) {#include push(0);}
}
}
}
}
.moodlegrid{
li{
a{
position: relative;
float:left;
display:block;
img:nth-child(1){
float:left;
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 42%;
left: 34%;
z-index:101;
padding: 0.24em;
#include border-radius(5px, 5px);
#include box-shadow(black 2px 2px 10px);
}
}
}
}
I'd bet that your problem comes from floating the a tags that wrap the images. When you float something it creates a new layout context. If you don't set a width, the float collapses to the smallest possible size. Your img setting width: 100%; is figured as 100% of the collapsing a rather than 100% of the li. You can either remove the float or set width: 100%; on the a as well.