Skip to content
This repository has been archived by the owner on Jul 14, 2023. It is now read-only.

Add grid-shift mixin allowing for the reordering of columns #481

Merged
merged 1 commit into from Jul 23, 2016

Conversation

whmii
Copy link
Contributor

@whmii whmii commented Jul 17, 2016

Using relative positioning of columns, grid-shift allows the user to move a grid column a specified number of columns to the right or left. This is distinct from the grid-push mixin in that push is better suited for positioning an object on the page while shift is better at reordering 2 or more grid objects. It should be said that shift also adds the relative positioning attribute.

The following is an example image of the following markup:

<div class="grid__column--8 grid-shift--4 box">First</div>
<div class="grid__column--4 grid-shift--neg-8 box">Second</div>

screen shot 2016-07-17 at 2 05 47 pm

@@ -1,7 +1,8 @@
.box {
background-color: $color-neat-blue;
height: 30px;
min-height: 30px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered background-color, margin-bottom, min-height, padding
Prefer using placeholder selectors (e.g. %some-placeholder) with @extend

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

@whmii whmii mentioned this pull request Jul 17, 2016
This was referenced Jul 18, 2016
@@ -1,7 +1,7 @@
.grid-push--3 {
@include grid-push(3);
.grid-shift--4 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this partial now be called _grid-shift.scss instead of _grid-push.scss?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait…did you mean to make these changes in this partial?

Are they a dupe of _grid-shift.scss below?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

woops! good catch gach!

@joshuaogle
Copy link
Contributor

joshuaogle commented Jul 22, 2016

🎂 After that push stylesheet gets fixed

@whmii whmii merged commit 51a45cb into neat-2.0.0 Jul 23, 2016
@whmii whmii deleted the neat-2.0.0-grid-shift branch July 23, 2016 19:29
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants