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

Divs rendering outside outer-container?

I have a bunch of posts rendering inside an outer container:
1
vote
2 answers

Sass - undefined error $helvetica

Working with middleman and using Bourbon, Neat and Bitters. Once I start the server, I get following error message - Error compiling CSS asset Sass::SyntaxError: Undefined variable: "$helvetica" in (source/stylesheets/base.css.scss:…
Aniruddha
  • 3,157
  • 4
  • 32
  • 48
1
vote
1 answer

Avoid span-column to set right-margin for :last-child

Given the HTML :
And this Sass : .parent { .element { @include span-columns(2.5 of 8); } } It generates the CSS : .parent .element { float:…
Quentin
  • 1,085
  • 1
  • 11
  • 29
1
vote
0 answers

node-refills doesn't load (using webpack)

Giving node-refills a try in an application build with webpack, but imports don't appear to work. in webpack.config.js var NodeRefills = require("node-refills"); module.exports = { module: { loaders: [ { test: /\.scss$/, …
Jamie Folsom
  • 1,287
  • 2
  • 10
  • 20
1
vote
1 answer

How to handle different versions (Bourbon) of ruby gems on my Mac

I installed the bourbon gem on my OSX machine some weeks ago: gem install bourbon Now i have problems with bourbon in a web project (gulp says "mixins not found") so I wanted to uninstall and re-install the gem. So I typed: $ gem uninstall…
herrfischer
  • 1,768
  • 2
  • 22
  • 35
1
vote
0 answers

Meteor: Import CSS library into CSS file?

I have a meteor 1.3 project. I did: npm i --save bourbon and added @import "bourbon"; to my styles.scss file. But I get this error: While processing files with fourseven:scss (for target web.browser): /client/styles.scss: Scss compiler error:…
allegutta
  • 5,626
  • 10
  • 38
  • 56
1
vote
0 answers

Node-Sass Bourbon Gulp error import

I'm having trouble importing Bourbon into my scss using npm. I've installed both Sass and Bourbon using npm. my import reads like this: @import "../../node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/bourbon"; and this is the…
Spencer Bigum
  • 1,811
  • 3
  • 17
  • 28
1
vote
1 answer

Multiple column flowing text with Bourbon / Neat

I have a rails app that outputs an variable number of
  • #{content}
    • components into an HTML page. These elements are not big and do not fill across a whole screen. I'd like the list to wrap around and into multiple columns, ideally based on…
    Huw
    • 635
    • 11
    • 25
    1
    vote
    1 answer

    Bourbon Refills How-To Link To Tabs

    I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.…
    Andrew Currie
    • 21
    • 5
    1
    vote
    1 answer

    Refills modal doesn't work on Rails 4.2.4

    I have installed bourbon, neat and refills and would like to use modal window. Following the instructions I made: rails generate refills:import modal I have the modal partial and added to the page <%= render 'refills/modal' %> The result: Any…
    Szabolcs Toth
    • 63
    • 10
    1
    vote
    1 answer

    Neat block-collapse - how to use - what's its purpose

    I'm kind of confused how the neat grid works when using block-collapse - assuming a 3 column grid, the first two column result in a width of something like 34....% and the third column is around 31...% so I'm not getting three equal columns next to…
    user1678736
    • 2,133
    • 4
    • 16
    • 10
    1
    vote
    3 answers

    How to get rid of page margins using Neat and Bourbon

    Using Bourbon and Neat, it seems to add an 8 pixel pad around the page by default. What is the solution to get rid of that padding and make the page content extend to use the entire width and height of the page?
    Midwire
    • 1,090
    • 8
    • 25
    1
    vote
    1 answer

    gulp & bourbon @include font-face issue - Custom fonts not importing?

    I am using gulp for the first time I have everything working how I would like it but an stuck on one issue. I have a custom font family in a fonts folder something like "assets/fonts/font-family/...." The issue I am having is that normally in a…
    Grant
    • 55
    • 9
    1
    vote
    0 answers

    Gulp-sass no mixin error with Bourbon

    I'm trying to compile my .scss files with gulp-sass. I'm using Bourbon, Susy, and Breakpoint. I have installed them all as bower components. When I run gulp sass task I get this error: events.js:85 throw er; // Unhandled 'error' event …
    c_sea
    • 153
    • 1
    • 2
    • 10
    1
    vote
    1 answer

    How to define bourbon and neat in grunt js file / windows 8 user?

    I'm trying to use this code and I get error for using "loadPath" duplicated. options: { style: "compressed", sourcemap : true, loadPath: require('node-bourbon').includePaths, loadPath:…
    A.Rhman Sayes
    • 241
    • 1
    • 5
    1 2 3
    …
    21 22