I'm trying to use the skeleton framework but I'm getting confused. Here is the code I'm trying to use:
http://pastebin.com/ZcEAed0D
I even tried adding alpha and omega to the beginning and end of the columns. But what I am left with looks like this:
http://imgur.com/En3QLA5
You see the sixteenth column is hanging off of the end. Shouldn't it be able to fit 16 columns worth of stuff on one line?
This happens if i try other combinations as like like fourteen and two, etc. It hangs off the end of the page.
Where am I going wrong?
Also are the widths between columns adjustable, and if so how? Any good tutorials on how to use all of skeletons features? Do you do a new line of the grid just by using up another 16 columns?
Thanks.
Since you are adding a 1px border to each column div, it is making each column container 1px wider than it should be. By default, a border expands the width of the container. To fix this, you must add the following CSS property to your "div" selector which will include the border into the container width calculation.
box-sizing: border-box;
More information about box sizing: http://css-tricks.com/box-sizing/
Related
I am learning CSS grid and these days I am trying to apply grid in places where I used to use Bootstrap grid. Everything is going well but I can't seem to figure out how to deal with margins in CSS grids. I am aware of grid-row-gap and grid-column-gap but that only covers the simple use cases and not all my use cases. For example:
What if I want 40px margin after every 3rd row?
See the picture of design attached. How do I achieve this css grid? I have marked all margins as m. Do I use explicit margin or do I leave columns/rows blank to act as margin.
Do you wanna something like this:
.row:nth-child(3n+3) { margin-bottom:40px; }
This will add margin after every 3rd row.
Create a class (for example .margin-40:{margin:40px 0}) and put this class beside row class wherever you want to put 40px margin.
I've been trying to figure out the best solution for displaying a list of projects using Singularity.
I want to essentially remove the padding of the last item of each row but add that padding back into the overall project width of all projects.
I think the solution will have more to do with css than singularity but maybe there is a good solution within singularity I am missing?
These projects will eventually be regularly added by a cms.
example: http://sassmeister.com/gist/7916151
Okay, there's a number of things you should consider.
Firstly, Singularity and Breakpoint are not yet compatible with Sass 3.3, whereas Sassmeister.com is already using Sass 3.3. Make sure you're using Sass 3.2.x in your project. To demonstrate Sass+HTML, consider using SassBin.com.
Secondly, you're using 12px gutters. This is incorrect. Gutters are specified as a unitless value, relative to a single column unit. So when you have two columns and 12px gutters you actually tell Singularity to make gutters 12 times larger than columns.
Instead, provide relative gutters like this: $gutters: 0.1.
Thirdly, you specify a 4-column grid for the medium size but you only use them as a two-column grid. If you don't use four columns somewhere in your project, i suggest that you omit that 4-column definition and keep using the 2-columns grid.
Fourthly, you're setting an outline on your container but it never displays properly because the container has zero height. It has zero height because all its contents is floated.
To have the container embrace the floated content, you have to apply a clearfix to the container. Google it up. The simpliest way to apply a clearfix is to use the pie-clearfix mixin that comes with Compass. But i suggest that you use the %clearfix-micro extend that comes with Toolkit.
Fifthly (is there even such a word?), to remove the gap on the right, you have to apply a last float-span to the last item in every row. To do that properly, you have to learn how the nth-child works. I highly recommend that you google it up.
In short, nth-child accepts an argument that looks like An+B where A and B are whole numbers. The A should be equal to the number of columns and B is the number of the column you're addressing. As you're addressing the last column, B is equal to A in your case. So the whole thing looks like nth-child(3n+3) for example.
Sixthly, you're applying Singularity spans for different breakpoints in such a manner that they accumulate. This is okay when you override spans to all your items at once, so that all of them become redefined in each media query.
But when you apply styles selectively (to the last item in each row), you'd have to cancel them too. This is a very cheerless thing to do.
Instead, you should narrow down your media queries so that they address only specific slices between two breakpoints. In this case, spanning styles will not accumulate.
Here's how you code would look if you used all my recommendations: http://sassbin.com/gist/7951326/
Seventhly (my tongue hurts), consider using the Breakpoint Slicer extension, a tiny wrapper for Breakpoint that makes slicing breakpoint ranges very quick and effortless.
Here's how your code could look if you used Breakpoint Slicer: http://sassbin.com/gist/7951724/
Eighthly, if you did want fixed gutters, you should've set the $gutter-styles: 'fixed' option.
Of course you could do something like this:
&:nth-child(3n) {
margin-right: 0;
}
On the Singularity wiki, it seems to indicate that this should work:
&:nth-child(3n) {
#include float-span(2, 'last');
}
But it didn't or I didn't understand its function.
Thanks for the extensive answer.
I'm well aware of the nth-child selector. I went down that road but decide it wasn't a clean solution for me.
I know I didn't clear the float...wasn't really part of my question.
Setting a fixed height of 12px is not incorrect based on the documentation: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#fixed-gutters
I need fixed gutters. That's the whole crux of the problem here.
I started making my own fixed gutter fluid column solution that I'm liking thus far: http://codepen.io/joshuarule/pen/zsfEo
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.