It appears to me that the default behavior for Neat should be that each span column should have a margin (or gutter) between adjacent span columns. Every example that I've found online simply installs Neat, does a quick demo, and the result has a gutter between adjacent elements. No settings changed.
Would anyone know why that is not happening for me? I have a clean install of Bourbon and Neat. My html is as follows...
<footer class="col-2">
<section class="left">
content
</section>
<section class="right">
content
</section>
</footer>
My sass looks like...
.col-3 {
#include outer-container;
.left {
#include span-columns(6);
}
.right {
#include span-columns(6);
}
}
Here's a link to the rendered output:
So I actually have 2 questions.
Why are the columns stacked on top of each other, even if I float the left column?
Why are my columns ignoring the gutter between each column?
It looks like you misnamed your class (div has class .col-2 and scss has .col-3) and since you nested your classes the column mixin isn't applied to child div.
code works with matching class names here http://sassmeister.com/gist/0c1963fef94a14d5268f
The issue was related to my normalize stylesheet. Had some rules overriding Neat.
Related
Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.
I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).
Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.
I think it is just the way I am writing the #include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success.
I know this is probably going to be a simple fix that I am just not seeing.
Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.
SCSS:
#import 'susy';
#import 'breakpoint';
$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);
.container {
#include container;
#include with-layout($layout1);
background: orange;
#include breakpoint(600px) {
#include with-layout($layout2);
background: red;
}
#include breakpoint(1000px) {
#include with-layout($layout3);
background: blue;
}
}
.testbox {
#include span(1);
}
html:
<div class="container">
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
</div>
with-layout only changes the settings used for Susy mixins/functions nested inside it:
#include with-layout($layout2) {
// code nested here will use the $layout2 settings
}
You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what #cimmanon was trying to explain in the comments. Similarly, #media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.
Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.
// This will give you different spans at different breakpoints:
#include breakpoint(600px) {
#include with-layout($layout2) {
#include span(1);
background: red;
}
}
// you can also use the susy-breakpoint shortcut:
#include susy-breakpoint(1000px, $layout3) {
#include span(1);
background: blue;
}
I have a dynamic form of sorts that I'm laying out with a css flexbox. I'm using flex because I don't know until runtime how many or what type/width the components are in the form. I'd prefer for the first "column" to have left-aligned labels and every subsequent column to have right-aligned ones, but I can't really think of any way to do this. Any suggestions?
Basic example of this form (with everything right-aligned). Be sure to pull the divider left to make the rendered output as large as possible to see what the form looks like with more than just one column: http://jsfiddle.net/27Gfd/
//basic markup for one form component (called a row). See JS fiddle for more
<div class="container">
<div class="row"> //I might stack next to another "row" because I have fixed width based on component type
<div class="miniflex"> //I'm another flex container to layout label/input
<div class="label">Label 1</div>
<div class="input">
<input type="text" />
</div>
</div>
</div>
at the moment no, you can't
example pseudo code (just an idea, it doesn't work!)
.flexContainer::first-flex-line > div {}
.flexContainer::last-flex-line > div {}
.flexContainer::nth-flex-line(odd) {}
.flexContainer::nth-flex-line(3n+1) {}
this doesn't exist yet for a precise reason
.flexContainer::nth-flex-line(3n+1) > div {width:100%}
changing the size of the flex-items may affect the container's wrapping. so that's a circular loop. not a nice thing! :P
if you can think of a solution and you want it implemented you could ask to the CSSWG using the newsgroup, or even on chrome's and firefox's bug trackers
Change the css:
.ex3 .label{
text-align: right;
/* ... */
}
to:
.ex3 .label{
text-align: left;
/* ... */
}
Or, if you're not certain that the first column is a label, use:
.miniflex div:first-child {
text-align: left !important;
}
(You should probably avoid using !important but I can't offer a precise alternative without knowing the logic behind the markup.)
Or if you might have labels in places other than the first column
.ex3 .label:first-child {
text-align: left;
}
I'm using bootstrap with less and I'm currently trying to make web semantic.
HTML part:
<!-- our new, semanticized HTML -->
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
Less part:
/* its accompanying Less stylesheet */
.article {
.makeRow(); // Mixin provided by Bootstrap
.main-section {
.makeColumn(10); // Mixin provided by Bootstrap
}
.aside {
.makeColumn(2); // Mixin provided by Bootstrap
}
}
But when I take a look at the rendered html page... my article take less space than a span12
I can also put a .makeColumn(10) and .makeColumn(4) and it will stay on the same line.
It's like it was a 14 grid column and not a 12 grid column.
Am I missing something?
No. If your required number of columns is n, the .makeColumn mixin and the .span (#grid > .core > .span) mixin both calculate width as follows:
(#gridColumnWidth * n) + (#gridGutterWidth * (n-1))
which is the width you'll need to set your element to a width of n columns on the grid.
If n = 6, it calculates all column widths and gutter widths from the left edge of your grid to the right-hand edge of column 6. 6 columns and 5 gutters.
.span only does width, .makeColumn also adds a float: left, and has an optional #offset argument that which isn't important to your current problem, but which allows you to add columns to the left of the element by adding a margin: left.
As #sody says above, wrapping your existing elements in a .container should fix your problem.
And I agree with #kleinfreund on using the html elements where you can:
<div class="container">
<article>
<div class="main-section">Bootstrap rocks
<aside>
By the way...
</aside>
</div>
</article>
</div>
I hope that helps.
I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.
CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}
You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!
If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.