Long tried to create a responsive navigation. But still turned out.
But I'm still not sure I did the right thing. Because I passed a value of 0 in the span. Or so it is still possible to do? It works :)
$big: (columns: 24, gutters: 1/2,math: fluid,gutter-position: split )
#include susy-breakpoint(700px, $big)
.nav-item // is ui>li.nav-item
#include span(0 border-box)
No, this is not a proper way to use Susy. If you look at the output, you will see that you get width: -1.38889%; which is not valid CSS. It works because browsers ignore invalid code - but it's not a good idea, and it's not a meaningful use of Susy.
The only grid-output you need is gutters, so that's all you should ask Susy for. The rest you can do with plain css:
.nav-item {
#include gutters;
box-sizing: border-box;
float: left;
}
Related
In our code base we use styled-components, with a theme. To use the theme one must do something like this
const StyledComp = styled.div`
margin: ${theme.spacing.sm};
`
However, because our theme is nested for organization purposes this can be quite verbose. So what we do is
const StyledComp = styled.div(({theme: { spacing, fontSize, etc }}) => `
margin: ${spacing.sm};
font-size: ${fontSize._14};
`);
I'm not sure where I picked up this pattern, but it really helps and we use it everywhere. However. prettier, and actually most styled-component vscode plugins don't seem to recognize it. That is they don't format the code inside or provide intellisense or whatever.
Is there anyway to fix this or could someone explain to me the issue so that I have more information for searching for a solution?
I'm working on a gnome-shell extension and I can't get the linear-gradient to work properly (or at all, in fact). The GTK documentation or this post state that we should be able to use something like this:
label {
background-image: linear-gradient(to top right, blue 20%, #f0f 80%);
/*OR*/
background-image: -gtk-gradient (linear,
0 0, 0 1,
color-stop(0, #yellow),
color-stop(0.2, #blue),
color-stop(1, #0f0));
}
But it doesn't work, the gradient doesn't show up.
So far, the only way that I can get a gradient is if I use these undocumented properties:
label {
background-gradient-start: rgba(255, 0, 0, 1);
background-gradient-end: rgba(0, 255, 0, 1);
}
The problem is that I need to use the linear-gradient function to fine tune the gradient. Is it possible?
The first two don't work because GNOME did not yet implement multiple/custom color stops. You could try to create a GTK+ 2/3 theme and use classes from that instead, or create a few scalable images (like .svg) for what you need and use those instead.
I'm trying to use nested styles on different classes in a LESS stylesheet, but every time I try to compile, I get ParseError: Unrecognised input in style.less.
I've searched around, and it seems like what I'm doing should be valid. The strange part is that it was working for me yesterday. I've had lots of weird errors in Node applications lately, but I uninstalled and reinstalled Node, NPM, and all of my packages this morning, and that didn't help anything.
.grid {
overflow:hidden;
margin:0;
padding:3em 0 0 0;
width:100%;
list-style:none;
text-align:center;
font-family:'Helvetica Neue';
.tile { // The error occurs on this line
position:relative;
z-index:1;
display:inline-block;
overflow:hidden;
margin:-0.135em;
...
}
...
}
Here's a link to a CodePen with all of my code. CodePen shows the error, too, so it's not something wrong with my installation.
I haven't seen anything about this in Susy's documentation, but is there a means for adding device pixel ratio to Susy's generated media queries? Or is this something that requires customizing the at-breakpoint mixin?
Susy's at-breakpoint is really just a shortcut for the simplest mix/max media-queries. For more powerful media-queries, I recommend the breakpoint plugin. You can use that in conjunction with Susy's layout mixin to re-create the at-breakpoint effect:
#include breakpoint($your-advanced-media-queries) {
#include layout($your-desired-column-count) {
// your styles
}
}
I think I must be missing something fundamental with how susy works, and the documentation has too few examples to understand how this works.
I want different layouts at different breakpoints. I can make it that far, but I want my elements to span different number of columns depending on what breakpoint is triggered. So if I have a general stylesheet for mobile ('mobile-first') like:
.wrapper{
.element1{
#include span-columns(4);
}
.element2{
#include span-columns(2 omega);
}
}
But once the width changes to my 'tablet' and it changes to an 8 column layout, I want to be able to change this to:
#include at-breakpoint($tablet-break $tablet-layout){
.wrapper{
#include set-container-width;
.element1{
#include span-columns(5);
}
.element2{
#include span-columns(3 omega);
}
}
}
It seems like this not only doesn't 'overwrite' the mobile settings, but it appears, upon firebug inspection, that the elements do not match up with my new tablet columns. I think it is still using a 6 column layout. Adding #include set-container-width doesn't seem to fix the problem; however, if I comment out the mobile layout it works. So it's almost as if these include statements don't overwrite, so I think I'm not understanding how susy works. Here's an example of firebug showing the element not matching the layout:
(Also I'm not sure of any SUSY best practices (except for don't nest more than 4 deep). I could define all my sass with nested #at-breakpoint statements for all my changes, or I could define my default (mobile) css and then create a separate sass block all nested within at-breakpoint. I don't know if this is causing a problem.)
UPDATE
It appears, that if I include at-breakpoint includes after the original (mobile) declaration, it seems to work. Though it does seem to require code repetition:
.element1{
#include span-columns(2 omega);
text-indent: -1em;
text-align: center;
#include at-breakpoint($tablet-break $tablet-layout){
#include span-columns(3 omega);
text-indent: 0;
text-align: left;
}
#include at-breakpoint($desktop-break $desktop-layout){
#include span-columns(3 omega);
text-indent: 0;
text-align: left;
}
}