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 does Bourbon's `transition()` mixin compile to in CSS?

In this YouTube video @20:49, he uses is transition() in his stylesheet to enable the easing in and out of the off screen navigation. He is using Bourbon as well. How can I translate the same transition effect into regular CSS?
Liondancer
  • 15,721
  • 51
  • 149
  • 255
0
votes
1 answer

Shifting elements using Bourbon Neat

Just starting out with SASS/Bourbon/Neat. I've got 3 items, all taking up 3 columns. I want to shift 2 of them to the right, and leave 1 to the left. This is the sass/SCSS I'm using: #mod-header{ background-color: $primaryColor; color:…
Strontium_99
  • 1,771
  • 6
  • 31
  • 52
0
votes
1 answer

Does " @import 'bourbon/bourbon' " work as effectively as importing individual mixins?

Does " @import 'bourbon/bourbon' " work as effectively as importing individual mixins from each of bourbons folders as needed? For example: if I import only the css3 mixins (@import 'bourbon/css3') I need from bourbon, rather than the whole…
Danny
  • 11
  • 3
0
votes
1 answer

Install beta version of bourbon with bower

Hi there I am new to bower and would like to install the beta version of bourbon but get the latest stable version instead. Command executed: bower install thoughtbot/bourbon and got: bourbon#4.2.7 bower_components/bourbon Looking at the…
emvidi
  • 1,210
  • 2
  • 14
  • 18
0
votes
1 answer

1px margin on span-columns with Bourbon Neat

I want to do this: @include span-columns(4 of 12, block-collapse); ...but I want a 1 pixel margin on the right side of column 1 and 2, how do I do that?
Positonic
  • 9,151
  • 14
  • 57
  • 84
0
votes
2 answers

Why is my app trying to load bourbon?

I'm having a weird gem problem here. Since the last time I ran bundle install, my app crashes spectacularily with this nice error message: Sass::SyntaxError File to import not found or unreadable: bourbon. I don't get it, since I'm NOT using…
Rouli
  • 137
  • 1
  • 10
0
votes
1 answer

Bourbon Neat ignoring 'omega' in media query

I'm currently using Bourbon Neat. I need .posts__post to span 3 of 6 columns on tablet and then 2 of 6 on on desktop and above. However i'm finding that my desktop media query is not working and that the tablet query remains through to…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

Simplify animations in css

I have the following scss file in my project &.care-loading-icon{ .glyphicon-refresh-animate { @include care-loading-animation } @keyframes spin { from { transform: scale(1) rotate(0deg); } to { …
Mateusz Urbański
  • 7,352
  • 15
  • 68
  • 133
0
votes
1 answer

bourbon, neat, and bitters conflict

I have installed: sass-3.4.22 bourbon 5.0.0-beta.6 bitters-1.4.0 neat-1.8.0 They are set up in the CSS directory of my project under the base, bourbon, and neat directories like normal. In my .scss sheet I have: @import "bourbon/bourbon"; …
Robert Means
  • 41
  • 4
0
votes
0 answers

Neat doesn't show four column rows

I'm trying to implement four-column rows with the @include span-columns mixin: div.people { @include outer-container(80%); .researchers { @include span-columns(12); text-align: center; } .researcher { @include span-columns (3…
Toontje
  • 1,415
  • 4
  • 25
  • 43
0
votes
1 answer

How to get bourbon-neat to work with Roots

So I'm experimenting with Roots Static Site generator and I'm having a hell of a time getting it to import Bourbon-neat through the app.coffee file. My app.coffee looks like this: js_pipeline = require 'js-pipeline' css_pipeline = require…
gin93r
  • 1,551
  • 4
  • 21
  • 39
0
votes
2 answers

Bourbon Neat and semantic HTML5, what about BEM?

I'm trying to write a very minimalist blog as a way to re-learn html and css. I'm trying to understand what I should use to select the elements of my page between plain tags, id or class. For exemple this is what one of my page coud look like : …
Floyd83
  • 41
  • 1
  • 6
0
votes
2 answers

How to make element break out of grid and touch edge of browser

Please refer to the image below. I have a grid set up (using Bourbon Neat). The first pink element fits normally over 5 columns, but the green element needs to start on the 6th column but ends breaking out of the grid and touching the edge of the…
Chris
  • 439
  • 4
  • 20
0
votes
0 answers

How to override default Bourbon neat grid

I'm trying to override the default bourbon neat grid but my method seems to be failing. Below is my _grid-settings.scss file @import 'neat-helpers'; $visual-grid: true !global; $visual-grid-color: #d5eefb !global; $visual-grid-index: back…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

bourbon neat square grid

trying to re-write another's template (which works well and is written in raw css3 – but is very messy). Most stuff is easily translated to bourbon/neat but I'm stuck on getting up a responsive image grid.
{% for…
user37166
  • 51
  • 1
  • 1
1 2 3
…
21 22