Questions tagged [breakpoint-sass]

Breakpoint: A SASS/Compass extension to set media queries

Breakpoint is a SASS/Compass extension that 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, check out the Respond-To syntax, now included in Breakpoint core, or jet-propelled Breakpoint Slicer mixins.

Documentation: https://github.com/Team-Sass/breakpoint/wiki

61 questions
26
votes
7 answers

Why is the window.width smaller than the viewport width set in media queries

I am quite puzzled and still unsure how to explain this in proper words. So far i've used and set up my media queries with Breakpoint. An used Breakpoint-variable looks like e.g.: $menustatictofixed: min-width 900px; $breakpoint-to-ems is set to…
rkoller
  • 1,424
  • 3
  • 26
  • 39
6
votes
1 answer

Can I set a Sass variable inside a breakpoint?

Is it possible to set the value of a variable once, inside a single sass-breakpoint, rather than each time I use the variable? In other words, I'd like to do this: $tab: 600px; $wp: 100%; @include breakpoint($tab) { $wp: 95%; } .alpha { //…
David
  • 1,167
  • 15
  • 24
6
votes
2 answers

Breakpoint Sass: Or Queries for Multiple Breakpoints

I have a few breakpoints set: $breakpoint-tiny : 0 767px; $breakpoint-small : 768px 991px ; $breakpoint-medium : 992px 1229px; $breakpoint-large : 1230px; I saw in the breakpoint docs You can also write OR media queries, allowing you to write…
christian
  • 2,279
  • 4
  • 31
  • 42
5
votes
1 answer

How to achieve landscape and pixel ration media query with sass-breakpoint

How to achieve this media query with sass breakpoint? ... @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) I've tried this, but it affects…
Ruby
  • 2,207
  • 12
  • 42
  • 71
3
votes
0 answers

How To Use Breakpoint With Rails, But Without Compass

It appears that Breakpoint no longer has a compass dependency (see here), but I cannot get it working with Rails 4 unless I add compass and require it through application.rb. It seems that without compass, breakpoint is not exposed as a resource, so…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
3
votes
3 answers

Sass Breakpoint won't work - what am I doing wrong?

I just installed Breakpoint, added require "breakpoint" to my config.rb, and defined these breakpoints $mobileMedium : 480px; $tabletVertical : 768px; $desktopNormal : 1024px; $desktopWide : 1200px; to my _breakpoint.scss. When I tried to use one…
2
votes
0 answers

How can i change/add a breakpoint in Foundation 6?

i started a new project using Foundation 6 and there is one problem i can't fix. My Topbar has a lot of links and when it comes to <= 800px the topbar breaks into two columns, so that it doesn't look good anymore. Now i want to add a new breakpoint…
2
votes
2 answers

How to import ruby gems (breakpoint) with webpack?

I've installed susy and sass, and set up the css/sass loader in the webpack config: { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') } Here is my main scss file: @import "~susy/sass/susy"; @import "breakpoint"; $susy: ( columns:…
BILL
  • 4,711
  • 10
  • 57
  • 96
2
votes
1 answer

SingularityGS: How to code float-span variations with breakpoints?

I have a float-span layout which contains a number of tiles in a 12 column grid. At breakpoint 600px I want this to display float-span(2) and at 1024px I want float-span(4). I am finding that the smaller breakpoint layout displays as intended but…
MrPaulDriver
  • 243
  • 1
  • 13
2
votes
0 answers

Rails 4. Breakpoint gem path error. File to import not found or unreadable: breakpoint

Problem: I have a basic Rails 4.0.10 project where I want to use breakpoint for media queries. My Gemfile: source 'https://rubygems.org' gem 'rails', '4.0.10' gem 'sqlite3' gem 'httparty' gem 'requirejs-rails' gem "github_api" gem…
vvahans
  • 1,849
  • 21
  • 29
2
votes
1 answer

Singularity responsive gutter widths

I use Singluritygs and Breakpoints (with the included respond-to) and I want my global gutter width to change according to those breakpoints. I thought this would work, but it doesn't: $breakpoints: add-breakpoint('small', 768px); @include…
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
2
votes
1 answer

susy 2.0 change columns at breakpoint

I'm not using Compass I prefer to use Breakpoint.scss I'm on susy 2.0 I know there are lot of posts with this question but I'm having 0 luck finding any regarding Breakpoint.scss and Susy 2.0 on this topic. @import "susy"; @import…
zebapy
  • 643
  • 1
  • 5
  • 21
1
vote
1 answer

Breakpoint Sass conflict

When I do compass watch in my project after following the instructions to install breakpoint, i get this: Unable to activate breakpoint-2.4.6, because sass-3.4.23 conflicts with sass (~> 3.3.0) I have no idea what I need to update and how. The…
GeeWhizBang
  • 699
  • 4
  • 27
1
vote
2 answers

Breakpoint-sass not loading in gulp setup, Susy is working fine

Hi I'm trying to get breakpoint-sass working with susy in my Gulp set-up I have ran npm install breakpoint-sass --save-dev and linked it to the top of my sass file with @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy is…
Jafoolee
  • 11
  • 4
1
vote
1 answer

Breakpoint 2.7.0 Syntax

I had been using breakpoint 2.5 for quite sometime. I got a new Mac and setup breakpoint on it. I installed 2.7.0 Clearly there has been some changes between 2.5.0 and 2.7.0 of breakpoint. Here is the contents of my breakpoint.scss file (ignore the…
Chad Warren
  • 107
  • 2
  • 17
1
2 3 4 5