I'm new to using compass/sass and I've installed a 960 plugin. So far so good.
The only thing is I'm using the more recent .scss syntax and when I try to set my container by:
.container {
+grid-container;
}
I am getting a compile error of:
Syntax error: Invalid CSS after " +grid-container": expected "{", was ";"
Okay here it is.
First declare the amount of columns to use:
$ninesixty-columns: 12;
then declare your "container" if you use one:
.container {
#include grid-container;
}
Then just give the amounts:
.main {
#include grid(9);
#include alpha;
}
.sidebar {
#include grid(3);
#include omega;
}
Related
I have upgraded Bootstrap v4 to v5 Now i am getting this error how to solve it?
only border-bottom-right-radius gives me error
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/index.scss)
#include border-bottom-right-radius(0);
Mycode
.card-title {
background-color: $gray-100;
#include border-radius($border-radius);
// #include border-bottom-left-radius(0);
#include border-bottom-right-radius(0);
&.collapsed {
#include border-radius($border-radius);
}
}
border-bottom-start-radius and border-bottom-end-radius have replaced left and right –
I am currently creating a simple project using Bourbon's Neat grid system, and currently I am trying to create a 3 column list of 6 objects in total, but when I try to span them at 4 columns each, something happens and they become only 2 columns.
It adds margin only on the right side of each element, but that is okay since everything is pre-set I guess? So that is not the problem.
What can I do to make this work?
Here is the SASS excerpt:
#serviceList {
#include row();
li {
#include pad(1em);
#include span-columns(4 of 12);
img, p {
float: left;
}
}
}
Thanks in advance!
I managed to sort it out. In a way...
#serviceList {
#include row();
li {
#include pad(1em);
#include span-columns(4);
#include omega();
img, p {
float: left;
}
}
}
I added the "#include omega();" mixin that removes the gutter margin between them. But since I am new to Neat, I am wondering if that is the right way to do it? Can someone explain?
i am able to reorder content using shift(+2). But i am unable to reorder if i have to place column down to second row...
Here is what i am doing...
2 columns left and right, and using shifts in mobile view i do right to left and left to right but when i do shifts they go off screen like margin-left:100% will not make it come to second row.. How can i achieve that?
thanks.
here is the code
html
<div class="mainContainer redbordered">
<div class="leftCont">Left </div>
<div class="rightCont">Right</div>
</div>
And Sass
#include media($mobile) {
#include span-columns(10 of 10);
#include shift(+10);
}
#include media($tablet) {
#include span-columns(5 of 10)
}
#include media($laptop) {
#include span-columns(5 of 10)
}
#include media($large-desktop) {
#include span-columns(5 of 10)
}
}
.rightCont
{
padding:20px;
font-size:22px;
background-color: crimson;
#include media($mobile) {
#include span-columns(10 of 10);
#include shift(-10);
}
#include media($tablet) {
#include span-columns(5 of 10)
}
#include media($laptop) {
#include span-columns(5 of 10)
}
#include media($large-desktop) {
#include span-columns(5 of 10)
}
}
Thanks..
Shifting something that has #include span-columns(10 of 10) on it doesn't really make sense, as shifting only works inside a single row.
If I understand your example correctly, you don't really need shifts. You can also remove the #include span-columns(10 of 10) on mobile, as elements will collapse naturally there. You then just set column sizes (5 of 10) to both elements on wider breakpoints (tablet, desktop, ...) and you should get the desired behaviour.
Here's a really simple codepen example. You can ignore most of the CSS, as it's just copy-pasted Neat, the styling I wrote starts on line 539. Try resizing it to see if this is what you're trying to achieve.
I'm using Bourbon's Neat library for my grid system.
I have some code like this:
section {
#include outer-container;
aside { #include span-columns(3); }
article { #include span-columns(9); }
}
I want to increase the width of the aside tag by, let's say, 50px on hover. However,this will cause the article to be pushed down to the next line.
Is there a way to scale the width of one column and proportionally resize the other column?
I know this can be done with javascript but I was wondering if there is a way to do this with the Neat grid-system .
Thanks!
EDIT
Here is the solution that worked for me:
section {
#include outer-container;
aside {
#include span-columns(3);
&:hover {
#include span-columns(2);
& + article {
#include span-columns(11);
}
}
}
article { #include span-columns(9); }
}
I'm using the css sibling selector + to select the article element when the aside is being hovered over.
There’s no built-in functionality for this, but have you tried overriding width on :hover? That is to say, add x length to the width of Column A and take the same amount away from Column B. CSS calc() could help here.
Neat’s docs give insight into the exact function of span-columns and its output: http://thoughtbot.github.io/neat-docs/latest/#span-columns
That being said, this sounds like a great use case for flexbox, if your needs allow for that.
I'm not using Compass
I prefer to use Breakpoint.scss
I'm on susy 2.0
I know there are lot of posts with this question but I'm having 0 luck finding any regarding Breakpoint.scss and Susy 2.0 on this topic.
#import "susy";
#import "breakpoint";
$medium: 800px;
$susy: (
columns: 6,
gutters: 3/4,
gutter-position: split
);
#include breakpoint($medium) {
$susy: layout(12 1/4 split);
}
body {
#include container(show);
#include breakpoint($medium) {
#include container(show);
}
}
Do I have to use susy-breakpoint or can something like this be achieved?
I want 6 columns at anything at/below 800px and 12 at/above 800px
I'm trying to stay DRY so adding a susy-breakpoint in my styles does not help.
I've also tried below code but I think I just have an error somewhere cause it's not working.
$susy: layout(6 1/4 split);
$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;
#mixin media($size) {
#include susy-breakpoint($size...) {
#content;
}
}
body {
#include container(show);
#include media($small) {
#include container(show);
}
// debugging. didnt work either
#include susy-breakpoint($small...) {
#include container(show);
}
}
I don't know what your media mixin does, so I can't really comment on anything related to that. Your initial example doesn't work because Sass, CSS, and therefor Susy, are not aware of the DOM - or relationships between media-queries. When you change the value of $susy inside one media-query, that does not propagate to all similar media-query contexts. Because of that, you do have to set both the media-query and the desired layout every time you want a breakpoint to change the layout context.
susy-breakpoint is not the only way to do that, but it is the shortest. Here's the longhand:
body {
#include container(show);
#include breakpoint(800px) {
#include with-layout(8) { // default is set to 8-columns
#include container(show);
} // default is returned to global setting
}
}
Your $small breakpoint currently doesn't change anything, because it is identical to your default layout. The larger ones will change the layout context for nested code — though you can simplify: Since `1/4 split' gutters aren't changing at all, they don't need to be re-stated at every breakpoint.
$susy: layout(6 1/4 split);
$medium: 800px, 8;
body {
#include container(show);
#include susy-breakpoint($medium...) {
#include container(show);
}
}
That will be identical to the longhand above.