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

Defining breakpoints in SASS

i am quite confused here.I am using Sass for Bourbon Neat and I am unable to set breakpoints using neat. Somehow they don't show up correctly in mobile and browser. here is the code $mobile: new-breakpoint(max-width 800px 4); $tablet:…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
1
vote
3 answers

Import of "bourbon" doesn't work in Jekyll setup

I'm using Jekyll to create a static website and want to use the framework Bourbon to build my CSS from. I've installed Jekyll and want to install Bourbon by adding it to my Gemfile using gem 'bourbon' and running bundle install. Now when I add the…
Mr.Mark
  • 97
  • 2
  • 14
1
vote
1 answer

Sass/Bourbon .css output has errors with @font-face mixin

I'm using the default Sass/Bourbon mixin font-face.scss but the generated css is wrong, for some reason nesting the body tag under @font-face. I have no errors when it generates the CSS but the fonts aren't showing of course. Any ideas? CSS…
Jefe
  • 67
  • 6
1
vote
1 answer

Variables in Bourbon size() mixin

I've recently started using an updated version of the Bourbon SASS plugin. I've previously used a custom mixin to set the width and height using the following syntax; $width: 350; $height: 200; .wrapper { @include size($width $height); } This…
Novocaine
  • 4,692
  • 4
  • 44
  • 66
1
vote
1 answer

Why isn't omega(value) overriden on new breakpoint?

Here's the code on Sassmeister, please let me know if there are any problems with the link: http://sassmeister.com/gist/0b7c3a1897fe3bbe33db I have a $tablet and $bigscreen breakpoint, they use min-width values. There's a media query for $tablet…
user3126277
1
vote
2 answers

How to change the number of automatic columns across media queries in Neat

Bourbon Neat allows you to use the span-column() mixin along with the omega() mixin to create automatic columns similar to foundation 5's block grids. However, these seem to fail miserably when sharing styles across media queries. Take a look at…
jsheffers
  • 1,602
  • 19
  • 41
1
vote
0 answers

Prevent bourbon/refill sliding menu from operating at a specific breakpoint with js/jQuery

I am using bourbon refill's sliding menu for a project and simply want it to operate until a particular break point. I figured this method below would work. CSS: @media only screen and (max-width: 959px) { //sliding menu code } Strangely, this…
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
1
vote
2 answers

chaging max width property of grid in bourbon neat

I am using bourbon neat for thee first time. what I am trying to do is to set max-width property of neat in _grid.css Now I am trying to do it in PX say 700px but by default its $max-width: em(1000) !default; I tried giving it in PX but it doesn't…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
1
vote
0 answers

Bourbon Neat is giving me error after sass watch

Hi guys i am new to Bourbon Neat. ive installed bourbon and neat in a folder. Now after i do this sass --watch scss When it compiles the css generated has following errors. Syntax error: Invalid CSS after "... $grid-columns ": expected "}", was…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
1
vote
0 answers

Getting an error using grunt serve?

I am using Generator-jekyllrb and it has a grunt task which can't seem to process some scss files. I get this error: Warning: LoadError on line ["1"] of /Users/antonioortiz/Sites/_aortizRefresh_/app/_bower_components/refills/lib/refills.rb: …
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
1
vote
1 answer

can i use foundation 5 with bourbon Neat?

hey guys I am totally blown away by the power of clean semantic mark-up.My Question is that can i just use the UI components of fundation with Neat? has anyone tried it yet? thanks.
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
1
vote
0 answers

Bourbon 3.1.8 and Sass 3.3.2 (Maptastic Maple) not getting along

I have install latest sass and latest bourbon and I'm getting this error: >>> Sass is watching for changes. Press Ctrl-C to stop. error main.scss (Line 1: File to import not found or unreadable: bourbon/b ourbon. Load path:…
IGRACH
  • 3,506
  • 6
  • 33
  • 48
1
vote
3 answers

Setting up SASS with jekyll?

I've been trying to setup SASS (and Bourbon.io) with jekyll for a personal blog on github pages. I've changed the name of the css folder that is installed with jekyll to stylesheets and within stylesheets I have two folders, css and sass. I start my…
user3126277
1
vote
1 answer

Container padding in Neat/Bourbon

I am working with Neat the first time. I am wondering how I can accomplish a padding for the outer .container. When giving the container a padding, the width of the columns within aren't right anymore and shift to the right/left. Like this…
christophe
  • 692
  • 4
  • 14
  • 27
1
vote
2 answers

where to define body styles

I'm having this issue where I can't seem to override the background color of the body element in my Neat Bourbon website. I defined the background color like this in the _layout.scss file: body { background: lighten($brokenwhite, 5); } but when I…
Toontje
  • 1,415
  • 4
  • 25
  • 43
1 2 3
…
21 22