Seed Breakpoints - v0.4.0

Changes

Removes xl as a default size.

We did this because we didn't feel like we got much use out of the xl breakpoint.
This will also reduce the final file size of .css files that loop through the breakpoint sizes for responsive modifiers (such as seed-spacing or seed-grid).

Seed Breakpoints - v0.3.2

Fixes breakpoint-max / between mixins

The calculations were 1px off. If the breakpoint exists, the max width needs to be $max-width - 1px.

Bootstrap v4 breakpoint docs have some good examples of this:
http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

This issue was first spotted by @jaredmcdaniel

Note: This 1px offset only applies to breakpoints specified in $seed-breakpoints. If you pass in a custom number, it will use that number exactly.

---

Before:

// .scss
.class {
  @include breakpoint-max(md) {
    ...
  }
}

// .css
.class {
  @media (max-width: 768px) {
    ...
  }
}

After:

// .scss
.class {
  @include breakpoint-max(md) {
    ...
  }
}

// .css
.class {
  @media (max-width: 767px) {
    ...
  }
}

Seed Breakpoints - v0.3.0

Changes

• adds $seed-breakpoints-at-namespace variable
• sets namespace variable to @ symbol
• updates mixins to use at-namespace
• adds/updates seed build scripts

This change was made to better follow the ITCSS naming conventions for responsive classes.

The compiled stylesheet (.css) will show the classes like:
.class\@sm { ... }

However, your markup can just be:
<div class="class@sm">...</div>

Note

From this version forward, scss code utilizing the breakpoint mixins will now have altered (default) compiled responsive classes.

If you prefer using the older --at-size convention (or establish your own personal conventions), you can modify the new $seed-breakpoints-at-namespace variable.

Seed Breakpoints - v0.2.0

Important note for Packs!

The previous pack structure had a namespace issue that could potentially prevent the importing of .scss files of the same name.

This update fixes that issue, and renames the __all.scss main file to __index.scss.

The new @import method will be like:

@import "pack/seed-salad/_index";

The scheme works like:
pack -> Namespace to identify that this is a seed pack
seed-salad -> The name of the seed pack
_index -> The file(s) to import

Example of new naming scheme for importing mixins (of the same name) files from multiple packs:

@import "pack/seed-hamburger/mixins/sauces";
@import "pack/seed-pizza/mixins/sauces";
@import "pack/seed-hotdog/mixins/sauces";

See https://github.com/helpscout/seed-cli/releases/tag/0.2.0

Seed Breakpoints - v0.1.0

Changes

• Removes the breakpoint-all-map mixin (which did very little)
• adds seed-props as a dependency to gain access to prop-map mixin
• creates breakpoint-prop-map, which combines the functionality of breakpoint-all and prop-map

Important

This release adds seed-props as a dependency. Prior to this, seed-breakpoints had zero dependencies. This might break implementations of seed-breakpoint, specifically with the includePaths option for node-sass.

If an issue occurs, you might have to adjust your includePath array. sass-pathfinder is a quick/easy way to help resolve issues :).

Seed Breakpoints - v0.0.3

Changes

• adds breakpoint-all-map mixin

Can be used like this:

// Input
$classmap: (
  1: 10px,
  2: 20px
);
@include breakpoint-all-map("classname-", $classmap, font-size);

// Output
.classname-1 {
  font-size: 10px;
}
.classname-2 {
  font-size: 20px;
}
@media (min-width: 544px) {
  .classname-1--at-sm {
    font-size: 10px; }
  .classname-2--at-sm {
    font-size: 20px; }
...

Sorta addresses #2.

This would only be truly useful if Sass supported callback functionality or @content variable usage. Unfortunately, this hasn't happened yet

Seed Breakpoints - v0.0.2

Release

This mixin library was abstracted from seed-grid