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
3
votes
1 answer

Angular 2 Node Bourbon Error

ERROR in…
Amirhosein Al
  • 470
  • 6
  • 18
3
votes
1 answer

Ember-cli Node.js - Using Neat and Bourbon

I'm not sure the correct way to include 'Neat' in an ember-cli application. I installed Bourbon using the ember-cli-bourbon addon, and then just @import "bourbon" in my scss file. Any suggestions?
Joel
  • 665
  • 2
  • 9
  • 23
3
votes
1 answer

gulp bourbon Can't import bourbon reference

I run Gulp with node-sass, node-bourbon, node-neat. So far things can go well , can able complied sass file to css without error. unless, I import bourbon and neat at the top of scss file. The error is occured. "stream.js:94 throw er;// Unhandled…
user2533820
  • 73
  • 3
  • 6
3
votes
0 answers

grunt-sass, no errors log when 'watching'

I'm using the following grunt tasks grunt-sass grunt-contrib-watch grunt-autoprefix node-bourbon (there are a few other tasks, such as uglify, spritesmith, and haml, which i have left out of this example) My grunt file looks like…
magicspon
  • 926
  • 2
  • 9
  • 28
3
votes
1 answer

Normalise.css along with burbon bitters

It seems that bitters by Bourbon Sass library sets up the base for a project. Do you need to use normalise.css along with bitters or bitters does the same work? It seems to me that the use of normalise.css is a bit redundant. Am I right or wrong?
Anastasis
  • 699
  • 1
  • 8
  • 25
3
votes
1 answer

Including node-neat + other files in node-sass grunt task

I'm using grunt-sass and have been running into trouble using node-neat when adding additional include paths. When running... options: { includePaths: require('node-neat').includePaths }, The sass task runs fine. Though when I add another…
null
  • 33
  • 5
3
votes
1 answer

adding >> after li, except for last li

I'm developing a breadcrumb like this:
Toontje
  • 1,415
  • 4
  • 25
  • 43
3
votes
2 answers

Bourbon - Sass::SyntaxError: File to import not found or unreadable: bourbon/bourbon

I recently installed Bourbon Neat but when I compile my Scss in Sublime Text 2 using Sass Build I get the following error: Sass::SyntaxError: File to import not found or unreadable: bourbon/bourbon. This is my scss file: @import…
user3358173
3
votes
2 answers

Bourbon/Sass: #{$all-text-inputs} with hover or focus?

According to the Bourbon docs, you can use #{$all-text-inputs} to turn this: #{$all-text-inputs} { border: 1px solid green; } into this: input[type="email"], input[type="number"], input[type="password"],…
manafire
  • 5,984
  • 4
  • 43
  • 53
2
votes
0 answers

How to include Bourbon via node-sass within ReactJS

Started a React project using create-react-app. Both node-sass and bourbon have been added as dev-dependencies. To what file should the following be added to inform node-sass of bourbon? require("bourbon").includePaths
Ryan Prentiss
  • 1,492
  • 2
  • 25
  • 46
2
votes
1 answer

Neat (Bourbon) compilation issues with webpack.config.js

Good day: I'm currently trying to compile my _layout.sass file into CSS and I have dependencies on Bourbon and Neat. My current _layout.sass is this: @import '../bourbon/bourbon'; @import '../base/base'; @import "../neat/neat"; …
Dean
  • 887
  • 4
  • 16
  • 42
2
votes
1 answer

Fill blank space with Neat grid

I am using Bourbon Neat sass grid and we are trying to develop a simple template that has a sidebar on left and a content div on the right.
2
votes
2 answers

SASS Calc Interpolation

I have a SASS variable: $default-padding: 15px I want to use this to set a CSS width property using the calc function. I have various calculations to make based on the value of the $default-padding variable. For Example, the width would be 100% -…
Anton Rand
  • 322
  • 5
  • 20
2
votes
1 answer

Bourbon with webpack: WebStorm complains about not resolving bourbon in IDE

I have managed to configure and get working bourbon with webpack. I just included the following on sass loader &includePaths[]=' + bbPath In a SCSS file I just do @import "bourbon"; I now its working because I am calling mixins via scss files…
Martin
  • 23,844
  • 55
  • 201
  • 327
2
votes
1 answer

Include Bourbon path in package.json?

How is it possible to include paths to Bourbon (installed via npm) in a package.json of a node project? All the examples I've seen are via grunt, etc: var bourbon = require('node-bourbon'); bourbon.includePaths // Array of Bourbon paths Anyone know…
j_d
  • 2,818
  • 9
  • 50
  • 91
1 2
3
…
21 22