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

How to combine grid and list settings in Bourbon/Neat/Bitters?

I am trying to restore the default list behavior (li's display property is 'list-item'), but in the same time make the list in two columns (li's display property is 'block'). Is there a workaround?
  • Letter 1
  • Letter…
Alexei Danchenkov
  • 2,011
  • 5
  • 34
  • 49
2
votes
0 answers

Safari css transition bug? Elements disappear

I have an issue that is only appearing to me in Safari. I am developing a site that is fixed in position and is moved around with javascript, so you can't scroll it yourself its like a fake scroll. Some "panels" of this system are dark and some are…
jthawme
  • 223
  • 1
  • 10
2
votes
3 answers

Using Bourbon, Bitters, Neat, Refills with Bower

Is it possible to use Bourbon and it's additional components without needing to have Ruby installed? We'd like to experiment on a small project, but it's a pain to get dependencies approved by the desktop engineering folks. I've noticed that there…
Robertson
  • 21
  • 3
2
votes
3 answers

How can I ensure that a div without content will get the height of the parent div?

i am trying to create to divs width the outer container set to 1000px and the inner left and right container to 50% each. Now i have used this code .leftNav { @include span-columns( 5 of 10); background-color:silver; …
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
2
votes
1 answer

How do I make neat fluid past max width

I don't feel that neat's grid is truly fluid. A fluid grid would scale well all the way from mobile to a large tv screen such as 1920x1080. However the way that neat and bitters end up working creates a $max-width variable which is default set at…
MikaAK
  • 2,334
  • 6
  • 26
  • 53
2
votes
1 answer

Bourbon Neat Grid, at mobile breakpoint

I have a really basic website that uses sass and bourbon neat grid framework. I am trying to achieve the same effect as the (http://neat.bourbon.io/examples/), site. At 800px width the grids seem to have a breakpoint and drop the span-columns and…
Oliver
  • 99
  • 4
2
votes
1 answer

Difference between span-columns() and row() in Bourbon Neat

What is the difference between @include span-columns(12) and @include row()? Which should I use and when?
atesz
  • 23
  • 1
  • 3
2
votes
1 answer

Bourbon neat horizontal align div after display none

I have a header with 3 elements at full size layout (12 column grid): left= logo (3 columns), middle= nav (6 columns), right= social media (3 columns) At a smaller size (4 column grid) I've set "social media" to display none, "logo" and "nav" are…
user1910388
  • 235
  • 1
  • 6
  • 17
2
votes
3 answers

Use Bourbon SASS library with LiveReload

I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
cmal
  • 1,751
  • 5
  • 18
  • 29
1
vote
1 answer

webpack4 mini-css-extract-plugin with bourbon

I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css conversion, the case is to include bourbon. webpack…
Rajesh Dwivedi
  • 382
  • 2
  • 13
1
vote
1 answer

What is this plus sign and shorthand used in this SASS?

This was written a couple of years ago and little has been done with it since. I've been trying to find documentation for this notation and haven't found anything. header +display(flex) +flex-flow(row-reverse wrap) …
kim holder
  • 1,744
  • 3
  • 16
  • 25
1
vote
1 answer

Confusion about Neat 2.0 grid media

According to the official neat documentation, I should be about to use gird-media to change my layout based on a media query. But when I try to run the example code I get the following error: @include grid-media($custom-neat-grid,…
Herr Josua
  • 453
  • 7
  • 19
1
vote
1 answer

includePaths isn't providing my import statement with what I need in node-sass

I am using a javascript render function to automate a node-sass build, but the import statements are still failing to find bourbon and neat. render.js var sass = require('node-sass'); var bourbon = require("bourbon").includePaths; var neat =…
tcmoore
  • 1,129
  • 1
  • 12
  • 29
1
vote
1 answer

Webpack 3, Extract Text plugin not resolving sass-loader includePaths

I have this setup working on an older project using: webpack@3.0.0 extract-text-webpack-plugin@2.1.2 I'm now trying on a new project so have upgraded to: webpack@3.8.1 extract-text-webpack-plugin@3.0.1. Webpack config is exactly the same but now…
Andy Farmer
  • 11
  • 3
1
vote
1 answer

Multiple Bourbon Refills Modals

I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once. So...this is what is supposed to happen: A user clicks on a…
user8781360
1 2 3
…
21 22