Stack Overflow
Stack Overflow

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
1
vote
2 answers

susy proper way to switch grid settings in breakpoint

I am attempting to define some default behaviors for a grid and then override them at specific breakpoints. In the following example I would like the two divs to be stacked on top of each other, with slightly modified gutter settings from the…
sbham
  • 53
  • 6
1
vote
1 answer

Sass breakpoint doesn't work

I've checked all possibilities, and haven't seen any issue. config.rb Have following line: require 'breakpoint' style.scss also @import "breakpoint"; I'm trying this way: $medium: 96rem; // or even $medium: 51rem 96rem; .any-class{ @include…
Garrett
  • 367
  • 1
  • 14
1
vote
0 answers

Sass: breakpoint mixin args error

Here's my code: https://github.com/Oreqizer/susy-tutorial/blob/master/app/styles/modals/_layout.scss lines 12 to 17, extract here: .wrap { @include container(); @include breakpoint(768px) { @include show-grid(9); } @include…
Idefixx
  • 472
  • 5
  • 21
1
vote
1 answer

why am I getting breakpoint compilation errors

Regarding Drupal Omega subtheme creation. I have just installed a new sub theme and have run bundle install. My theme is wanting the import the following libraries // Import external libraries. @import "compass"; @import "breakpoint"; @import…
MrPaulDriver
  • 243
  • 1
  • 13
1
vote
1 answer

Breakpoint in Rails app

I've been told by Mason Wendell that I can use Breakpoint in my application without Compass. I have gem 'breakpoint', '2.4.1' in my Gemfile and @import "breakpoint" in my application.css.sass but it fails to locate Breakpoint. Mason stated "Just get…
rctneil
  • 7,016
  • 10
  • 40
  • 83
1
vote
2 answers

breakpoint-sass Install Issue

I am trying to run breakpoint and I have followed the steps: using command line: gem install Breakpoint Updated Config.rb: require 'breakpoint' on scss file I have included: @import "breakpoint"; However, when I use compass watch I get the…
user3726256
  • 11
  • 1
  • 2
1
vote
1 answer

Breakpoint installed with Bundler but still throwing 'not found or unreadable' error in Grunt

I have installed Breakpoint using Bundler as they suggest, included require "breakpoint" in my config.rb and included breakpoint in my main.scss file after compass. I am getting the following error when I run grunt to compile everything: error…
Craig
  • 972
  • 3
  • 13
  • 38
1
vote
1 answer

Should i be using the device height and width or the viewport with compass extension breakpoint?

So I have the following situation : $iphone : 320px (max-height 568px); This is the iphone dimensions. However, when i resize my browser to these exact values the media queries won't work. If i input the viewport instead of this by checking the…
user2805193
1
vote
2 answers

Breakpoint (no-query) complains to '&' when trying to use with zen grids

I tried to use breakpoint to replace a media query in _responsive.scss (see line 155) of a subtheme of the Zen 7.5.4 Drupal base theme: // @media all and (min-width: 960px) @include breakpoint($desktop) { $zen-column-count: 5; … Before that I…
thamas
  • 13
  • 4
1
vote
1 answer

@import "breakpoint"; throws not found error

I was working on this project yesterday using Sass and Breakpoint and everything was fine. This morning however when I went to compile using sass --watch .. I am getting this error: error ../sass/screen.scss (Line 6: File to import not found or…
sayra90
  • 21
  • 2
  • 6
1
vote
1 answer

Preferred way of writing vertical media queries with Sass' Breakpoint Extension

With the Sass extension Breakpoint, is there a preferred way to write vertical media queries that only have a single argument for the query value? Here's an example of what I'd like to ultimately accomplish: @media (max-height: 50em) { .item { …
ctrlaltdel
  • 685
  • 2
  • 10
  • 21
0
votes
0 answers

sx props in Material UI to support overall behavior and breakpoints in the same time

Is it possible in Material to have both global and also breakpoints CSS values at the same time? For example : sx={{margin:{sx:'1rem'}} is considered margin only when the breakpoint reaches 1rem but for other breakpoints use the default value. I…
sam
  • 23
  • 5
0
votes
1 answer

SASS Mixin Help - Breakpoint

Trying to customize the following SASS mixin. Right now it is creating the same set of CSS for each breakpoint, however, when I get to the "sm" and "xs" breakpoints I want the mixin to alter the code slightly (see alteration below code). $columns:…
Bryan Counts
  • 111
  • 1
  • 1
  • 8
0
votes
1 answer

sass: how to render different images for mobile only

I am not 100% clear on how to implement images for mobile only view that are different than the ones I have for desktop view So for example, if I have this image for desktop: &.card { .card-image { @include…
user8359832
0
votes
2 answers

Bootstrap: How do I make the hamburger visible at breakpoint and hide navbar for all other screen sizes?

I would like to hide the navbar for all screen sizes, except 480px and smaller screen sizes where I would like the "hamburger" to be displayed. How can I achieve this? Thank you.
user3226760
  • 61
  • 1
  • 5
1
2
3 4 5