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.
316
questions
0
votes
0
answers
93
views
Bourbon Install Error: "bad interpreter: No such file or directory"
I am new to Sass and RubyGems. I have installed Sass and it is functioning as expected. I want to now install the Bourbon library for use in my project, however, I keep getting an error that says "D:/...
0
votes
1
answer
866
views
Include `bourbon` from SCSS file (webpack)
I'm trying to get bourbon (package for SCSS mixins etc.), node-sass and webpack to work in harmony.
After running the webpack build command I get the following error:
ERROR in ./src/sass/style.scss
...
0
votes
1
answer
55
views
Invalid property value in CSS using: Bourbon SASS. +retinaimage deprecated from V4 using V6
I am currently taking the Brad Hussey SASS course on his YouTube channel: https://youtu.be/q5BO71n8Fbk?list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR
I'm on video #10 currently.
Using Bourbon in its ...
0
votes
1
answer
106
views
bourbon sass font-face font location compile error with npm
I am using bourbon and using their font-face sass function.
See my sass below.
$panton: (
("Panton-Light-Italic", 'italic', 300),
("Panton-Light", 'normal', 300),
("Panton-Regular", '...
2
votes
0
answers
331
views
How to include Bourbon via node-sass within ReactJS
Started a React project using create-react-app. Both node-sass and bourbon have been added as dev-dependencies.
To what file should the following be added to inform node-sass of bourbon?
require("...
1
vote
1
answer
1k
views
webpack4 mini-css-extract-plugin with bourbon
I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css ...
1
vote
1
answer
441
views
What is this plus sign and shorthand used in this SASS?
This was written a couple of years ago and little has been done with it since. I've been trying to find documentation for this notation and haven't found anything.
header
+display(flex)
+flex-...
0
votes
1
answer
158
views
Neat 2.0 Grid - media queries
I'm trying to follow the examples for the media query bases Neat grid here, but I'm having trouble getting the media queries to run. I'm able to get the tablet and phone ones to work, but I can not ...
1
vote
1
answer
38
views
Confusion about Neat 2.0 grid media
According to the official neat documentation, I should be about to use gird-media to change my layout based on a media query. But when I try to run the example code I get the following error:
@...
-1
votes
1
answer
47
views
Bourbon Neat Custom Container Size
I tried experimenting on Bourbon Neat trying to create basic layout such as:
HEADER
ARTICLE
SIDEBAR
FOOTER
What I want to achieve is, I wanted to create a container having a size of 970px though I ...
0
votes
1
answer
38
views
Prevent Widows in Tooltips with SASS (Bourbon) or JavaScript?
I have a custom tooltip implemented with SASS (and Bourbon) and would like to prevent widows from appearing, example:
.custom-tooltip {
@include position(relative);
.tooltip-right {
font-...
0
votes
1
answer
1k
views
Custom Webpack config in Laravel 5.5
I'm using Laravel 5.5 with Webpack and Vuejs.
I installed some packages like foundation-sites and bourbon and in my app.scss file I included them like so :
@import "bourbon";
@import 'foundation';
...
0
votes
0
answers
237
views
Error message when trying to compile scss to css
I'm using Bourbon,Neat,Bitters. Everything seemed good till trying to compile. I tried "gulp" command and Sass commands. I have Ruby,Sass,Nodejs,git installed. All are very recent. I am getting this ...
3
votes
1
answer
1k
views
Angular 2 Node Bourbon Error
ERROR in ./node_modules/css-loader?
{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-
loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-
loader/lib/loader.js?{"sourceMap"...
0
votes
1
answer
184
views
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.
0
votes
1
answer
166
views
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 ...
0
votes
1
answer
50
views
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-...
0
votes
1
answer
594
views
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
...
0
votes
1
answer
683
views
includePaths isn't providing my import statement with what I need in node-sass
I am using a javascript render function to automate a node-sass build, but the import statements are still failing to find bourbon and neat.
render.js
var sass = require('node-sass');
var bourbon = ...
0
votes
2
answers
154
views
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 ...
0
votes
1
answer
149
views
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':
...
2
votes
1
answer
485
views
Neat (Bourbon) compilation issues with webpack.config.js
Good day:
I'm currently trying to compile my _layout.sass file into CSS and I have dependencies on Bourbon and Neat. My current _layout.sass is this:
@import '../bourbon/bourbon';
@import '../base/...
1
vote
1
answer
959
views
Webpack 3, Extract Text plugin not resolving sass-loader includePaths
I have this setup working on an older project using:
webpack@3.0.0
extract-text-webpack-plugin@2.1.2
I'm now trying on a new project so have upgraded to:
webpack@3.8.1
extract-text-webpack-plugin@3....
1
vote
1
answer
77
views
Multiple Bourbon Refills Modals
I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.
So...this is ...
0
votes
2
answers
622
views
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%...
0
votes
1
answer
147
views
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 ...
0
votes
1
answer
54
views
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 = ...
1
vote
0
answers
235
views
sass @include works in some files and not others
I'm using the sass library 'bourbon neat'.
It provides a mixin called "outer-container".
I have a sass file structured like this:
@import bourbon/bourbon
@import neat/neat
@import componentOne
@...
0
votes
1
answer
1k
views
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 ...
1
vote
0
answers
353
views
how to setup Jekyll with Bourbon
I'm trying to setup a Jekyll site with the Bourbon and Neat mixin libraries.
I created a _sass directory and installed Bourbon and Neat into this directory.
Then I import Bourbon and Neat in the ...
0
votes
0
answers
34
views
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 ...
1
vote
0
answers
95
views
Gem installing an old version of Neat
Trying to install bourbon neat 2.0 and cannot get current version to install. Running the commands to install to directory gem install neat followed by neat install and all appears normal. Messages ...
2
votes
1
answer
235
views
Fill blank space with Neat grid
I am using Bourbon Neat sass grid and we are trying to develop a simple template that has a sidebar on left and a content div on the right.
<section class="section">
<div class="...
0
votes
1
answer
106
views
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 ...
0
votes
1
answer
112
views
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 ...
0
votes
2
answers
68
views
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 ...
1
vote
2
answers
121
views
Second row of Neat grid not working properly
I'm trying to use Neat's grid-container to create two rows of three, but the second row isn't starting as expected, because of different text lengths in the first row.
The HTML:
<section id="...
-3
votes
1
answer
230
views
What is better to use as a SASS mixin library: Bootstrap or Bourbon?
I am searching what to use as a Sass mixin library: Bootstrap or rather Bourbon.
I found that Bootstrap is more like UI frameworks and you are getting out of the box components and modules. And ...
7
votes
1
answer
786
views
create-react-app (without ejecting) + bourbon/neat?
I'm rewriting an "old" React prototype that uses Bourbon, it also uses gulp-sass in a gulpfile to inject a node-neat dependency:
var sassOptions = {
includePaths: require('node-neat')....
0
votes
1
answer
194
views
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 ...
0
votes
1
answer
305
views
Neat 2.0 tablet media query not working
In Neat 1.8 I used 3 breakpoints for my media queries and they where as follows:
$mobile: new-breakpoint(min-width 320px max-width 767px);
$tablet: new-breakpoint(min-width 768px max-width 1024px);
$...
0
votes
1
answer
283
views
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 ...
1
vote
1
answer
822
views
Cant get bourbon files imported in my site (show tree in post)
I believe a picture best describes my issue
https://postimg.org/gallery/37bdm2lp8/
Please see img for tree document
https://postimg.org/image/qsmm9rdx1/
My issue is a simple one, but I am not ...
1
vote
2
answers
446
views
Why is there no grid-row in neat?
I want to tell Neat that I want to start a new row within the grid.
Unfortunately there is no grid-row in Neat.
Why is that and how do you tell Neat that you are finished with the current row?
0
votes
1
answer
206
views
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 ...
0
votes
1
answer
254
views
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:...
0
votes
1
answer
241
views
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 ...
0
votes
1
answer
372
views
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 ...
0
votes
1
answer
832
views
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 ...
0
votes
2
answers
240
views
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 ...