Stack Overflow
Stack Overflow

Questions tagged [bourbon]

Bourbon is a mixin library for Sass. It provides mixins to simplify usage of vendor-specific CSS3 properties and helpers for dynamic calculation of CSS properties.

Overview

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.

The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Requirements

Sass 3.2+

Mixins

  • Animation
  • Appearance
  • Backface-visibility
  • Background
  • Background-image
  • Border-image
  • Border-radius
  • Box-sizing
  • Columns
  • Flex-box
  • Font-face
  • HIDPI Media Query
  • Image-rendering
  • Keyframes
  • Linear-gradient
  • Perspective
  • Placeholder
  • Radial-gradient
  • Transform
  • Transitions
  • User-select

Functions

  • Compact
  • Flex-grid
  • Golden-ratio
  • Grid-width
  • Linear-gradient
  • Modular-scale
  • Radial-gradient
  • Tint & Shade

Add-ons

  • Buttons
  • Clearfix
  • Font-family
  • Hide-text
  • HTML5 Input Types
  • Inline-block
  • Pixels to Ems
  • Position
  • Prefixer Settings
  • Prefixer
  • Retina-image
  • Size
  • Timing-functions
  • Triangle

Links

Related tags

316 questions
1
vote
0 answers

sass @include works in some files and not others

I'm using the sass library 'bourbon neat'. It provides a mixin called "outer-container". I have a sass file structured like this: @import bourbon/bourbon @import neat/neat @import componentOne @import componentTwo I want to use neat from within…
bob
  • 753
  • 4
  • 15
  • 27
1
vote
0 answers

how to setup Jekyll with Bourbon

I'm trying to setup a Jekyll site with the Bourbon and Neat mixin libraries. I created a _sass directory and installed Bourbon and Neat into this directory. Then I import Bourbon and Neat in the main stylesheet (css/main.scss): @import…
Toontje
  • 1,415
  • 4
  • 25
  • 43
1
vote
0 answers

Gem installing an old version of Neat

Trying to install bourbon neat 2.0 and cannot get current version to install. Running the commands to install to directory gem install neat followed by neat install and all appears normal. Messages even says "fetching 2.0.0" etc, however once…
thatryan
  • 1,551
  • 6
  • 21
  • 39
1
vote
2 answers

Second row of Neat grid not working properly

I'm trying to use Neat's grid-container to create two rows of three, but the second row isn't starting as expected, because of different text lengths in the first row. The HTML:
…
lovestacos
  • 13
  • 3
1
vote
1 answer

Neat 2.0 tablet media query not working

In Neat 1.8 I used 3 breakpoints for my media queries and they where as follows: $mobile: new-breakpoint(min-width 320px max-width 767px); $tablet: new-breakpoint(min-width 768px max-width 1024px); $desktop: new-breakpoint(min-width 1025px); But in…
Hanna
  • 13
  • 4
1
vote
1 answer

Cant get bourbon files imported in my site (show tree in post)

I believe a picture best describes my issue https://postimg.org/gallery/37bdm2lp8/ Please see img for tree document https://postimg.org/image/qsmm9rdx1/ My issue is a simple one, but I am not getting my main.sass which imports all the other sass…
user3366804
1
vote
2 answers

Why is there no grid-row in neat?

I want to tell Neat that I want to start a new row within the grid. Unfortunately there is no grid-row in Neat. Why is that and how do you tell Neat that you are finished with the current row?
user2656732
1
vote
1 answer

Bootstrap and Bourbon in combination

Could someone please confirm that it's correct for me to use the Sass version of Bootstrap 3 as the framework (utilising all of the grid classes, stylings etc), in combination with Bourbon as a means of ensuring cross browser compatibility on things…
paddyfields
  • 1,466
  • 2
  • 15
  • 25
1
vote
1 answer

File to import not found or unreadable: neat/neat

I have a Rails project that I'm trying to add Bourbon and Neat to the app. I have installed the gems and I have now tried to include the imports to the main stylesheet. But when I try to refresh the home page I get this error. File to import not…
Bitwise
  • 8,021
  • 22
  • 70
  • 161
1
vote
1 answer

How to blacklist usage of specific mixins in stylelint?

I am using gulp-stylelint with the stylelint-scss plugin to lint the .scss-files in our project. As we are using autoprefixer, I want the linting to fail if bourbon neat mixins that only add vendor-prefixes are used, for example, something like this…
Lin
  • 103
  • 1
  • 9
1
vote
0 answers

Bourbon Neat: I want to use omega(3n+1), but Neat disallows this. What's the alternative?

My first div spans 12 columns while the next divs only spans 3 columns. Something like this: So I thought having omega(3n+1) to select the third div after the first one would be manageable. Turns out, as it's said in Neat documentation, composite…
deathlock
  • 2,756
  • 5
  • 27
  • 48
1
vote
2 answers

WebStorm, Gulp can't import bourbon

I have the following gulpfile.js in my WebStorm 2016 IDE. My SCSS stylesheets currently reside in src/scss/style.scss where I do all my @import's. After doing ton of research and spending hours trying to figure this out, I am not able to do @import…
celik
  • 75
  • 9
1
vote
2 answers

Targeting a specific mobile device is carrying styling over to another targeted device

I am working on a side project and using Bourbon Neat as my grid. I have a few media queries targeting specific mobile devices such as iPhone 5, iPhone 6, and iPhone 6 Plus. My question is am I able to target a specific device, without carrying the…
Jon Lambson
  • 510
  • 2
  • 11
1
vote
2 answers

Bourbon Neat: variable $column and $gutter for different breakpoints

I need different column and gutter widths for different breakpoints, but this has no effect in _grid-settings.scss @media screen and (max-width: 539px) { $column: percent(100/4); $gutter: em(13); } @media screen and (min-width: 540px) { …
Ian McLaughlin
  • 121
  • 1
  • 3
1
vote
2 answers

Gulp with Bourbon/Neat, no mixin named media

I'm taking over a project and I can't get gulp to compile the CSS, I get the error: Error: assets/sass/pages/_global.sass Error: no mixin named media Backtrace: assets/sass/pages/_global.sass:86 on line 86 of…
fizgig
  • 292
  • 2
  • 4
  • 22
1 2 3
…
21 22