Avoid span-column to set right-margin for :last-child - sass

Given the HTML :
<div class="parent">
<div class="element"></div>
<div class="other"></div>
</div>
And this Sass :
.parent {
.element {
#include span-columns(2.5 of 8);
}
}
It generates the CSS :
.parent .element {
float: left;
display: block;
margin-right: 3.22581%;
width: 29.03226%;
}
.parent .element:last-child {
margin-right: 0;
}
The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?

I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.
Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.
If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!

Related

Stylelint: Expected declaration to come before rule - order/order

The code is as follows:
.home-feat2 {
background-color: stencilColor("color-greyLight");
img {width: 10rem;}
margin-bottom: spacing("single");
#include breakpoint("medium") {
margin-bottom: 3rem;
}
}
Expected declaration to come before rule - order/order points to the line with margin-bottom: spacing("single"); however I tried looking up what this error meant but I can't find a lot of descriptive documentation on stylelint. Maybe it's because I just don't understand the terminology, but I'm having trouble finding anything on this subject. Any help is appreciated.
Your linters expects you to write declarations before rules.
In CSS, a declaration is the key-value pair of a CSS property and its value, like margin-bottom: spacing("single").
See a visual representation of a declaration block.
A rule is the block defined by one or multiple selectors, containing declarations, like: img { width: 10rem; }.
See a visual representation of a rule set.
What it means for you, it means that you should probably write the rule img {} after the declarations:
.home-feat2 {
background-color: stencilColor("color-greyLight");
margin-bottom: spacing("single");
#include breakpoint("medium") {
margin-bottom: 3rem;
}
img {width: 10rem;}
}
This specific rule purpose is to allow an easy to read code.
When applied, you can see at the first glance that background-color and margin-bottom are applied to .home-feat2 and width is applied to img.
edit: added some additional informations thanks to jeddy3

How do I make a Pinterest Widget Builder Responsive?

The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}

Susy2 Sass: Centering elements vertically inside grid columns?

I'm having a bit of trouble with vertically centering elements inside of grid column.
Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some point.
For instance if I wanted to center these elements vertically in their respective column how would I do that, assuming I am using the default grid settings.
<div class="section">
<div class="col1">Some Text<br/>Some Text</div>
<div class="col2"><img src=""/></div>
<div class="col3">Some Text</div>
</div>
Much thanks for any help
If you want to use table-cell with Susy, you should. Susy was built to be taken apart and customized. You can use the built-in functions in any way you like. I'm no master of table-based layout, but it sounds like you are. As far as Susy is concerned, it would look something like this:
.section {
display: table;
}
.col1, .col2, .col3 {
display: table-cell;
vertical-align: middle;
}
.col1, .col3 {
width: span(1);
}
.col2 {
width: span(2);
}
The span function works the same way as the span mixin, but only returns a width value. Combine that with your table-cells, and you should be good to go.
We're talking about adding a table-cell output option that will do this for you. If you have ideas for how that should work, open up a github issue and we'll talk. I'd love to hear your thoughts.

How can I remove a zen-grid-item mixin declared in a previous media query?

I've been using Zen Grids for responsive layouts for a while now, and somehow never came across this. I've referenced the documentation, but for the life of me cannot figure out how to do something which should be relatively simple.
I have a block which I set on the grid, such as:
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
#include zen-grid-container();
}
.item {
#include zen-grid-item(1, 1);
}
I then have a media query where, for whatever reason, I need to remove the item from the grid completely:
#media screen and (min-width:50em) {
.item {
???
}
}
To be clear, I'm not looking to re-declare the item to a different col-width/position, I just want to remove the mixin from being called completely. I know I can just reset the CSS manually, but was wondering if there was a better way from any Zen Grid ninjas.
Thanks!
Have you tried to just use
.item {
display: none;
}
in your media query? That should hide it and probably remove the spacing it took up as well.

Why is the gutter of my semantic.gs grid always zero?

I am using semantic.gs to create a grid for a webpage. I noticed that whatever I do, I never have any "gutter", meaning in CSS the margin is calculated to 0, despite leaving the default to 20px.
So I took a step back and tried to reproduce this very simple official example:
http://semantic.gs/examples/fixed/fixed.html
The output of my attempt is here:
http://jsfiddle.net/QXpcq/
As you can see, again there is no gutter. The markup is the same, the output CSS is not. My output CSS always shows a margin of 0. You would think this is perhaps due to my input being different from the example, but as far as I can see, it's not. I'm using SCSS, as follow:
#import 'compass';
#import 'grid';
// Specify the number of columns and set column and gutter widths
$columns: 12;
$column-width: 60;
$gutter-width: 20;
// Uncomment the definition below for a percentage-based layout
// $total-width: 100%;
////////////
// LAYOUT //
////////////
// center the contents
div.center {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
// header
header#top {
#include column(12);
margin-bottom: 1em;
}
// main and sidebar
#maincolumn {
#include column(9);
}
#sidebar {
#include column(3);
}
I have snipped the reset CSS code and the CSS that styles the colors and such in the demo. Trust me, they are an exact copy and paste of the official demo as you can see in the fiddle.
The "grid" import is the official download of the grid mixins. I didn't change it. The big mystery here is why with the same markup and SCSS I get different results?
Could it be due to my compilation process? I'm using the Scout app to monitor my SCSS folder. It picks up any change to it and compiles it to CSS.

Resources