I am trying to float 2 divs to the right using the Susy Compass framework and having a clearing issue:
<div class="div-1">
<h2>DIV 1</h2>
</div><!--end div-1-->
<div class="div-2">
<h2>DIV2</h2>
</div><!--end div-2-->
<div class="div-3">
<h2>DIV 3</h2>
</div><!--end div-3-->
<div class="div-4">
<h2>DIV 4</h2>
</div><!--end div-4-->
<div class="div-5">
<h2>DIV 5</div>
</div><!--end div-5-->
And here is my Susy layout code:
#detail{
.div-1{
#include breakpoint($breakpoint-md){
#include span-columns(7, 12);
#include pre(1);
background-color:pink;
}
}
.div-2{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-3{
#include breakpoint($breakpoint-md){
#include span-columns(7,12);
#include pre(1);
}
}
.div-4{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include suffix(1);
//#include omega;
background-color:blue;
}
}
.div-5{
#include breakpoint($breakpoint-md){
#include span-columns(3,12);
#include post(1);
//#include omega;
background-color:orange;
}
}
}
To give an example of how this is rendering, below is a screenshot:
As you can see, div-3 and div-5 are not clearing to the top, to align with div-1.
I thought perhaps I could use the #alpha mixin, but it is deprecated in Susy 1.0 (which I am using). I have also tried using #omega on div-3 and div-5 with no change.
That's how CSS floats work. A float will never align any higher than the previous element (div2). There is nothing Susy can do about that.
You will have to make adjustments to you markup in order for this layout to work - either switching the order of divs, or adding a wrapper around divs 1 & 2 (which is what I would recommend to preserve source order).
Or, if you want to get tricky, you could handle divs 3 & 5 without floating them. Something like this (ignoring breakpoints for simplicity):
.div3, .div5 {
#include pre(8);
#include suffix(1);
}
That should push them to the right, while ignoring the floated divs 1, 2, and 4.
Related
I'm only opening this topic because I don't have the necessary 50 reputation points to ask my question directly into the topic I'm interested in.
So, my problem is that I need 25 bootstrap buttons of specific colors (that the user will use to choose among some Pantone variations etc). I found this great topic how to change bootstrap version 4 button color where Zim suggests a SASS solution that obviously saves a lot of CSS writing for the various button states/borders/etc...
However, as I'm new to SASS, I don't understand how it's supposed to be implemented in my webpage. More specifically, I don't know where to put the mentioned color variable and new button classes.
Currently I use this https://www.codeply.com/go/76H7JWg7Zl but of course the border/mouseover/etc use the primary color of the btn-primary class...
After studying the scss source files of bootstrap and also some online resources, I ended up that defining the following SASS mixins would solve my problem:
#import "bootstrap";
.btn-ffa300 {
#include button-variant(#ffa300, darken(#ffa300, 5%));
}
.btn-ffd700 {
#include button-variant(#ffd700, darken(#ffd700, 5%));
}
.btn-97d700 {
#include button-variant(#97d700, darken(#97d700, 5%));
}
.btn-012169 {
#include button-variant(#012169, darken(#012169, 5%));
}
.btn-001489 {
#include button-variant(#001489, darken(#001489, 5%));
}
.btn-ff8200 {
#include button-variant(#ff8200, darken(#ff8200, 5%));
}
.btn-c4d600 {
#include button-variant(#c4d600, darken(#c4d600, 5%));
}
.btn-84bd00 {
#include button-variant(#84bd00, darken(#84bd00, 5%));
}
.btn-0033a0 {
#include button-variant(#0033a0, darken(#0033a0, 5%));
}
.btn-c8c9c7 {
#include button-variant(#c8c9c7, darken(#c8c9c7, 5%));
}
.btn-ff6900 {
#include button-variant(#ff6900, darken(#ff6900, 5%));
}
.btn-78d64b {
#include button-variant(#78d64b, darken(#78d64b, 5%));
}
.btn-009ca6 {
#include button-variant(#009ca6, darken(#009ca6, 5%));
}
.btn-002d72 {
#include button-variant(#002d72, darken(#002d72, 5%));
}
.btn-7c878e {
#include button-variant(#7c878e, darken(#7c878e, 5%));
}
.btn-ff6a13 {
#include button-variant(#ff6a13, darken(#ff6a13, 5%));
}
.btn-ef3340 {
#include button-variant(#ef3340, darken(#ef3340, 5%));
}
.btn-69b3e7 {
#include button-variant(#69b3e7, darken(#69b3e7, 5%));
}
.btn-002f6c {
#include button-variant(#002f6c, darken(#002f6c, 5%));
}
.btn-63666a {
#include button-variant(#63666a, darken(#63666a, 5%));
}
.btn-fe5000 {
#include button-variant(#fe5000, darken(#fe5000, 5%));
}
.btn-c8102e {
#include button-variant(#c8102e, darken(#c8102e, 5%));
}
.btn-003da5 {
#include button-variant(#003da5, darken(#003da5, 5%));
}
.btn-002855 {
#include button-variant(#002855, darken(#002855, 5%));
}
.btn-4f2c1d {
#include button-variant(#4f2c1d, darken(#4f2c1d, 5%));
}
I even confirmed that it's working by rewriting my previous fiddle, and indeed the result ended up EXACTLY as I wanted it to be (https://www.codeply.com/go/uYPxiuNkbu).
Codeply is also "kind enough" to provide in the appropriate tab the compiled css of the sass code used in the fiddle...
But that's an indirect way of preprocessing the sass code... What would a proper way be? Isn't there some sort of online CSS preprocessor? Ie, I read that (https://themestr.app/customize) can be used to customize bootstrap code and then all customizations end up in a compiles custom.css file... How does that work? So far I haven't succeed in achieving this. Some help with this please?
If you want to learn SASS you can go through their official website. If you know css sass won't be a tough one to learn.
For installing gulp there are lots of tutorials you can find!
https://css-tricks.com/gulp-for-beginners/ Here is the one that you can go through.
For using bootstrap 4 theming if you wish you can just learn sass basics and gulp is not required much. You can use propos instead of gulp.
You can simply follow the below steps
To install bootstrap on any local project:
npm init -y
npm install
npm install bootstrap --save
To run manually (Without Gulp):
sass path/filename.sass/filename.scss filename.css
After creating new theme you can use it the same way you're using bootstrap theme. For example: <button class="btn btn-custom-color"></button>
Hope it'll help
/* Change theme color */
$theme-colors: (
"info": #7eff4b,
"danger": #ff50f0,
"primary": #0095ff,
"secondary": #28a745
);
/* Create your own theme */
$theme-colors: (
"custom-color": #900
);
I have some buttons
<button type="button" class="myButton btn btn-primary">foo</button>
<button type="button" class="myButton btn btn-secondary">bar</button>
...
For the background colors of which I'd like to give some transparency. I'm trying like:
button.myButton {
#include bg-variant(<???>, rgba(<button's color?>, 0.7));
}
There are some infos here and there although not much about it.
Update:
I'm getting closer... Replacing the above SCSS code by:
#include bg-variant('button.myButton', rgba($red, 0.7));
does the trick, but here I explicitly set the color to red. I'd like to make it dynamic, so use the given button's color here instead.
Update 2:
I thought I've finally found it, but this:
#each $color, $value in $theme-colors {
#include bg-variant('button.myButton', rgba($value, 0.7));
}
makes my buttons' background just gray. Why?
Solved it.
#each $color, $value in $theme-colors {
#include bg-variant('button.myButton.btn-#{$color}", rgba($value, 0.7));
}
I started upgrading a website from Singularity 1.1.2 to 1.4.0 and immediately hit a wall when it came to using multiple grids in the same style sheets. I have five different grids on this site. Previously I was able to set variables for each of the grids and gutters, like so...
$copy-grids: 2;
$copy-grids: add-grid(4 at $breakpoint-xs-min, $copy-grids);
$copy-grids: add-grid(6 at $breakpoint-l-min, $copy-grids);
$copy-gutters: $gutter-width;
$front-grids: 1;
$front-grids: add-grid(2 at $breakpoint-2up-min, $front-grids);
$front-grids: add-grid(3 at $breakpoint-3up-min, $front-grids);
$front-grids: add-grid(4 at $breakpoint-4up-min, $front-grids);
$front-gutters: breakpoint-to-base-em($front-gutter-width);
...
Then I was able to pass these variables to custom mixins using Singularity's layout() function, like this...
// Mixins for the main content body copy.
#mixin copy-layout {
#include layout($copy-grids, $copy-gutters) {
// All the things!
#content;
}
}
#mixin copy-grid-span($span, $location) {
#include copy-layout {
#include grid-span($span, $location);
}
}
// Mixins for the front page.
#mixin front-layout {
#include layout($front-grids, $front-gutters) {
$gutter-styles: 'split' 'fixed';
// All the things!
#content;
}
}
#mixin front-grid-span($span, $location) {
#include front-layout {
#include grid-span($span, $location);
}
}
...
This let me use my custom mixins in place of the standard grid-span() mixins to easily implement any of my defined grids. For instance:
#block-bean-front-page-message {
margin-bottom: $front-gutters;
#include breakpoint-1up() {
width: 100%;
padding: 0 $front-gutters/2;
}
#include breakpoint-2up-to-4up() {
#include front-grid-span(1, 2);
}
#include breakpoint-4up(true) {
#include front-grid-span(3, 2);
}
}
The problem is that, in Singularity v1.4, grid and gutter settings are no longer saved to normal sass variables. Instead they are saved as keyed values in the global $Singularity-Settings map. The keys used for these values are hard coded in the add-grid(), add-gutter(), and add-gutter-style() mixins, none of which accept a custom variable name. This appears to effectively prevent me from defining more than one grid. So while the layout() mixin still exists, I no longer have variables I can pass into it for my grid and gutter settings, breakng my custom layout wrapper mixins.
I've posted this as an issue on Github and I understand a more permanent fix may be in the works. But in the mean time, I'm hoping there is a workaround I can use to accomplish multiple grids using the current release of Singularity.
It looks like I'm able to achieve what I'm after by overriding the add-grid(), add-gutter(), and add-gutter-style() mixins like so:
#mixin add-grid($grid-definition, $grid-key: 'grids') {
$Grid-Map: ();
#if sgs-has($grid-key) {
$Grid-Map: sgs-get($grid-key);
}
#else {
$New-Map: sgs-set($grid-key, $Grid-Map)
}
$Add-Grid: add-grid($grid-definition, $Grid-Map);
$HOLDER: sgs-set($grid-key, $Add-Grid);
}
#mixin add-gutter($gutter-definition, $gutter-key: 'gutters') {
$Gutter-Map: ();
#if sgs-has($gutter-key) {
$Gutter-Map: sgs-get($gutter-key);
}
#else {
$New-Map: sgs-set($gutter-key, $Gutter-Map)
}
$Add-Gutter: add-gutter($gutter-definition, $Gutter-Map);
$HOLDER: sgs-set($gutter-key, $Add-Gutter);
}
#mixin add-gutter-style($gutter-style-definition, $gutter-style-key: 'gutter styles') {
$Gutter-Style-Map: ();
#if sgs-has($gutter-style-key) {
$Gutter-Style-Map: sgs-get($gutter-style-key);
}
#else {
$New-Map: sgs-set($gutter-style-key, $Gutter-Style-Map)
}
$Add-Gutter-Style: add-gutter-style($gutter-style-definition, $Gutter-Style-Map);
$HOLDER: sgs-set($gutter-style-key, $Add-Gutter-Style);
}
Then I can define my grids like this...
#include add-grid(2, 'copy grids');
#include add-grid(4 at $breakpoint-xs-min, 'copy grids');
#include add-grid(6 at $breakpoint-l-min, 'copy grids');
$copy-grids: sgs-get('copy grids');
#include add-gutter($gutter-width, 'copy gutters');
$copy-gutters: sgs-get('copy gutters');
#include add-grid(2, 'front grids');
#include add-grid(2 at $breakpoint-2up-min, 'front grids');
#include add-grid(3 at $breakpoint-3up-min, 'front grids');
#include add-grid(4 at $breakpoint-4up-min, 'front grids');
$front-grids: sgs-get('front grids');
#include add-gutter($front-gutter-width-em, 'front gutters');
$front-gutters: sgs-get('front gutters');
$front-gutter-styles: 'split' 'fixed';
...giving me variables which I can pass into the layout function. Right now everything seems to be working, except for the gutter styles, which don't seem to have any effect on output, but that's a different issue.
I am trying to do a Singularity layout with a main container and a sidebar. In the main container I'd like to have a list of floated elements that will get line breaks at each 3.
Here's the relevant gist:
http://sassbin.beta.caliper.pl/gist/8704970/
Unfortunately width(1) + width(2) + width(3) != width(main). What am I doing wrong? I have to use the grid for items 1..N, because they need to align elements in the page's header (not included in the gist).
So after approaching the topic with a fresh mind I managed to get the expected positioning.
Here's a new gist for everyone to compare:
http://sassbin.beta.caliper.pl/gist/8900975/
There where a few things that needed changing:
Add body { margin: 0 } to align the #include background-grid() visualizations with the act.
Remove all borders and replace them with backgrounds to get rid of 1px differences.
Change grid inside item container with #include layout() to match the container's grid-span.
Style items with nth-child and #include float-span().
Specify last for the last item in a row to avoid unexpected line breaks.
The crucial part of the code is:
#main {
#include grid-span(9,1);
background: yellow;
#include layout(9) {
.item {
&:nth-child(3n+2) {
#include float-span(3,1);
background: blue;
}
&:nth-child(3n+0) {
#include float-span(3,1);
background: red;
}
&:nth-child(3n+1) {
#include float-span(3,last);
background: green;
}
}
}
}
I am using the singularitygs for the first time. I was wondering how to remove the left/right margins (gutters)? Like the alpha/omega options in the 960gs. Is there anything like that?
Thank you. I am aware of the $location.
I did not describe my problem properly
so the following scenario:
<article>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
</article>
<sidebar></sidebar>
$grids: 12;
$gutters: .2;
article {
#include grid-span(8);
}
sidebar {
#include grid-span(4, 9);
}
.teaser {
#include float-span(4, 1, 8);
&:nth-child(odd) {
// here i want to remove the right-margin - because otherwise the containers are not floating. dirty way would be: margin-right: 0 !important;
}
}
Singularity has a location variable as the second argument. #include grid-span($width, $location);You can change $location to 1 if it is the first column on your grid or 12 if it is the last column on your 12 column grid.
By default Singularity uses the isolation method of writing grids so this location value is important for moving things around on your grid. You can switch to more traditional floats by writing $output: float;
Actually there is an option to set the gutters which is add-gutter(x);.
For example:
.sidebar {
#include add-gutter(0);
#include grid-span(2, 1);
}
.main {
#include add-gutter(0);
#include grid-span(10, 3);
}
From the docs: https://github.com/at-import/Singularity/wiki/Creating-Grids#gutter-styles.