Stack Exchange
Stack Overflow
  • Questions
  • Tags
  • Users
  • About
Stack Overflow
    1. Public
    2. Questions
    3. Tags
    4. Users
    5. About

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

  • Official website
  • Official documentation
  • Bourbon on Github

Related tags

  • sass
  • compass-sass
  • neat
316 questions
1
vote
2 answers

Changing $column and $gutter does not have effect in Bourbon Neat

I'm using Bourbon and Neat, and got everything working as it should, apart from one thing. When I change the values of $column and $gutter in _grid-setting, nothing changes. Those are the only two variables that don't have any effect. Changing…
sass bourbon neat
asked May 28 '15 at 08:23
Bart Rylant
  • 173
  • 1
  • 1
  • 7
1
vote
1 answer

reorder columns with bourbon neat (tablet, desktop)

I'm trying to make a page with "content" on the top (for mobile view) and the sidebar below. Here is my html:
Here is my scss using bourbon: section…
sass bourbon
asked Apr 30 '15 at 22:05
redconservatory
  • 21,438
  • 40
  • 120
  • 189
1
vote
1 answer

Having some trouble compiling Bourbon with VS 2013, and Web Essentials

I'm having trouble compiling _bourbon.scss. I have to comment out the following, in order for it to compile successfully. @import "helpers/font-source-declaration"; @import "helpers/linear-angle-parser"; @import…
sass bourbon
asked Apr 02 '15 at 13:04
yoshi0423
  • 245
  • 1
  • 5
  • 12
1
vote
1 answer

Bourbon family without Ruby

I'm currently trying to make my company use Bourbon/Neat/Bitters/Refills, the Toughtbot front-end stack often refered as the Bourbon family. But while we use Ruby on most of our projects, we code static websites from time to time. On that kind of…
ruby gulp bower bourbon neat
asked Mar 09 '15 at 17:30
Ruff9
  • 1,163
  • 15
  • 34
1
vote
1 answer

Multiple Parallax Backgrounds

I am trying to use the Bourbon Parallax Refill for multiple backgrounds on a page. This is where I am getting the code from: http://refills.bourbon.io/components/#er-toc-id-14 And my codepen setup: http://codepen.io/mikehdesign/pen/jEKLPj My code is…
jquery css parallax bourbon neat
asked Feb 27 '15 at 11:49
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
1
vote
1 answer

width-transition not working on ::after in FF

I have this menu that I want to try some new animation with on the hover state. The problem is that the width transition doesn't seem to work in Firefox, but in Chrome, Safari and IE. I've tried with both Bourbon mixin and without, no help. Is…
css sass bourbon
asked Feb 10 '15 at 09:38
Erik Blomqvist
  • 471
  • 1
  • 4
  • 16
1
vote
1 answer

Bourbon Neat -- outer-container not full width of browser

I have a div that I want to act as a full-width header. Basically, the title and maybe a phone number and address. The aim of this question is to make this div the full width of the browser. New to Bourbon Neat My impression is that it works with…
css ruby-on-rails bourbon neat
asked Jan 29 '15 at 18:12
ma77c
  • 1,052
  • 14
  • 31
1
vote
1 answer

Position child element outside its context in Bourbon Neat

I'm trying to change the context of an html children element.
The main-contentelement is 6 columns wide and is shifted by 2. I would like…
grid bourbon neat margin
asked Jan 29 '15 at 11:47
Milksamsa
  • 319
  • 1
  • 5
  • 17
1
vote
2 answers

Margin between columns using Neat

It appears to me that the default behavior for Neat should be that each span column should have a margin (or gutter) between adjacent span columns. Every example that I've found online simply installs Neat, does a quick demo, and the result has a…
html css sass bourbon neat
asked Jan 28 '15 at 20:50
m_reese
  • 13
  • 2
1
vote
0 answers

Source reordering in Bourbon Neat

i am new to Neat. I am unable to figure out how to reorder the columns in bourbon neat grid. can someone give me some tip please. thanks. i read the documentation but i didn't understand anything useful for ordering. thanks.
css responsive-design bourbon neat
asked Nov 20 '14 at 02:57
Cloudboy22
  • 1,496
  • 5
  • 21
  • 39
1
vote
1 answer

Undefined mixin when using Bourbon Neat

I am using Bourbon and Neat, and have the following code @include direction-context(right-to-left) { div.actions { @include shift(3); @include shift(10); } } and am getting the following error: Undefined mixin 'direction-context'. I have double…
css sprockets bourbon neat
asked Nov 11 '14 at 15:36
pingu
  • 8,719
  • 12
  • 50
  • 84
1
vote
1 answer

Overriding Bourbon Bitters styles?

Besides the Bourbon and it's Neat (grid framework) I've installed also Bitters so to have some simple predefined look and feel. However, I have trouble with overriding the styles defined in Bitters. Here is an example. By default, all input text…
html css bourbon
asked Oct 13 '14 at 22:29
igr
  • 10,199
  • 13
  • 65
  • 111
1
vote
1 answer

Bourbon - Neat - Alternating Left/Right - Right/Left Columns - Same DOM Structure

I have recently started looking into Bourbon and Neat to use on my personal website and potentially for future projects. I am attempting to recreate an alternating left to right, right to left layout. Similar to this:…
sass bourbon neat alternating
asked Sep 04 '14 at 10:51
Markus Von Plunkett
  • 26
  • 4
1
vote
1 answer

linear-gradient not a string for `str-slice') in bourbon

While I was creating theme with Bourbon, I got the error below: error sass/screen.scss (Line 18 of sass/bourbon/css3/_background.scss: \ $string: linear-gradient(10deg, #217142,#214271) is not a string for `str-slice') Here's code in…
css sass compass-sass bourbon neat
asked Aug 13 '14 at 19:27
ekremkaraca
  • 1,453
  • 2
  • 18
  • 37
1
vote
1 answer

Neat emitting Css with width of a container NaN%

I created a demo neat project and gave it columns in Sass. here is the code. @import "../bourbon/bourbon"; // @import "../neat/neat-helpers"; $column: 0px; $gutter: 0px; $grid-columns: 10; $max-width: 100%; $large: new-breakpoint(max-width…
css responsive-design media-queries bourbon neat
asked Jul 24 '14 at 06:04
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
Prev 1 2 3
…
21 22 Next