• Stars
    star
    2,091
  • Rank 22,090 (Top 0.5 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 12 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Really simple media queries in Sass

Breakpoint npm version downloads per week test status

Really Simple Media Queries with Sass

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, the Respond-To syntax is now included in Breakpoint core!

It is important to note that due to limitations within the Sass language itself, which themselves stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoidable. That being said, once Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet hits, be sure we're going to take full advantage of it.

Full documentation is available on the Breakpoint Wiki

Getting Help with Breakpoint

  • For help with Breakpoint, please ask a question on Stack Overflow tagged with "breakpoint-sass".
  • To file an issue with Breakpoint, be it a feature request or a bug report, please use our Issue Queue.
  • Each Separate Bug Report or Feature Request Must Have Its Own Issue
  • Search in both active issues and closed issues before filing your own. If one already exists, please respond there.
  • If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on irc.freenode.net. Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to

Contributing to Breakpoint

We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the Contributing Guidelines

License

Licensed under MIT

MIT license: http://www.opensource.org/licenses/mit-license.php

More Repositories

1

Singularity

Grids without limits
CSS
1,504
star
2

toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass
CSS
912
star
3

color-schemer

A sassy way to build color schemes
CSS
376
star
4

SassyLists

SCSS
275
star
5

jacket

Conditional Styles with Sass. Dress you CSS appropriately.
CSS
232
star
6

animation-studio

Compass extension for creating advanced animations in CSS
JavaScript
184
star
7

Sassy-math

Complex math functions for Sass
CSS
164
star
8

node-sass-import-once

Eyeglass style Import Once, but for all the things!
CSS
94
star
9

Sassy-Maps

Map helper functions for Sass 3.3 and up
CSS
66
star
10

sass-a11y

Accessibility helpers for Sass
CSS
56
star
11

Singularity-extras

singularity-extras
CSS
49
star
12

SUCKS

It's an idea, it's a way of working, it's full of stars. No really, it's about Sass'd Up Consistently Killer Styles. OOCSS, SMACSS and BEM only take you so far. Let's turn it up to 11 and change the world forever!
42
star
13

Sassy-Strings

Advanced string handling for Sass
Ruby
41
star
14

Compass-Extension-Template

A generic template for creating a Compass extension
Ruby
38
star
15

sassytextshadow

Sassy Text Shadow is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
Ruby
33
star
16

Style-Sites

A responsive style page for style tiles and generating a style guide
JavaScript
32
star
17

navigator

A Ruby testing framework for Sass with Compass
Ruby
12
star
18

generator-compass-extension

Yeoman Generator to create Compass Extensions
JavaScript
11
star
19

uikit

Beautiful and flexable UIs with Sass and Compass
Ruby
9
star
20

canisass

A website to show what features are available in each version of Sass
8
star
21

griddle

Simple set of abstractions for CSS Grid
CSS
6
star
22

try

Sass Mixins for designing in the browser
CSS
2
star
23

yolo

lulz
CSS
2
star
24

Compass-Test-Suite

A generic test suite for Compass extensions
Ruby
1
star