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
27
votes
3 answers

Compass vs Bourbon Frameworks

Im working on a rails 3.1 application. I want to have a framework/library that covers gradients, shadows etc. Compass has been popular, but getting it to play nicely with rails 3.1 was a challenge for me, so I opted for Bourbon, which also seems to…
alik
  • 3,820
  • 9
  • 41
  • 55
25
votes
2 answers

What does Gulp's includePaths do?

I am attempting to start using Bourbon and Neat Sass libraries in my project. I want to compile Sass with Gulp. This is a simple styles task setup that I've found in one of the tutorials: var gulp = require('gulp'), sass = require('gulp-sass'), …
luqo33
  • 8,001
  • 16
  • 54
  • 107
13
votes
1 answer

Scss box-shadow is deprecated and will be removed - How to work around

I am trying to use the following include in my style.scss file: @include box-shadow(red 2px 2px 10px); However i get a an error of: WARNING: box-shadow is deprecated and will be removed in the next major version release I've tried to google…
Gerico
  • 5,079
  • 14
  • 44
  • 85
10
votes
1 answer

Where does the sass "font-url" method get defined?

bourbon uses font-url here. Rails has the method font_url which I'm fairly certain is what is being invoked. However, I can't find where the connection between these two things is made. I have explored the codebases of bourbon, sass, sass-rais, and…
John Bachir
  • 22,495
  • 29
  • 154
  • 227
8
votes
7 answers

Sass watch is detecting changes but not compiling to css

When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins. ex. >>> Sass is watching for changes. Press Ctrl-C…
tonyynot
  • 221
  • 1
  • 2
  • 10
8
votes
2 answers

Bourbon/Neat: Reset margin and let nested divs span the whole width

I am new to Bourbon/Neat. I have a question concerning nesting: I want the red boxes fill the whole width, without a gutter between them. When using "@include omega" on them, the first box removes its margin-right, but the right box has still the…
christophe
  • 692
  • 4
  • 14
  • 27
8
votes
3 answers

How to do mobile first with Bourbon Neat Framework

I've been using bourbon neat to do a desktop first layout that worked fine. However, I would like to do a mobile first versions, starting with mobile and working my way up. The default grid is 12 columns and for mobile I usually use a grid of 4. I…
user2852784
  • 101
  • 1
  • 4
8
votes
3 answers

breakpoints using bourbon neat grid

I am trying to use neat for bourbon and I have got most things sorted out but I am hitting some road blocks when it comes to creating the breaking points. I prefer to make seperate sass files for mobile, tablet, desktop & largedesktop and I don't…
Daimz
  • 3,243
  • 14
  • 49
  • 76
8
votes
5 answers

Undefined mixin with Bourbon and Neat gems

I am using bourbon and neat gems for create the design of a rails application. My application.css.scss contains this: @import "bourbon"; @import "neat"; @import "main"; But if I run 'rake assets:precompile' then happens this error: rake…
Jesus
  • 171
  • 1
  • 7
7
votes
1 answer

create-react-app (without ejecting) + bourbon/neat?

I'm rewriting an "old" React prototype that uses Bourbon, it also uses gulp-sass in a gulpfile to inject a node-neat dependency: var sassOptions = { includePaths: require('node-neat').includePaths, }; I'd like to use the create-react-app…
zok
  • 6,065
  • 10
  • 43
  • 65
7
votes
4 answers

Bourbon Refill Navigation Menu slide up on click

I am using the Bourbon Refill navigation menu, and want to modify it so when a link is clicked on in small mode the menu slides back up. At the moment the menu drops down, but when a menu item is clicked the menu stays dropped down. As I am using…
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
7
votes
3 answers

Bourbon neat multiple breakpoints

I know following can be done in bourbon neat: $mobile: new-breakpoint(max-width: 320px); $tablet: new-breakpoint(max-width:760px min-width:321px); $desktop: new-breakpoint(min-width: 761px); then I can do something like this: @include…
emphaticsunshine
  • 3,725
  • 5
  • 32
  • 42
6
votes
1 answer

Node-sass includePaths in command line?

So I'm setting up a new project, and I want to use Bourbon for scss via npm. This requires doing npm install bourbon, and then somehow piping the path into node-sass at time of compilation. My current sass script looks like this: node-sass…
j_d
  • 2,818
  • 9
  • 50
  • 91
6
votes
1 answer

Set fixed gutter in Bourbon Neat

By default, Neat uses percentages as the margin-right of each span-columns element, but I'm hoping for a fixed 30px gutter, regardless of the outer-container width.
matthoiland
  • 912
  • 11
  • 24
6
votes
3 answers

Re-ordering columns with Thoughtbot Bourbon/Neat

I was looking for the best solution on how to re-order/shift the position of columns at different breakpoints using Thoughtbot's Neat grid framework? I would like to shift elements in my header from this ( in desktop resolution): to this ( in…
Concordia Discors
  • 369
  • 3
  • 15
1
2 3
…
21 22