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

Responsive Image in Neat 2.0

Is there a recommended way to get an image to be 100% of the height of a column in Neat based on the size that the text makes the column? I've attached an example of what I'm trying to accomplish below. I'm trying to make the image fill the 1/3…
Tyler Bramer
  • 275
  • 2
  • 14
0
votes
1 answer

How to overwrite bourbon neat Omega()

I'm currently working on a layout that requires a different layout on mobile, tablet and desktop. Mobile - Stacked Tablet - two column layout desktop - three column I'm finding that my two columns layout sticks all the way up to my desktop…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

Using custom media queries with Neat

The documentation grid-media on Neat 2.0.0 describes the ability to set a media query in pixels. By default, this will output a pixel value as a min-width media query. For example: $custom-neat-grid: ( columns: 12, gutter: 50px, media:…
Kai
  • 13
  • 5
0
votes
1 answer

Codekit + Neat compiling error

I'm new to Neat/Bourbon and trying to setup using Codekit so that I can begin building some awesome grids! I have installed Neat using the built in Codekit version by inserting @import "neat"; into my main SCSS file. It appears that this is working…
dungey_140
  • 2,602
  • 7
  • 34
  • 68
0
votes
1 answer

How to Get Bourbon, Neat, Bitters & Refills to Work Together

It seems to me that there are some conflicts between Bourbon, Bitters, Neat and Refills. I have gotten errors about undefined variables and mixins. From searching around, my understanding is that Bitters requires version 5.0 beta of Bourbon whereas…
Moshe
  • 6,011
  • 16
  • 60
  • 112
0
votes
1 answer

Reversing row direction for every 2nd child using Bourbon neat

I'm attempting to reverse the row layout for every 2nd child using Bourbon Neat reset-layout-direction mixin. However, this does not seem to be working using the nth-child pseudo selector. What am I doing wrong? Here is the codepen HTML
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
2 answers

Remove margin nested columns with Bourbon Neat

How do I remove the margin from two columns with nested offset columns inside of them. I want to make sure that the content within the column's is always centered and I can not seem to get this to work using the @include row (table); mixin. The…
Simon
  • 147
  • 1
  • 10
0
votes
1 answer

How to add outer gutter to Bourbon Neat's outer-container?

On widths smaller than $max-width, the grid starts from the edge of the viewport. I added some padding to avoid the text from starting from the edge of the viewport, but now it's out of alignment with the grid. How can I make the grid start from the…
blogjunkie
  • 237
  • 1
  • 4
  • 18
0
votes
1 answer

How to do a three column grid with bourbon neat?

I'm trying to create a three column grid, and have the columns evenly distributed across the row. My markup is simple:
…
bob
  • 753
  • 4
  • 15
  • 27
0
votes
1 answer

What is new-breakpoint second argument for?

Im trying to learn bourbon-neat, came across its breakpoint feature that takes a query and grid-columns. What is the use of grid-columns there? Why would you set the grid-columns like that when you can change the columns on the fly with declaration…
Chopnut
  • 607
  • 2
  • 8
  • 25
0
votes
1 answer

why is Bourbon Neat moving 4th item of first row to next row?

I'm trying to implement an image gallery of researchers. my view template looks like this: app/views/members/index.html.erb

Current Members

<% @members.each do |member| %> <% if member.active %>
Toontje
  • 1,415
  • 4
  • 25
  • 43
0
votes
1 answer

How do you make content inside a box stay inside the grid, while breaking the box out of the grid

Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words) What I'm trying to create is the cyan box. I hope the…
Phillip
  • 6,033
  • 3
  • 24
  • 34
0
votes
2 answers

Full width container with fix width content. Sass, Bourbon Neat

I wish to make my background full width, with a image or colour background filling the row. However, I would like the content to sit in the middle spanning the standard 12 cols dictated by neat. Currently my structure is:
…
Grant Smith
  • 321
  • 2
  • 15
0
votes
1 answer

bourbon mixins not working with Code Kit 3

I am using bourbon and neat for the first time after switching over from compass. My set up is as follows: Importing bourbon and neat at the top of my main SASS file like so: @import "bourbon"; @import "neat"; Installed using CodeKit 3 All of my…
Ryan Swanson
  • 350
  • 1
  • 6
  • 23
0
votes
1 answer

Replicating a table layout using Bourbon Neat

I'm trying to replicate this table layout using divs and Bourbon Neat: …
Strontium_99
  • 1,771
  • 6
  • 31
  • 52
1 2 3
…
21 22
Top Right