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

How do I use Selectivizr to make the Bourbon Neat grid work in IE8?

I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback…
user1200468
  • 65
  • 2
  • 6
6
votes
2 answers

How to use Yeoman with Bourbon rather than Compass?

How would I go about setting up Yeoman + Grunt.js to compile Sass without Compass? I'd like to use thoughtbot's Bourbon rather than Compass. Would I need to create a custom generator for this or is it a matter of passing a flag to the already…
David
  • 1,330
  • 17
  • 31
5
votes
1 answer

grunt sass task producing errors due to bourbon package

I am writing a grunt task file for my project. I have defined the sass task in that and installed all the required dependencies. I am able to run the same gruntfile on my friends computer, but on my computer the sass task produces this…
Chitrank Dixit
  • 3,961
  • 4
  • 39
  • 59
5
votes
1 answer

IE conditional comments with Sass and Bourbon

I want to serve different fonts to different browsers (see this question). Is there a slick way to do this with Sass/Bourbon? Here's what I have so far: @include font-face("myicons", "myicons", $weight: normal, $style: normal, …
John Bachir
  • 22,495
  • 29
  • 154
  • 227
5
votes
3 answers

Remove margin on span columns with Bourbon Neat

I'm starting to use Thoughtbot's Bourbon Neat for responsive grids. Overall, it's pretty slick and I really like it, but I'm hung up on one little issue. I'm trying to get two columns to butt up next to each other without the margins, but after…
ultraloveninja
  • 1,969
  • 5
  • 27
  • 56
5
votes
5 answers

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

I've installed rvm and bourbon. I then installed bourbon into my /css directory. However when I try @import 'bourbon/bourbon'; I get this error: Sass::SyntaxError: File to import not found or unreadable: bourbon/bourbon. I've checked out other…
thomasp423
  • 357
  • 8
  • 20
5
votes
6 answers

Vary outer-container size with Bourbon Neat

I'm learning to work with Bourbon Neat and I always worked with Bootstrap's grid system. I'm trying to recreate this Bootstrap grid page to learn the basics of Bourbon Neat. The settings I use are: // Bourbon Neat Grid Settings $column:…
Jesse
  • 879
  • 1
  • 12
  • 26
5
votes
4 answers

How do I show the columns of the grid of Bourbon Neat?

In my CSS file apply the commands of Bourbon Neat and not show columns in html file, if show the result of apply but not show columns. .container{ @include outer-container; @include span-columns(2 of 8, table); border: 1px solid red; …
Mario del Valle
  • 51
  • 1
  • 2
4
votes
0 answers

I am not able to use node-bourbon in the project

I try to use npm module for scss files. Node-bourbon. I get the following error: with: function() { var paths = Array.prototype.slice.call(arguments); return [].concat.apply([bourbon.includePaths], paths); } }; Invalid CSS after "v": expected…
adam nowak
  • 785
  • 2
  • 9
  • 17
4
votes
0 answers

Bitters error ("Undefined variable: $font-stack-system")

My folder structure: - app -- sass --- style.scss --- base --- bourbon In my style.scss I import bourbon and base (and neat): @import "bourbon/bourbon"; @import "base/base"; // bitters @import "neat/neat"; // bourbon grid When I run "$gulp" (gulp…
herrfischer
  • 1,768
  • 2
  • 22
  • 35
4
votes
1 answer

How to make a select image in form

I need a form with images selectables, I´ve serched in google and I try with select option but this not working Can you give any idea to resolve this please? I am using bourbon & neat (SASS)
cfranco
  • 3,155
  • 5
  • 19
  • 20
4
votes
0 answers

Using breakpoints with bourbon and neat with the media( ) mixin

I've set up 3 different breakpoints using bourbon and neat. I've followed some of the info in bitters to set up to variable to use in the media mixin. This makes it ridiculously easy to throw in breakpoints. @include media($small-screen-up) { .foo…
Erik Hanson
  • 155
  • 5
4
votes
3 answers

Bourbon Neat: How to expand column to match outer-container?

I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using @include fill-parent on the short column doesn't work, it just makes it as wide as…
Ber
  • 695
  • 1
  • 11
  • 17
4
votes
1 answer

Setting up grunt-contrib-sass with node-bourbon

I am trying to add bourbon as a dependency to a project where grunt-contrib-sass is used. node-bourbon has the following to say about grunt and Sass integration: grunt.initConfig({ sass: { dist: { options: { // THIS IS THE LINE I…
Elise
  • 5,086
  • 4
  • 36
  • 51
4
votes
2 answers

Adding padding to the container but outside of the grid

I'm trying to add padding to the .container without it effecting the grid. The best example I can think of is I don't want the content to hit the sides of the .container because if the design has say a blue background and the .container is white I…
Sulcalibur
  • 71
  • 7
1
2
3
…
21 22