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

Grunt: node-bourbon syntax error when used with grunt-contrib-sass

I am getting the following error when trying to use node-bourbon with grunt-contrib-sass. Syntax error: Properties are only allowed within rules, directives, mixin includes, or other properties. on line 14 of sass/bourbon/addons/_prefixer.scss from…
demersdesigns
  • 11
  • 2
1
vote
0 answers

Using '@include media' on row of columns messes up the shift in bourbon neat

Have been coming up with this rather irritating error - when my code is benefits { @include outer-container; .benefit_text { @include span-columns(4); @include shift(2); } .benefit_list { @include omega(); @include…
stridlinnea
  • 11
  • 1
1
vote
2 answers

Bourbon's @font-face mixin

I'm new to Bourbon & SASS and trying to use the @font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app. Bourbon provides the following examples: @include font-face(SourceSansPro,…
srhmgn
  • 23
  • 6
1
vote
1 answer

gem installed, can't import bourbon

I cloned the repo https://github.com/TryGhost/Ghost for (a nodejs) Ghost blogging platform and followed the instructions for set up. When I ran grunt I got this error Running "sass:compress" (sass) task Syntax error: File to import not found or…
Leahcim
  • 40,649
  • 59
  • 195
  • 334
1
vote
1 answer

heroku throwing bourbon `Undefined mixin 'transform'`

i'm deploying a rails 4 app to heroku, getting Running: rake assets:precompile I, [2013-10-31T13:50:45.980969 #699] INFO -- : Writing /tmp/build_66fd87fd-a9f1-442b-88b3-ccbc9f7f6e28/public/assets/application-ffa1a91721fb49b9c6414032f35a7045.js …
John
  • 1,246
  • 15
  • 34
1
vote
1 answer

Grunt: Adding gem dependencies via 'require'

Here is the SASS grunt-contrib-sass portion of my Gruntfile: sass: { dist: { options: { style: 'compressed', require: ['zurb-foundation', 'bourbon'] }, files: { 'dist/css/styles.css':…
Zach
  • 1,185
  • 3
  • 24
  • 60
1
vote
1 answer

disable bourbon radial gradient fallback color?

I'd rather not have the fallback applied whilst using the radial gradient mixin in Bourbon. The documentation http://bourbon.io/docs/#radial-gradient says it's optional, but whatever I try, the primary colour always gets applied (I've tried entering…
Christian Jánský
  • 11
  • 1
0
votes
0 answers

Bourbon Install Error: "bad interpreter: No such file or directory"

I am new to Sass and RubyGems. I have installed Sass and it is functioning as expected. I want to now install the Bourbon library for use in my project, however, I keep getting an error that says "D:/Program: bad interpreter: No such file or…
codemints
  • 11
  • 1
  • 4
0
votes
1 answer

Include `bourbon` from SCSS file (webpack)

I'm trying to get bourbon (package for SCSS mixins etc.), node-sass and webpack to work in harmony. After running the webpack build command I get the following error: ERROR in ./src/sass/style.scss Module build failed (from…
navix98
  • 1
  • 1
  • 1
0
votes
1 answer

Invalid property value in CSS using: Bourbon SASS. +retinaimage deprecated from V4 using V6

I am currently taking the Brad Hussey SASS course on his YouTube channel: https://youtu.be/q5BO71n8Fbk?list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR I'm on video #10 currently. Using Bourbon in its current version, 6. Bourbon deprecated +retinaimage after…
Simon Lowes
  • 27
  • 1
  • 7
0
votes
1 answer

bourbon sass font-face font location compile error with npm

I am using bourbon and using their font-face sass function. See my sass below. $panton: ( ("Panton-Light-Italic", 'italic', 300), ("Panton-Light", 'normal', 300), ("Panton-Regular", 'normal', 400), ("Panton-Regular-Italic",…
joshmoto
  • 4,472
  • 1
  • 26
  • 45
0
votes
1 answer

Neat 2.0 Grid - media queries

I'm trying to follow the examples for the media query bases Neat grid here, but I'm having trouble getting the media queries to run. I'm able to get the tablet and phone ones to work, but I can not get the desktop version to run. I have included the…
Herr Josua
  • 453
  • 7
  • 19
0
votes
1 answer

Prevent Widows in Tooltips with SASS (Bourbon) or JavaScript?

I have a custom tooltip implemented with SASS (and Bourbon) and would like to prevent widows from appearing, example: .custom-tooltip { @include position(relative); .tooltip-right { font-family: $brand-font-condensed; font-size: 14px; …
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
0
votes
1 answer

Custom Webpack config in Laravel 5.5

I'm using Laravel 5.5 with Webpack and Vuejs. I installed some packages like foundation-sites and bourbon and in my app.scss file I included them like so : @import "bourbon"; @import 'foundation'; But the webpack can't resolve the packages. I…
Hesan Aminiloo
  • 418
  • 1
  • 4
  • 20
0
votes
0 answers

Error message when trying to compile scss to css

I'm using Bourbon,Neat,Bitters. Everything seemed good till trying to compile. I tried "gulp" command and Sass commands. I have Ruby,Sass,Nodejs,git installed. All are very recent. I am getting this error: ` "Errno::ENOENT: No such file or…
Daidala
  • 21
  • 3
1 2 3
…
21 22