I'm finding myself frequently having to negate gutters with margin-left: 0; margin-right: 0;. I tried setting gutters in a custom layout to 0
$my_layout: (gutters: 0);
.my_class {
#include with-layout($my_layout) {
...
}
}
but this does not set the gutter width to 0, it just tells susy not set gutters at all.
How do you set gutters to 0 in a susy layout (instead of just setting them to null)?
This seems to work:
$my-layout: (
gutter-override: 0%,
);
gutter-override is generally for overriding gutters on-the-fly, but Susy allows it to be set globally as well. Currently Susy ignores gutter output of 0, but seems to allow gutter output of 0% (or 0 with any other unit).
I'd be willing to consider adding more clear null vs. 0 functionality, if you want to file an issue on github.
Related
I have the following SASS code in a SASS file which is imported to my Vue component in Nuxt 3:
.page {
background-color: rgba(0, 0, 0, 0.87);
}
I convert this to CSS using nuxt generate (with 3.0.0-rc.8), I get the following output:
.page {
background-color: #000000de;
}
This is wrong, because there is no opacity anymore. The output should be:
.page {
background-color: rgba(0, 0, 0, 0.87);
}
What causes this problem?
Side note: I could use opacity property instead of rgba, but it cannot always replace rgba, for example if I have box-shadow: 0 -0.1rem 0.4rem rgba(0, 0, 0, 0.5) inset;
Both the RGBA and hex values are the same.
Hex using 6 digits for regular RBG channels, the 2 last ones (if provided) are used for the alpha channel.
You can find an online converter here: https://rgbacolorpicker.com/rgba-to-hex
Otherwise, you can also try those directly into the browser.
I've used an alpha of 0.15 because 0.87 is quite hard to see (1 being totally opaque as a reminder), but it is totally equal for all the values as you can expect.
For that example, pick the sidebar on the right and apply both properties, toggle them back and forth and you'll notice no difference as expected.
Moreover, the devtools can provide you the convertion directly, click on the color icon (just on the right side of background-color and before the actual value), then click on the arrows on the bottom right of the popup.
So, if something is not working, it may come from somewhere else but both are totally equal from a CSS point of view.
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)"
Need help on How to increase font size in Jqgrid(free version )/Free jqGrid so that it effect in all parts of grid. ( add,edit,delete, search,view etc)
You can use following CSS to change font-size of ( add, edit, delete, search, view).
.ui-jqdialog {
font-size: 20px !important; // use you font size here
}
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).
In beta 2 of Susy 2, is it possible to set gutter widths in the main grid settings like so:?
$susy: (
flow: ltr,
math: static,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 12,
gutters: .25,
!!!!gutter-override: 20px,!!!!
column-width: 77.5px,
global-box-sizing: border-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
);
Because it doesn't seem to like it. I need to set explicit widths for columns and gutters for this grid and the container should be determined from those.
In Susy Next, gutters are set as a ratio (.25) to the column-width (77.5px). Given those settings, Susy can determine the gutter-width (77.5px * .25 = 19.375px).
By saying you want static math, .25 gutters, and 77.5px columns, you have already set the gutter width, and the container can already be calculated. If you like, you can use real pixel values to set your gutter ratio:
$susy: (
column-width: 77.5px,
gutters: 20px/77.5px, // same as ".258064516"
);
Gutter-override is not a global setting, and won't help you here. That setting is only for spans, when you want to override the global value. Also, I don't recommend sub-pixel settings. Pixels don't really break down, and fractional pixel declarations aren't handled the same across browsers.