Iv'e using Zurb Foundation like a pretty platform for fast develop light projects. And today i've stucked on one thing.
I don't know how to better call it, easer to show...
http://oi61.tinypic.com/2dkhfuq.jpg
So, it happens when above column have too much content.
Also... columns must have non-fixed height and don't use block-grid! TY!
There are 2 ways to interpret what you're asking for. The first is that you're having a floating issue and the columns are stacking to the right. If you want the white space gone, you'll need a JS plugin like Masonry or Isotope.
The other way to interpret this is that you want these to be at the same height. There are 2 ways to go about this with Foundation: Either wrap each row with:
<div class="row">
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
<div class="small-12 medium-4 columns"></div>
</div>
The row class basically runs a clear once it starts so it will give them space. You don't need to use my syntax but it would be a working example. If you want to have all the articles be the same height based on the biggest one, Foundation has a great plugin built in called Equalizer.
Equalizer and my column syntax rely on using Foundation 5.
Related
My HTML code is organized in this way:
<div class="Container">
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
</div>
And my CSS is organized as such:
.Container
lost-utility clearfix
.Card:first-child
lost-waffle 1 1 15px
.Card:nth-child(n+2)
lost-waffle 1/2 2 15px
The result looks like the following:
My issue is that I am trying to get the first div to span 100% of the width, the way it shows in the image, and the rest of the divs to display 1/2 the width. I do not know how to get that second div to the left instead of to the right, and then the third div to the right and up, etc... Basically all the divs after the first div needs to be shifted by 1. I haven't been able to figure this out. Any help would be appreciated.
The issue here is caused by the cycle that LostGrid. Because LostGrid uses :nth-child as the means to select which elements to style, the top "Card" is the first in the cycle, and then the second "Card" takes the second place...when in your layout the second card should start the cycle instead of being second.
There are three options I came up with quickly to solve this.
Option 1
Use LostGrid and have containing divs around the different cards.
Option 2 Not use LostGrid but instead use the math it provides and create the layout in vanilla css.
Here's a CodePen with the three options: http://codepen.io/peterramsing/pen/YWrrjv
I'd lean towards Option 2 as LostWaffle is designed for equal card sizes.
Option 3? I included a third option. It works but it has some excess css that is outputted. But it's an idea.
I haven't run into an issue like this with LostGrid yet as I either use Vanilla css for this or would use containing divs. LostGrid is an amazing tool to use for creating Grids and it's built to help enhance the existing means that css has for creating grids. There are various times when LostGrid isn't the tool to use and with PostCSS it's great because it doesn't add bloat if you only use it a handful of times.
This might, however, be a possible feature add for LostGrid to have a bit more control over the cycle. I'll think on it a bit more.
Hopefully that helps and be sure to let me know if you think that cycle should have some additional customizations for it in later releases.
I'm writing a Bootstrap site and I was wondering if this is acceptable. The site looks how I want it to, but I was wondering if this is best practice?
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">
</div>
<div class="col-lg-6 col-lg-push-1">
</div>
</div>
</div>
The approach I'm taking is to use 1 offset for every two missing columns, and use a push for every missing column. What would be the best way to rewrite this for semantic purposes, if at all necessary.
Using Bootstrap offset is perfectly acceptable! What you are using it for (filling in missing columns) is perfectly acceptable too. They would not add it unless they didn't want you to use it.
If you where to not use offset then the only way to move stuff around would be margin (generally). The problem with that is that it ruins the point of using a grid system!
So IMO I think it is perfectly OK to use Bootstrap offset. I use it all the time in my website! :)
I am using zurb foundation and adding small-push-1 but it is also affecting the large panel size.
here is my div structure:
<div class="expertise-panel large-5 medium-5 small-push-1 small-10 columns">
</div>
anyone ever face the same problem..?
As far as I can see, you're trying to center the small column. Instead of using small-push-1, I think you should use the centered classes.
This would result in something like this:
<div class="expertise-panel small-10 small-centered medium-5 medium-uncentered columns">
</div>
Another option is to use the offset classes, in that case you should add 'small-offset-1' and 'medium-offset-0' to the class attribute.
Note that you automatically "inherit" styles from smaller classes. It isn't necessary to write 'large-5 medium-5', since medium-5 and large-5 both specify a width of 41.66667%. So if you don't add the large-5 class, the medium width class will be used.
This behaviour also works for the medium-uncentered class. Because I've added medium-uncentered to the expertisepanel, large/xlarge/xxlarge will also automatically become uncentered.
I have always worked under the Zurb's foundation logic for my grid systems. Now I'm trying bootstrap for first time in it's 3.0.2 version. One thing I don't understand is the structure of it.
While Zurb works like:
<div class="row">
<div class="twelve columns">
</div>
</div>
Bootstrap has a 3-step structure to get the very same result:
<div class="row">
<div class="container">
<div class="col-lg-12">
</div>
</div>
</div>
My question is, what is the "row" class standing for?, on css it only sets a couple of margins and also clear the layout with the pseudo :after element. Can someone please explain me the logic of this? I'm sure that row is there because of a reason, but I can't find it.
.container only exists to give your layout a fixed-width (which is altered based on the end-user [responsive]). This class should also really only exist once on the page, and wrap all .row elements within (therefore living up to it's name--a container).
Bootstrap uses a fixed 12-column layout, and therefore only needs two pieces of information: .row to queue a new row, and one of the col-*-n classes to decipher how many columns that block should take up.
Columns are also broken down by three main layouts: lg, md and sm each having a different effect on the layout based on the window viewport. Bacause of these three variations, it's possible to specify that content should change based on browser capabilities (e.g display three columns on all devides (md & lg), but maybe switch to two on mobile (sm)).
Having said that, the most basic layout consists simply of:
<div class="row">
<div class="col-md-12">
single div consuming all 12 columns
<div>
</div>
I have basic knowledge of TWBS3 and this i how I understand it:
Imagine that your page is a table where, by default, you have 12 columns(this if you haven’t customized the configuration). When you have an element that has a class “col-*-*”, you will only use the space that is defined by the col class. Building on this, if you have 4 elements with col-lg-4 class, you will get 3 elements in line, whereas the fourth will be drawn in a second line. This is because 3 col-lg-4 elements add up to twelve columns, so the fourth element is pushed below the other elements. This might be good in some cases where the elements all have the same height(always), but when the height varies you get odd results where some elements that are of smaller height are drawn a little higher in the page. ROW enforces the idea of having elements that belong to a row. Something like having a 12 column n rows table. Ex:
ELEMENT 1 ELEMENT2 ELEMENT 3
ELEMENT 4
With the same 4 elements of col-lg-4 you could do something like:
<div class=”row>
<div class=”col-lg-4”>Element 1</div><div class=”col-lg-4”>Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”>Element 3</div><div class=”col-lg-4”>Element 4</div>
</div>
ELEMENT 1 ELEMENT2
ELEMENT 3 ELEMENT 4
Because you are saying that you have two rows, each with two elements, that span 4 rows, out of the twelve that you have available for the row.
Hope this helps you. Sorry about the bad english.
I'm an engineer. All my designer friends keep telling me to use a grid whatever that means.
I want to create a layout similar to facebook (3 column, with a fat center column. How do I do that while using a grid? Where to even start? Thanks
960.gs is a good system to use.
And, SmashingMagazine has a good round-up of examples, articles, tutorials, tools, etc., about grids.
You can use a CSS framework (I use http://960.gs ) to create a grid. If you were using 960, you would do something like the following:
<div class="container_12">
<div class="grid_3>
Leftmost
</div>
<div class="grid_6>
Middle
</div>
<div class="grid_3>
Rightmost
</div>
</div>
There are other grid systems, this is just one I like the best due to it's lack of learning curve.