I've been working with Susy for a while now and came across a use case that I can't seem to figure out. The best way to explain it is to use Twitter as an example.
If you look on their site you'll see they use a three column standard layout with a break point at 1250. After that point is reached, the entire right most column 3 goes underneath column 1.
How is this done with pure CSS in Susy 2? When I look at twitter it seems like they are physically moving the content from column 3 into column 1. I'm assuming this is all done with JS but id rather do it a bit more clean. Ideas?
Looks like it was as simple as using breakpoint as another mixin for my columns. I simply added
#import "breakpoint";
#include breakpoint (new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}
Related
I'm currently having a problem trying to set to the left every sublist of the navigation bar so that it aligns correctly bellow every sublist if there is more than 6 columns, the problem happens from the 7th list. I'm using bootstrap and every sublist have a size of 2 (so from the 7th as it passes the 12 column size it moves down, as expected)
What I'm getting a result is
And the expected result is
Piece of code used per list:
<div class="sub-navigation-section col-md-2">Ul and li inside</div>
The CSS that is attempting to do the expected result is a Float:left;
Bootstrap uses a 12 column grid system so you won't be able to divide that up equally into 7 columns. You could do this by creating your own class that has a width of approx 14.285% (100/7) and the same properties as the bootstrap col-* classes (float left etc)... but remember you'll need to cater for different viewports etc
If you wont use javascript, you can alternatively use CSS3´s column-gap and column-width like in this example:
https://www.bootply.com/118335
It floats the boxes like waterfall layout. Hope this helps you.
Does anyone know if this can be accomplished with bootstrap mixins.
columns( number of parent)
Something like what Neat has.
In Neat the Columns mixins works like these
#mixin span-columns($span, $display: block) { ... }
Where $span can be 3 or something like 3 of 12
Specifies the number of columns an element should span. If the
selector is nested the number of columns of its parent element should
be passed as an argument as well.
thanks
When i understand your question well you should read Less mixins and variables.
You will find the mixins to generate semantic grid columns in the less/mixins/grid.less file of Bootstrap's source code.
To generate a div that overspans 3 columns you should use for instance:
div.three{
.make-xs-column(3);
}
Notice the mobile first nature of these mixins. With the above code the xs mixin generate CSS code which will be applied for all screen width (no media queries).
When using:
div.three{
.make-xs-column(6);
.make-sm-column(3);
}
You div will overspan 6 columns for screen width below the 768 pixels (thexs grid) and 3 columns above the 768 pixels, the sm grid and up (explicit calling the larger grid mixins is not needed unless you want to overspan a difference number of columns). It's inportant to start the mixins for the smaller grids before the larger grids, see also: Bootstrap 3 mixin multiple make-*-column
I am trying to use nth-child to target 1,6, 7,10, 13 ect. and some style. I was targeting them individually but this wont work as the content will be automatically generated.
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
What would be my best option for achieving this ?
Below is the css i am using at the min:
div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
So the same situation repeats every 6 items. Using :nth-child(an+b), you now know that a=6.
2 elements are selected for each group of 6: 1 and 6 (and then 7 and 12 (not 10), 13 and 18, etc). To select the first one, b=1 is OK. To select the 6th one, b=0 or b=6 are OK
That leads to:
li:nth-child(6n+1),
li:nth-child(6n) {
/* sth different */
}
Codepen: http://codepen.io/anon/pen/cypAn
You should use nth-child if you just want to use CSS. See this article here. There is a nice table at the bottom that can help if you are a visual learner.
I have an Rails app I am building with Foundation. I am having trouble figuring out how to display an arbitrary number of columns per row and keep it responsive in the small/medium/large layouts.
For example, lets say I have a model Department which has many Employees. I am trying to build the department page and display a list of the employees in the department. One department may have 10 employees. Another may have 6. It's arbitrary.
I want to do 4 columns in large, 2 columns in medium and 1 column in small. (See my wireframe below). However, the columns need to be wrapped in a div.row. This requirement means I have either of the following two situations:
Case #1 (jsfiddle) I have 2 elements per row and the large layout only gets 2 elements because it is getting cleared by the .row.
Case #2 (jsfiddle) I have 4 elements per row and the columns don't clear properly when in the 2-column, medium layout because there are 4 in a row.
This seems like it should be a pretty standard situation but I cant seem to figure it out. How do I do this? Is Foundation the wrong tool?
Media Queries and CSS might do the trick:
// medium
#media only screen and (min-width: 40.063em) and (max-width: 64em) {
.row > div:nth-child(2) {clear: left;}
}
With 4 elements per row
http://quirksmode.org/css/selectors/nthchild.html
http://foundation.zurb.com/docs/media-queries.html
I'm starting to use zurb foundation and would like to know what the "foundation way" of sizing inputs and selects is.
Basically i got row with four columns and in each one a form element.
By default every element has a different height.
Please refer to this screenshot i took:
So again, what would be the zurb foundation way to size the elements evenly?
Thanks in advance!
Take a look at this Foundation form mixin: form-element
If you are using SASS, you can do something like this:
your_styles_file.css.scss
select {
#include form-element;
}
Doing so, you'll have all form inputs and selects with the same look and feel.
Beware of the width property set by this mixin, which is 100%.