I am getting started with Compass and Susy. My goal is to make my layout adapt to phone, tablet, and desktop screen sizes.
In the Susy examples (susy.oddbird.net or SO question), there is a pattern of having the number of columns adapt to the screen size. Specifically, there are nested rules like these:
.container {
#include container;
#include desktop {
#include container;
}
}
My questions now: What does the container { #include container } do? And, why is it nested again in the desktop include?
The container mixin establishes the width of your page. You only need to repeat it at different breakpoints if that width should change (as they would with adaptive layouts). If you are using a fluid grid, there is no need for the repetition.
Related
trying to re-write another's template (which works well and is written in raw css3 – but is very messy).
Most stuff is easily translated to bourbon/neat but I'm stuck on getting up a responsive image grid.
<section class="page-content">
{% for post in site.posts reversed %}
<div class="myevent" style="background-image:url({{post.cover}});">
{% endfor %}
</section>
inside an outer-container I have a set of dynamically generated divs (using jekyll's tempting) and on large screens I have each div taking up span-columns(4) [I have media queries that change columns to 8 and 4 depending on width].
Each div has an image as a background and a header text label.
If this was a fixed screen with no side borders (i.e. each div was 33% of the width it would be simple to add 33vw as the div height to go square
My problem is getting the div to be square. As I do not know in advance what screen width, how much side padding the outer-container gets, how many columns, if there is a gutter (yes normally but no in single column) .....
.page-content {
#include outer-container;
}
.myevent {
#include span-columns(4);
#include omega;
//
// has to be square - can't figure out how to calculate this
//
}
.nth-element {
// clear gutter every third
#include omega(3n);
}
// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.
I am at a loss how to calculate the actual width of the .myevent and setup the height of these divs to equal to the width
One possible answer for this (and the solution I would probably use) is to relatively position the span-column object and absolutely position the content inside of it. Then I would add something like:
.my-cool-column {
position: relative;
&::before {
content: "";
display: block
padding-top: 100%;
}
}
This'll cause the padding top to be equal to the width of the parent element. That should work.
I'm building a website using susy fluid grid container. But some of my interface elements require fixed width. So having these settings:
$susy: (
columns: 12,
container: rem-calc(1680),
gutters: 28px/112px,
global-box-sizing: border-box,
gutter-position: split
);
I would like to easly get for example 8 column span, but staticly. So #include span(8 of 12) would result with precentage value, which is fine, but in certain cases I'd like to get the static value (based on container fixed max width ofcourse).
Is it possible?
In your susy global settings above you can add:
math: static
But in order to do so you need to include the column-width object as well.
So let's say you want to have each column with 40px width, using your example it goes like this:
$susy: (
columns: 12,
...
math: static,
column-width: 40px
);
When you do #include span instead of using % basis, it will use px base which as you want it as static.
Yes - you can pass in static as an argument for any Susy function or mixin where you want static output — #include span(8 of 12 static) — as long as you have a column-width or container set. (don't set both, or there's potential for conflicts)
update: oh, I see this was mentioned in a comment above...
For whole site there is very easy with Bootstrap3 instructions
But what if I had a small container, e.g. 400px and need to turn off responsiveness inside this container? I need fully functional Dropdown in my navbar, but when responsive is on, dropdowns in small containers are not like "popups", they opens inside navbar and stretch them out.
Also, I can't compile my own bootstrap version without responsive styles, because I need to use CDN (cdnjs).
If I understood your question/problem properly, then define .container class as below in custom stylesheet. (assume that you wish to ha max width of 400px screen. change it accordingly.)
#media screen and (min-width:401px) {
.container {
max-width:400px;
}
}
And then use col-xs-xx - (xx is column number) classes only.
I've defined a Susy-based responsive grid system handling 4 (mobile), 8 (tablet) and 12 (desktop) columns. My layout is having a fixed header bar which is divided in two sections "logo" and "toolbar".
The "logo" div is not nested within Susy's grid-container and is positioned absolute to always be on the very left.
The "toolbar" div contains the Susy grid-container and holds a search- and a logout-action - so far so good :)
When resizing the browser its in the nature of the grid to change total-columns when there's no more space for say 12 columns. This causes following problem:
The "logo" div gets overlapped by the grid since its positioned absolutely.
Is there a way to tell Susy to break the layout to 8 columns before the black border of the "logo" div is being reached?
Any advice would be highly appreciated. Thanks in advance.
#Eric: I managed to get it working. This is what is used:
#mixin update-container {
#include container;
#include susy-grid-background;
}
.page {
#include update-container;
#include at-breakpoint(865px 8 1149px) {
#include update-container;
}
#include at-breakpoint(1150px 12) {
#include update-container;
}
}
So I've explicitly described the min- and max widths to tell the columns when to change. Is this the "right" way to go or is there any more elegant way for solving this?
Thanks :)
I have 4 elements with widths set at #include span-columns(3,12) this outputs each element at 25% which is fine, what I would also like to do is add margin to each element but doing this breaks the layout of these elements as the 25% width and % margin get added together. Can anyone advise how I can combine the margin in with the width?
SCSS
.m-info-col{
.col{
#include span-columns(3,12);
// tried this margin-right: columns(.5,12);
&:last-child{
#include omega;
}
}
}
If you have your container set up with 12 columns and have set $gutter-width to a value, then each column has $gutter-width gap (margin if you like).
If you implement susy grid backgrounds using:
$show-grid-backgrounds : true;
and inside your container context:
#include susy-grid-background;
You will see the gutters behind your design.
You can also add padding into the span-columns mixin (3rd param). This does not always work as expected though.
Another way I have used is the squish mixin and it adds columns as margins. This works quite well but I have not tried using 0.5 columns as the squish amount.