https://github.com/dustin-archive/taffy-break

Sweet responsive breakpoints
https://github.com/dustin-archive/taffy-break

breakpoint breakpoints extend mixin mixins placeholder responsive sass scss taffy

Last synced: about 2 months ago
JSON representation

Sweet responsive breakpoints

• Host: GitHub
• URL: https://github.com/dustin-archive/taffy-break
• Owner: dustin-archive
• License: mit
• Created: 2016-03-18T01:58:43.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-12-04T06:10:27.000Z (about 8 years ago)
• Last Synced: 2024-11-07T11:12:23.749Z (2 months ago)
• Topics: breakpoint, breakpoints, extend, mixin, mixins, placeholder, responsive, sass, scss, taffy
• Language: CSS
• Homepage:
• Size: 16.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Break

===

> Sweet responsive breakpoints

## Why?

+ Built for synchronizing grids and breakpoints

+ Easily extend content across at-rules

## Getting Started

+ Install with Bower

+ Import dependencies

```

$ bower install --save taffy-break

```

```scss

@import 'bower_components/taffy-break/scss/main';

```

## Variables

+ `$break-amount` sets the amount of breaks

+ `$break-max` sets the max break width

#### Using Variables

The default `$break-amount` is set to `12` and the default `$break-max` is set to `80em`. To override these defaults set the variables before importing the dependencies.

```scss

$break-amount: 6;

$break-max: 40em;

@import '../bower_components/taffy-break/scss/main';

```

## Breaks

+ Generates media queries that represent breaks or columns

+ Calculated with `$break-amount` and `$break-max` variables

+ Accepts one argument that defines which break to use

#### Using breaks

In this example the code inside this break will activate after the browser width exceeds the 2nd break.

```scss

.break {

  @include break(2) {

    // ...

  }

}

```