Working on a Drupal site with a Zen sub theme, I ditched zen-grids for susy. I have been playing around with Susy and it works nicely. But here is my question.
I have a layout with two main columns: #content (holding the main content; a grid of three rows of four images with a width of 181px) and div.region-sidebar-second (holding the main navigation).
My designer came up with a 960px layout, where the #content container’s width is 750px then there is a 8px right-margin and div.region-sidebar-second has a width of 202px.
In my responsive.scss I put:
.sidebar-second {
#content {
#include span-columns(9, 12);
}
.region-sidebar-second {
#include span-columns(3 omega, 12);
}
}
So #content uses the first 9 columns and .region-sidebar-second uses the last 3 columns. But this does not translate to 750px/8px/202px.
The percentages that susy calculates are correct, of course, but for my layout I would need Susy to calculate different percentages.
E.g. Susy calculates for #content
.sidebar-second #content {
float: left;
margin-right: 1.40845%;
width: 74.6479%;
}
and for
.sidebar-second .region-sidebar-second {
float: right;
margin-right: 0;
width: 23.9437%;
}
In order to meet the design requirements I would need a width: 78.125% for #content, .833333% for margin-right and a width: 21.0416666% for .region-sidebar-second
Not sure whether this can be achieved with Susy span-columns. If you have a quick idea this would be very much appreciated. Thanks.
Related
I did some google search, but could not find out what is the default pixel value (1 rem) for edge. If someone could put a link here, that will be appreciated. e.g. xx pixel === 1 rem, for edge.
I haven't found any doc talking about it, but I can give you an answer: 16px === 1rem in Edge (with font size set to "Medium" in Edge settings).
I did a simple test. I set the font-size in CSS to be 1rem, and inspected its pixel value in DevTools. It says 16px. See the pic below:
But if you change the font size inside browser, this equation will break. Simply put,
Very small: 9px === 1rem
Small: 12px === 1rem
Medium: 16px === 1rem
Large: 20px === 1rem
Very large: 24px === 1rem
I created a pie chart in React using the svg pattern from this tutorial https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
With four pieces I have
For all four pieces:
stroke-dasharray: 25, 100;
For each piece I also have:
stroke-dashoffset: 0;,
stroke-dashoffset: -25;,
stroke-dashoffset: -50; and
stroke-dashoffset: -75;
Problem is I get a gap between the first and the last piece so the pieces does not fully fill the circle.
I managed to figure out the answer by looking at this similar thread SVG circle has a gap
It turned out I had a radius of 16 the full circle was more than 100%. Setting stroke-dasharray: 100,53and dividing my radius by 1.0053 helped.
It looks "broken". Transform origin of the right element is out of place. I am trying to make this box "solid", but it scatters.
http://codepen.io/HappyHarlequin/pen/bZWQro
svg:hover #right{
animation: open_right 1s linear infinite;
animation-direction: alternate;
}
svg:hover #left{
transform-origin: 0% 50%;
animation: open_left 1s linear infinite;
animation-direction: alternate;
}
#keyframes open_right{
0% {
}
100% {
transform-origin:100% 50%;
transform: rotate(230deg) rotateX(-230deg)
}
}
#keyframes open_left{
0% {
}
100% {
transform-origin: 0% 50%;
transform: rotate(-230deg) rotateX(230deg)
}
}
rotateX() is a 3D rotation and you can't do 3D transformations on elements inside an SVG. You can only apply two dimensional transforms to them (rotate, scale, translate etc in X and Y only)
Even if you could do 3D transforms, you are trying to apply a 3D transform to something that is a two dimensional shape drawn to look like it is 3D. So it would not work anyway.
Possible approaches
You could:
Stick with 2D and use keyframe animation to animate your box flaps. Draw a series of keyframes of your flaps as they open. Then step, or morph, between those shapes.
Change your flaps to be HTML elements, such as a <div>. Then position them so that they line up with your fake 3D box and have the right amount of perspective. Then you can apply a 3D rotation to those.
Switch to a proper 3D box and animate that. There are various JS libraries that can help you with that, such as three.js.
I have designed a layout using 978px as the grid width, with 12px of grid padding. I've never really understood the purpose of grid padding, to be honest, and now I am even more confused, because I thought the grid padding would apply to the inside of my total width so things don't rest right at the edge of the grid.
For example, my header has a background color of #333. I span the logo section 3 columns, but it doesn't look good because it's right at the edge. If I add 12px of padding to the inside of the header, it messes up my column flow, obviously. I tried adding it to the span-columns mixin, like #include span-columns(3, 12, 12px 0px), but the padding is too wide, and I don't think this would be efficient because I would want it on everything that is on the left and right.
So what is the best way to get padding on the inside of the grid?
Here is a little structure:
page-wrapper (container)
#page
header#header
main
footer#footer
I tried adding padding to the #page-wrapper and #page divs, but this didn't work.
/***** UPDATE *****/
Here is a screen shot of what I am trying to achieve:
This is the desktop layout, that I want responsive, so the padding effect I would like to be the same throughout layouts. Basically, the grid in the screen shot is a total width of 1002, with 12px on the side, 12- 54px columns, and 11- 30px gutters.
this is a fireworks template, so my 320 page is 8 columns, 27px wide, with 12px gutters, and 10px gutter width. I am starting to think I am designing wrong, as I mentioned before, I don't really understand the point of grid padding.
As you can see, I would like there to be padding on the sides of the container which by default everything rests on the edges.
Here is a code snippet of my set up:
$total-columns : 8;
$column-width : 27px;
$gutter-width : 12px;
$grid-padding : 10px;
$container-style: fluid;
$full: 747px 12;
$tablet: 747px 12 977px;
$desktop: 978px 12;
#page-wrapper{
#include container;
#include susy-grid-background;
#include at-breakpoint(747px 12 977px){
#include set-container-width;
max-width: 747px;
#include susy-grid-background;
}
#include at-breakpoint(978px 12){
#include set-container-width;
max-width: 1002px;
#include susy-grid-background;
}
Now here is something I did by checking on that other post, and it seems to work, but I am not sure if it is the right way to do it:
#header{
margin-left: -$grid-padding;
margin-right: -$grid-padding;
padding: 0 $grid-padding;
margin-bottom: 1em;
}
Your screenshot link is broken, but if I understand right you simply want your outer grid elements to span the grid padding. For that, I use the technique you mentioned, although doing it by hand can be a pain if you want it too many places on the site. Here's a mixin that I've created to handle this kind of "bleed" in a flexible way:
#mixin bleed($padding: $grid-padding, $sides: left right) {
#if $sides == 'all' {
margin: - $padding;
padding: $padding;
} #else {
#each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
The default setting there is to add $grid-padding bleed to the left and right. You can change the size of the bleed, and also the sides that it should apply to. You can apply it like this:
#header { #include bleed; }
#nav { #include bleed($sides: left); }
#main { #include bleed($sides: right); }
You have a few other strange bits of code. By default, Susy build what I call a magic grid: fluid with a max width. Instead of allowing that to happen by default, you are forcing your grids fully-fluid ($container-style: fluid;), including set-container-width (which would set the max-width if you hadn't turned it off, but is now doing nothing useful for you) and then adding a max-width by hand.
You also mention wanting different column and gutter widths at your different sizes. For that you will want to use with-grid-settings inside your breakpoints. e.g:
#include at-breakpoint($desktop){
#include with-grid-settings(12,54px,30px,12px) {
#include set-container-width;
#include susy-grid-background;
}
}
I 'm trying to create a two sided box shadow in two seperate elements, sandwiched by a three sided box shadow on the bottom and a three sided box shadow element on top. Like the image below:
I'm close, but as you can see, there is a bit of a space issue between the 3rd and 4th elements, and the top shadow is stopping in the middle for some reason...here is the CSS I have:
#tile1{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 -2px 5px 5px #319a00;
}
#tile2{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00;
}
#tile3{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00;
}
#tile4{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 3px 5px 5px #319a00;
}
Any ideas on how to make this happen? I can't just put a box shadow to the whole div because I'm going to have these element toggle.
You CAN put a box-shadow on the whole div even if you're going to toggle those inner elements. All you have to do is put a min-height property (make this equal to the height when all the boxes are toggled off) on your div instead of the height property and it will work.