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.
Related
I'd like to create a flexible responsive grid using Bourbon/Neat, that not only varies the number of columns, but also allows me to configure the gutter spacing between columns, across breakpoints.
So in theory, something like this would work:
#import "mixins/neat/neat-helpers";
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;
$gutter: 5%;
$column: 5%;
$gridS: new-breakpoint(min-width 0 32);
$gutter: 1.5625%;
$column: 3.515625%;
$gridL: new-breakpoint(min-width 48em 20);
This currently gives me a flexible column count, but the column:gutter proportion remains the same.
I've investigated singularity.gs but would rather not introduce Compass as a dependency.
Does anybody have a fix/workaround?
if you look at the core of neat, you see
// Flexible gutter
#function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
#return percentage($gutter / $container-width);
}
and if you look at _span-columns.scss you see:
margin-#{$direction}: flex-gutter($container-columns);
so you could take a grid and if you make the columns larger than 12. ie 24 you half the size of that margin. and if you double that to 48 its 1/4 the original. etc.. so you have the ability to size your columns to any total size and get your gutters flexible based on that. you could always reverse the effects or try different column sizes to get various results. would this help any? or at least the theory behind it?
div.container {
#include outer-container()
}
div.small {
background: red;
#include span-columns(3 of 12);
}
div.small-alt {
background: blue;
#include span-columns(6 of 24);
}
div.small-crazy {
background: green;
#include span-columns(36 of 144);
}
<div class="container">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="container">
<div class="small-alt">1</div>
<div class="small-alt">2</div>
<div class="small-alt">3</div>
<div class="small-alt">4</div>
</div>
<div class="container">
<div class="small-crazy">1</div>
<div class="small-crazy">2</div>
<div class="small-crazy">3</div>
<div class="small-crazy">4</div>
</div>
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 want to connect two containers with jsPlumb. Every container should have an structure with several sub-div´s. You can see it at fiddle enter link description here
An container looks like this:
<div class="window" style="left: 20px" id="container0">
<div class="connect" id="c0_I0">In0</div>
<div class="connect" id="c0_I1">In1</div>
<div class="connect" id="c0_O0">Out0</div>
</div>
And every .connect-element get an anchor from jsPlumb by this code:
jsPlumb.addEndpoint(
$('#c1_I0'),
anEndpointDestination
);
The container is styled by this css:
background-color: #AADD88;
border-top: 1px solid #555555;
color: black;
position: absolute;
My problem: If I´ll connect container0-Out0 with container1-In1 the drawn line connects conatiner0-Out0 with container0-In1. I tried several things because it should be possible if I understand the doc but I failed.
This doesn´t help
This I din´t understand?!
What is the problem? I need this container conept and normaly I want to extend it to from
<div class="window">
<div class="Inputs"> <-- This level is actual not implemented, but it would be nice to have for the UI
<div id="In1"></div>
</div>
</div>
UPDATE:
After three days of reading, searching and so on...I decided to ask my question...and some times it the answer is to ask the question:
All I had to do was setting the default value for container...and I did this several times but for the wrong class.
jsPlumb.Defaults.Container = $("body");
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 :)
i am struggling with the CSS of an unordered list which i want to use in order to provide links to a number of online profiles. the list is displayed in the footer of every page, like so (bottom right): http://www.alexbrunner.com.
my understanding is the following:
either, i make use of the CSS property 'display:inline-block;' - but given its relatively poor cross-browser support i would prefer not to.
or, i float the list and define the 'inline'-characteristic on the ul-level - here, however, is where my trouble begins.
if i float the li-elements left, it is obviously positioned on the wrong side of the text. if i float the li-elements right, obviously each item is floated to the right of the following item, which results in my list being displayed in the reverse order.
the html is:
<div id="footer-right">
<p>E-mail me at mail#alexbrunner.com<br />or visit my profiles at <ul id="profiles">
<li><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></li>
<li><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></li>
<li><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></li>
<li><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></li>
</ul></p>
</div>
and the css is:
#footer-right { float:right; width:17em; border:0; border-top:1px dotted #333; text-align:right; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-right p { display:inline; font-size:.75em; color:#666; }
#footer-right ul { display:inline; margin:0; padding:0; }
#profiles li { float:right; list-style:none; }
of course, i could just reverse the order in my html document and start with the last - but i really want to figure out what is the semantically correct way of doing this. i am sure there is a better way than what i have applied and i would really appreciate any comments on this.
eventually i want to put all those icons in a sprite - but i figure i have to solve this issue here first.
thank you!
best,
alex
Try this instead:
#profiles li { display: inline; list-style:none; }
http://jsfiddle.net/AcTu7/1/
This should display semantically and you don't have to bother with floats.
Not sure from reading if this is what you are looking for:
http://jsfiddle.net/RSMFw/
To maintain the desired display order, apply float: left; to ALL of the child elements of your div#footer-right, i.e: #footer-right * { float: left;}
Example: http://jsfiddle.net/wqneM/