Susy 2 and Breakpoint - susy

I am finally transitioning over to Susy 2 from Susy One and have been struggling a bit with the new syntax. Specifically, using it with the Breakpoint mixin.
In Susy One, I had this:
// Mobile First Settings
.grid-construct{
$total-columns: $bp-sm-columns;
$column-width: $bp-sm-column-width;
$gutter-width: $bp-sm-gutter-width;
$grid-padding: $bp-sm-grid-padding;
$container-width: $bp-sm-container-width;
$container-style: $bp-sm-container-style;
#include container;
}
//for medium devices
#include breakpoint($breakpoint-md) {
.grid-construct {
$total-columns: $bp-md-columns;
$grid-padding: $bp-md-grid-padding;
#include container;
}
}
// large devices
#include breakpoint($breakpoint-lg) {
.grid-construct {
$total-columns: $bp-lg-columns;
$grid-padding: $bp-lg-grid-padding;
#include container;
}
}
I was then able to write styles such as:
.my-style{
margin-top: 10px;
#include breakpoint($breakpoint-md) {
margin-top: 20px;
}
#include breakpoint($breakpoint-lg) {
margin-top: 40px;
}
}
An example of my HTML markup:
<div class="grid-construct">
<div class="my-style">
Lorem ipsum
</div>
</div>
Is this pattern portable to Susy 2? Would I need to make 3 individual $susy maps for my 3 respective breakpoints?

In your example, the only thing changing at the different breakpoints is the size of the container based on number of total columns (Susy 2 doesn't have grid-padding because you can add that easily yourself). If you set up the basic $susy map the way you want it, you can use the shorthand to override that as you go:
.grid-construct {
#include container;
#include breakpoint($breakpoint-md) {
max-width: container($bp-md-columns);
}
#include breakpoint($breakpoint-lg) {
max-width: container($bp-lg-columns);
}
}
(I used the container function because that max-width is all you really need to override)
You can also use susy-breakpoint to change the settings for the entire breakpoint block:
#include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
#include container;
}

Related

Applying css style to Gtk::ToolButton is not working with a selector in gtkmm

I am trying to set an application wide css style in gtkmm-3.0 .This is how i initialize and load the style:
#include "MainWindow.h"
#include <string>
#include <iostream>
const std::string style = R"(
toolbutton {
border-color : #000000;
border-width : 1px;
border-radius: 0px;
}
)";
void loadStyle()
{
try
{
auto css = Gtk::CssProvider::create();
css->load_from_data(style);
Gtk::StyleContext::add_provider_for_screen(
Gdk::Screen::get_default(), css,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
);
}
catch(const Gtk::CssProviderError error)
{
std::cerr << "Failed to load style:" <<error.code() << std::endl;
}
}
int main(int argc, char *argv[])
{
auto app = Gtk::Application::create(argc, argv,"com.test");
loadStyle();
MainWindow window(800, 600);
window.show_all();
return app->run(window);
}
MainWindow is just a Gtk::Window that has a Gtk::Toolbar with a few Gtk::ToolButton.
But for some reason the style isn't getting applied to my ToolButton's at all. If i change my stylesheet selector to "select all elements" it get's applied to my toolbuttons:
* {
border-color : #000000;
border-width : 1px;
border-radius: 0px;
}
So i am assuming my code is correct and the selector in my stylesheet is wrong.
However the documentation says GtkToolButton has a single CSS node with name toolbutton.
I am currently not setting any names or classes myself using set_name or add_class.
What am i doing wrong?
when we create Gtktoolbutton it's actually using Gtkbutton.
so in your css if you add
toolbutton button {
it will work.
gtkcss can be kinda confusing to learn as you wont find proper documentation(well I was not able to find a very detailed doc and all).. it's better to use GtkInspector to debug gtk css..

Susy Gallery Center Last Row

Using Susy 2 and trying to center the last row in the susy gallery. Interestingly enough I only have an odd number of logos needed to be displayed. 15 in total. I tried just putting the last 3 in a separate div and messing with that but that seems like I'm adding more un-needed code. Any ideas? Many thanks in advance!
Here is a mixin I found on here awhile back for replacing the nth-omega function nixed from Susy 1:
#mixin nth-last($n, $type: child) {
&:nth-#{$type}(#{$n}) {
#include last;
}
}
I tried simply to just do span cols first
.partner {
#include span(3 of 12);
#include nth-last(4);
}
then used the gallery
.partner {
#include gallery(3);
}
Here is the HTML
<div class="logos">
<div class="partner"><img src="images/partners/envestnet.jpg"/></div>
<div class="partner"><img src="images/partners/guggenheim.jpg"/></div>
<div class="partner"><img src="images/partners/usbancorp.jpg"/></div>
<div class="partner"><img src="images/partners/advent.jpg"/></div>
<div class="partner"><img src="images/partners/charles-schwab.jpg"/></div>
<div class="partner"><img src="images/partners/bloomberg.jpg"/></div>
<div class="partner"><img src="images/partners/stifel.jpg"/></div>
<div class="partner"><img src="images/partners/pershing.jpg"/></div>
<div class="partner"><img src="images/partners/credit-suisse.jpg"/></div>
<div class="partner"><img src="images/partners/fidelity.jpg"/></div>
<div class="partner"><img src="images/partners/sp.jpg"/></div>
<div class="partner"><img src="images/partners/ultimus.jpg"/></div>
<div class="partner"><img src="images/partners/hsg.jpg"/></div>
<div class="partner"><img src="images/partners/deutsche-bank.jpg"/></div>
<div class="partner"><img src="images/partners/interactive-brokers.jpg"/></div>
</div>
There's no good way to do centering with floats, so you'll need to use a different technique all together - either on the full list, or on the last three. My preference for this is using flexbox, but that excludes some older browsers. Another option might be using inline-block, but that comes with it's own challenges. In either case, there are no Susy mixins to do it for you, but you can use susy functions (span and gutter) to keep you aligned to the grid:
.logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.partner {
width: span(3 of 12);
margin-right: gutter(12);
&:nth-child(4n),
&:last-child {
margin-right: 0;
}
}
Stumbled over the answer today and couldn't use flexbox for several reasons.
My solutions with #gallery seems to work well. I was even able to reset a previously created centering which seems necessary if you're adjusting the gallery sizes in media queries.
NOTE: that i'm using #breakpoint in the following example:
article {
#include breakpoint($medium-up) {
#include gallery(6 of 12);
&:last-child:nth-last-child(2n + 1) {
background-color: red;
margin-left: auto;
margin-right: auto;
float: none;
}
}
#include breakpoint($large-up) {
#include gallery(4 of 12);
&:last-child:nth-last-child(2n + 1) {
background-color: green;
margin-left: get-span-width(8 of 12 wide);
margin-right: -100%;
float: left;
}
}
}
I had some trouble figuring out how i could recalculate the given offset and after digging through the gallery() -> get-isolation() -> get-span-width() function of susy itself i was able to find it here.
EDIT:
I've also found this article and codepen which can help too.

The $susy setting global-box-sizing doesnt change anything in Susy2

This is something which I never understood in Susy 2.
Looking at this simple example shows:
http://codepen.io/itsthomas/pen/Btzxa
HTML:
<div id="wrapper">
<div id="content">
<div class="box1">Box1</div>
<div class="box1">Box1</div>
<div class="box1">Box1</div>
</div>
<aside>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
</aside>
</div>
SASS:
#import 'susy';
#include border-box-sizing;
$susy: (
container: 90%,
columns: 24,
gutters: 1/3,
/* global-box-sizing: border-box, */
debug: (
image: show,
output: overlay,
),
);
#wrapper {
#include container;
}
#content {
#include span(18 first);
background-color: red;
height: 100px;
padding: gutter();
}
aside {
#include span(6 last);
background-color: #F0A754;
padding: gutter();
}
.box1 {
#include span(6 of 18);
height: 40px;
background-color: #6D4214;
&:last-child {
/* margin-right: 0; */
#include last;
}
}
that adding the global-box-sizing: border-box, to the $susy map doesn't change anything at all, regardless if you use #include border-box-sizing; in your code or not.
The $susy setting global-box-sizing seems completely useless to me. Or am I overlooking anything?
Thanks
That's right. global-box-sizing is actually descriptive, not prescriptive. It tells Susy how you have set your global border-box. By default it is set to content-box (the browser default, and the border-box-sizing mixin will set it to border-box for you automatically. The only time you ever need to change the setting manually is if you set the global box sizing manually.
Susy needs to know what box-model you are using because it changes the math for certain grid types and functionality — anywhere padding and width might interact, like inside/inside-static gutters or bleed. You may not have any of these situations in your code, in which case that setting doesn't matter.

figuring out sass mixins

I am brand new to sass and am trying to get my head wrapped around mixins and using if/else statements inside of mixins. I'm trying to write something simple that basically says if the width setting of a selector is greater than 50% it will be a certain color, otherwise it will be a different color.
Here is the code I have so far:
#mixin color-class($width) {
#if "$width > 50%" {
background-color: purple;
} #else {
background-color: orange;
}
}
.selector-two {
#include color-class(40%);
}
.selector-three {
#include color-class(80%);
}
The css outputs the color as purple no matter what value I put here so I'm definitely missing something, any help would be greatly appreciated.
try removing the ":
#if $width > 50% {}
You can quickly experiment with it here: http://sassmeister.com/

Why does the Qt Stylesheet "Foo:hover * {" always apply?

I have a list of items which I want to shade the currently selected one. The problem is that the Foo widget has children and when the following rule always applies instead of just on hover:
Foo:hover {
background-color:#00FFFF;
}
Foo:hover * {
background-color:#00FFFF;
}
How do I fix this?
Your syntax is wrong. It should be like this:
Foo *::hover{ background-color: #00FFFF; }
Or if you only want to apply this to direct children:
Foo > *::hover{ background-color: #00FFFF; }