Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[refs #00012] Rename Supercell main mixin #13

Merged
merged 1 commit into from
Mar 29, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ like to create. To create a 12 column layout system, simply call the mixin like
so:

```SCSS
@include widths(12);
@include supercell(12);
```

To generate a 12 and a 16 column layout system, call the mixin like so:

```SCSS
@include widths(12 16);
@include supercell(12 16);
```

To generate a 3, a 4, and an 8 column layout system, call the mixin like so:

```SCSS
@include widths(3 4 8);
@include supercell(3 4 8);
```

Supercell will now generate a full suite of classes that will satisfy every
Expand All @@ -124,7 +124,7 @@ To generate a 12 column layout system for use on screens over 1200px wide:

```SCSS
@media screen and (min-width: 1200px) {
@include widths(12, \@large);
@include supercell(12, \@large);
}
```

Expand Down
17 changes: 13 additions & 4 deletions _tools.widths.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@
//
// To create a non-responsive 12 column grid system, simply call:
//
// @include widths(12);
// @include supercell(12);
//
// To create a 3 and 4 column grid system on medium sized screens:
//
// @media screen and (min-width: 720px) {
// @include widths(3 4, \@medium);
// @include supercell(3 4, \@medium);
// }
//
// To create a 1, 2, 3 and 4 column grid system on large sized screens:
//
// @media screen and (min-width: 1024px) {
// @include widths(1 2 3 4, \@large);
// @include supercell(1 2 3 4, \@large);
// }
//
// Basically, we just call the mixin again but inside of a breakpoint of our
// choosing, and with the additional responsive suffix (e.g. `\@large`).

@mixin widths($columns, $breakpoint: null) {
@mixin supercell($columns, $breakpoint: null) {

// Loop through the number of columns for each denominator of our fractions.
@each $denominator in $columns {
Expand Down Expand Up @@ -79,3 +79,12 @@
}

}

// In order to support the legacy `widths()` mixin, let’s create a simple
// wrapper around the new `supercell()` mixin. This allows developers to use the
// older Supercell API. This will be removed in 2.0.0.
@mixin widths($args...) {
@include supercell($args...);

@warn "Support for `widths()` will be removed in Supercell @2.0.0. Use `supercell()` instead."
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "supercell",
"version": "1.0.0",
"version": "1.1.0",
"description": "Grid-like layout system.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
Expand Down