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

What is the browser support for neat?

Specifically, does Neat version 2 support IE? Is it tested in IE/Edge etc? What other browsers are supported or not supported.
D.Mistry
  • 22
  • 1
  • 6
0
votes
1 answer

What is the best way to deal with the mandatory left margin that comes with grid-column in Bourbon Neat 2.0 above?

This is the output of a grid-column mixin as mentioned on the site - .element { width: calc(25% - 25px); float: left; margin-left: 20px; } My problem is that I don't want gutters before and after the first and last columns. Bootstrap uses a…
Arriving From The Sky
  • 263
  • 1
  • 8
0
votes
1 answer

Bourbon accordion click once expand/collapse when clicked

Hello I'm new here and I wondered if anyone could help. I have implemented bourbon.io's accordion, but I can not get it to open and collapse on a single click. It opens, but then stays open. $('.js-accordion-trigger').bind('click', function(e){ …
Antony Moss
  • 59
  • 3
0
votes
1 answer

Bourbon/Neat VS 2017 unexpected character sequence

So, I installed bourbon and neat in my project. It's an ASP.NET application. I didn't set up gulp, I just downloaded it directly to my project in a file called _libraries. The tree is like this: root -_resources -scss -_global …
Jabberwocky
  • 768
  • 7
  • 18
0
votes
2 answers

Bourbon Neat grid-push not working as expected?

I have a really simple issue that seems to be difficult to solve. I want to stick with the normal standard 12 column neat grid, but I want the two .homeSplit divs to take up 5 columns each. I would like the second one(.insights) to get 1col of space…
Chappy Brandon
  • 3
  • 2
0
votes
1 answer

Jekyll Conversion Error With Bourbon

Whenever I try to bundle exec jekyll build/serve I get the following error: Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss': Undefined variable:…
Elsie
  • 17
  • 7
0
votes
2 answers

Can not run npm using Laravel-mix

I am having some issue, its killing me. please help. I am trying to run npm in DEV using command: npm run dev In my webconfig.mix.js : mix.sass('resources/assets/sass/style.scss', 'public/css'); 95% emitting ERROR Failed to compile with 4…
daniel8x
  • 990
  • 4
  • 16
  • 34
0
votes
1 answer

Gulp-sass only compiling one of the bourbon-neat mixins

I'm struggling to get gulp to correctly compile bourbon-neat sass files. Bourbon-neat is installed (locally, as are the rest of the gulp-sass related modules), @import 'neat' is added to my main site scss file and my gulp.js file includes the…
wordfool
  • 63
  • 5
0
votes
1 answer

How use node-refills in gulp

I need to connect node-refills to gulp. This code gives an error: var gulp = require('gulp'), sass = require('gulp-sass'), bourbon = require('node-bourbon').includePaths, bitters = require('bourbon-bitters').includePaths, neat =…
Angeli
  • 1
0
votes
1 answer

Gulp: Unable to import Bourbon to stylesheet

I recently did an update to my package.json. Upon importing Bourbon to my scss stylesheet I ran into the following Error: File to import not found or unreadable: bourbon. Within my node-modules, I can see that I have a bourbon-neat and bourbon…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
0 answers

Handle elements that occasionally spill outside of main grid

I would like to use Neat 2.0 but I'm wondering what would be the correct approach to handle elements that occasionally spill outside of the main 12 column grid. I see designs that do this from time to time, either by spilling out just a little or…
skube
  • 5,867
  • 9
  • 53
  • 77
0
votes
1 answer

How do I create a three-column grid with neat?

I've had this question answered previously here: How to do a three column grid with bourbon neat? However, since I updated bourbon and neat on my system, that method no longer works. Again, my markup looks like this:
bob
  • 753
  • 4
  • 15
  • 27
0
votes
1 answer

SASS (not SCSS) version of Bourbon Neat

I am wondering if there is a SASS (not SCSS) version of Neat that I can download? The official website uses SCSS. Currently my entire existing app is using SASS, and I don't want to introduce another style format. Or can I import external SCSS…
gye
  • 1,374
  • 3
  • 16
  • 27
0
votes
2 answers

Bourbon Neat 1 - make elements span the gutter

I keep receiving designs whereby the designer has followed a grid, but occasionally the elements line up to the other side of the gutter, or 2 elements meet halfway though a column. Please see the image - the first row shows normal conformity to a…
Chris
  • 439
  • 4
  • 20
0
votes
1 answer

max-width element in Neat grid creates right margin

I am relatively new to Bourbon Neat and since the recent update I have been a little lost. I have a custom grid I have set up media queries for. The elements in the grid contain a 500x500 photo with a description underneath. My problem is if I set…
gpb14
  • 3
  • 7
1 2 3
…
21 22