I have a grid set up of thumbnail images, currently 4 thumbs per row. To make sure they line up i have this snippet of code:
li:nth-child(5) { margin-left: 0;}
What I have tried to do is this but I am getting a syntax error:
$galleryGrid: 5;
li:nth-child($galleryGrid) { margin-left: 0;}
If I wanted to alter the nth-child to use another value, such as 10 (so I can have 8 thumbs in a row), I assumed this would work.
Is this not possible or am I just doing incorrectly?!
Thanks in advance for you help.
You need to use variable interpolation to allow nth-child to be a variable.
$galleryGrid: 5;
li:nth-child(#{$galleryGrid}) { margin-left: 0;}
Generates
li:nth-child(5){margin-left:0}
This markup is fine if you have absolute control over the images and layout to ensure that your elements always wrap in such a way that every 5th one begins a new row. If you cannot make such guarantees, setting negative margins on the parent element is a better way to go.
Related
I'm calculating different line-heights within a Sass mixin to ensure that different elements adhere to a vertical rhythm. My $vertical-rhythm-base is currently 8px.
Some browsers (at least Chrome) seem to floor a value of 1.33333 and use 23px instead of the desired 24px I had in mind. So I tried to correct that value within my mixin:
$vertical-rhythm-base: 8px
=calculateLineHeight($itemFontSize)
$lineHeightBase: $vertical-rhythm-base * 3
$itemLineHeight: (ceil($itemFontSize/$lineHeightBase)*$lineHeightBase)/$itemFontSize
// fix miscalculation for this value since browsers resort to 23px
// instead of 24px in the current setup.
#if $itemLineHeight == 1.33333
$itemLineHeight: 1.3334
line-height: $itemLineHeight
.someElement
+calculateLinHeight(18px)
font-size: 18px
This doesn't seem to work since the items that should get a line-height: 1.33334 still get line-height: 1.33333.
I don't get what is going wrong here. Changing the #if to use = instead of == results in assigning line-height: 1.33334 to everything instead of calculating it correctly.
Sass doesn't perform rounding until after the comparisons are already done and it is time to generate the output. Your variable still contains a repeating decimal, even if it looks like it doesn't. You must compare repeating values to repeating values if you're checking for equality:
$foo: 4 / 3;
#debug $foo == 1.33333; // false
#debug $foo == 4 / 3; // true
Note that if Sass performed rounding at comparison time rather than after, your if-statement would only evaluate to true when using the default precision setting of 5 (there are a number of Sass libraries that require higher precision settings than that, I ran the above code with a precision of 10). Also note that the default precision for Sass has changed once before and is likely to change again in the future.
1,33333 is repetend. Try "==(4/3)"
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
Please look at this gist:
http://sassmeister.com/gist/6d575ec85663865fa567
There you can see a placehold.it thumbnail grid realized via float-span
What i need now is:
The padding-left of the first .item in each row should be 0
The padding-right of the last .item in each row should be 0
this would then end up in the thumbnail grid perfectly aligning with the rest of the content (e.g. the lorem ipsum text)
What is the beast way to achieve this with singularitygs?
UPD 2014-07-21
what i need can be seen in this screen:
i don't need another padding style, i need the padding from the first and last item in each row removed. this can't be done via css, because the sass calculations would be wrong.
UPD 2014-07-30
based on various sources, i managed to establish this mixin:
#mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){
#include layout($layout, $gutter: $thegutter) {
#for $i from 1 through $cols {
#if $i == 1 {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, left);
}
}
#else if $i < $cols {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, none);
}
}
#else {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, right);
}
}
}
}
}
which can be called e.g. via:
$layout: 1 1 1;
#include thegrid($layout, 3, $el: ".item");
an example can be seen here: http://sassmeister.com/gist/7a45960747ad3d4bbf56
Not sure what you mean.
You're applying gutters with an absolute value. This is what Singularity calls fixed gutters.
Singularity realizes fixed gutters by applying padding to grid elements.
Padding can be applied in two styles:
split: the gutter size is divided by two and the resulting value is applied as left and right padding to every grid item.
opposite: the value of gutter size is applied as right padding to every item except items occupying the last column.
So if you are unhappy with split gutters, switch to opposite gutters. That's the default behavior, so you can simply comment out #include add-gutter-style('split');.
If you are unhappy with either gutter style, well, you can manually remove padding that you don't need. This doesn't make a lot of sense because if you apply zero padding to items other than occupying the first and the last columns, you will distort your grid. And if you apply them only to the items occupying the first and the last columns, you basically get the same setup as with opposite gutter styles.
You might get better help if you make a pencil drawing of desired layout.
UPD 2014-07-21
OK, now it's clear what you mean.
So you basically want split gutters for the outer level and opposite gutters for the inner level. You're already using the layout() mixin required to override grid settings, so you could just tell it to override gutter styles, e. g.:
#mixin layout(2, $gutter-style: 'opposite') {
Unfortunately, due to the fact that Singularity creates fixed gutters via padding, they only play nice in split mode. In opposite mode fixed gutters produce uneven columns.
So you'll have to use relative gutters:
#mixin layout(2, 0.1, $gutter-style: 'opposite') {
There are a couple of things you have to keep in mind:
Spanning the last item in each row separately.
With the opposite gutter style, the last item in each row is special: it contains no right gutter. So you will have to tell Singularity which item is the last one in row.
To do this, we will use the :nth-child(Xn + Y) selector, where X is the number of items in the row and Y is the number of target item in the row. As we're targeting the last item, X and Y will be equal:
#include float-span(1);
&:nth-child(4n + 4) {
#include float-span(1, last);
}
Isolating media queries.
Once you do that for each breakpoint, you'll end up with styles applied to different items in different breakpoints. Those styles will not be overridden and thus will leak from smaller to larger breakpoints, breaking the layout.
You could override them manually, but that's a lot of thankless job. Instead, isolate your media queries so that styles don't leak:
$beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint: 800px;
// Mobile view (formerly without a media query)
#include breakpoint($beforeMediumBreakpoint) {
Demo: http://sassmeister.com/gist/dd9f1af025900d7e63db
PS A piece of advice from me: don't use fixed gutters and split mode. Use fluid gutters and the default opposite mode. This will save you from a lot of trouble! You can always simulate split gutters by applying padding to the outermost container.
You can do some math to calculate relative padding for the container that will be equal to the gutter between grid items! With the magic of math, you can even apply bottom margins to grid items equal to grid gutters, producing a beautiful uniform thumbnail grid.
I've created a nifty extension Singularity Quick Spanner that can reduce the amount of work you need to do to set up thumbnail grids. See it in action (note vertical gutters equal to horizontal gutters).
Im trying singularity for the first time, and I'm trying to recreate a grid I have. Simple one.
This is a simple structure, for the test:
<header>
header
</header>
<main>
main content
</main>
<aside>
aside
</aside>
<footer>footer, nav, social icons etc</footer>
So in a 12 col grid, the header is full width, the main is 9 cols width, the aside is 3 cols width and the footer is full 12 cols.
Anyway, the inconsistency is this: the header, the aside, and the footer have float:right, but the main is float:left, so it gets out of the flow of the document.
This is the grid:
/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;
This is the rest:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
#include background-grid;
}
/* main layout */
header {
#include grid-span(3, 1);
background: red;
#include breakpoint(1024px) {
#include grid-span(12, 1);
}
}
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2);
}
}
So the issue is that, it does not respect the flow and it overlaps with the header, like this http://imageupload.maxmendez.net/images/incon.png. The green main, should be below the header.
In order to fix that, I had to do this:
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2, $options: 'right');
}
}
Adding options right, seems to clear to the right and fix my issue. Is there a reason that im overlooking as to why the mai is floating left?
Still havent tested in IE, but im worried about compatibility.
It seems as if you are unfamiliar with what the clear property does or how it works. When using the Isolation output method, you need to clear your own floats, something you may not have been exposed to with more traditional Float output method based grid systems/frameworks. A good place to read up on them is MDN's Clear section.
In the example you've provided, header spans the whole grid width. Because the last item in a grid is floated right, the header is likewise floated right. This is to hide any percentage rounding issues with the last item in a row and have them all line up to the right edge. Otherwise, all grid items are floated to the left. Because this item is floated right, in order to clear it's border edge (not have it overlap), we need to tell the next item in the DOM (your main element) to clear items floated right. This will push it below header, creating a new row. Because footer is full width and is therefore floated right, and your aside is also floated right, there is only enough room on the main/aside row for an item of width 100%-width(aside). Because footer is too wide for that remaining area, it drops to the next row without needing to clear its float. That being said, this will only not overlap with main because main and aside are the same height; if main becomes taller than aside, footer will overlap it. To prevent this, you should tell footer to clear things floated to the left, which main is.
While this all sounds fairly complicated, don't be worried about cross-browser compatibility. We have tested Singularity extensively across all browsers, including IE, and it works fine.
If after all of this you are still uncomfortable with the Isolation output method, you can switch to the Float output method. The two have very different mental models; Isolation is about discretely positioning elements in relation to each other whereas Float is more akin to walking across a row on your grid. Keep in mind that if you switch to Float you will then need to use the push and pull mixins to nudge things around the grid.
Hope this helps!
I have an outer div with a variable height (and max-height) that's set with a specific pixel amount by JavaScript, containing two divs within.
The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.
The 2nd div is intended to hold a fixed amount of content, and has a specific height set.
Right now, the max-height isn't working. The 1st div keeps growing, even with overflow: auto; set, and pushes the 2nd div below it outside the bounds of the outer div. How can I make it so that when the 1st div gets too large for the outer div to contain both it and the fixed-height 2nd div, the 1st div will start to scroll?
Example page: http://thevastdesign.com/scrollTest.html
Thanks for any help. I'd appreciate a CSS solution the most, even if it requires some hacks. It only has to work in Firefox 3+, IE8, and IE7.
Ideas?
You cant really do that without JS. Your max-height on the outer-div isnt going to control the height of one of your inner divs to invoke its scrolling. That inner div is always going to be the height you set (pixels, auto, etc..). You can either make the entire outer div scroll as needed by using overflow: auto or you can set a max height on the first inner div and set the overflow.
Given your setup, I would do the following (class names are implied by your question, not taken from the linked source):
div.outer {
position: relative;
max-height: $length(y);
overflow: hidden;
}
div.innerFixed {
position: absolute;
bottom: 0;
height: $length(y);
overflow: hidden; /* just in case, to keep things from
blowing out into all manner of crazy */
}
div.innerFlex {
max-height: $length(y);
overflow: auto;
}
These rules don't address box properties, which will have an impact on the height values that you apply. The combined height values (with box values included) of .innerFixed and .innerFlex should equal the height value of the container.
If you want to get all Zen and flip the vertical composition, you do that by swapping bottom for top on .innerFixed and assigning margin-top or padding-top to .innerFlex.
Something else I noticed is that you've got
div.outer { float: left; }
...But given what you need from that element (and to set the right content priority) I would instead suggest that you put your big column first in the source order and apply
div.mainContent {
float: right;
width: $length(x);
}
div.outer { /* i.e., the column that started the discussion */
margin-right: length(x);
}
with the understanding that the margin-right of the latter is somewhat greater than the width of the former (greater to account for the gutter between the two elements). Try it, you'll like it.