Stack Overflow
Stack Overflow

Questions tagged [neat]

Neat is an open source semantic grid framework built on top of Sass and Bourbon.

What is it about?

Neat is a semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout you can dream of.

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

It also aims to stay as lightweight as possible; just enough to handle the most common grid uses in modern Web design.

Is it responsive?

Yes. You can even change the grid settings in a specific breakpoint.

Alright. How do I get started?

Install Neat and its dependencies, read the documentation and check the examples page if you get lost. If you want to use Neat on your Rails app, there is a gem for that. Feedback? If you think something is broken or can be improved, fork the repo. You can also tweet your questions or suggestions at https://twitter.com/kaishin and https://twitter.com/kylefiedler.

Bourbon and Neat are maintained and funded by thoughtbot, inc.

Links

Related tags

305 questions
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
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

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

Outer margins = grid gutter in Neat

This was asked years ago on the Neat github. The user there describes the issue very comprehensively, with images: https://github.com/thoughtbot/neat/issues/99 Essentially, I like grid systems, but I don't want elements to touch the edge of the…
Chris
  • 115
  • 8
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
1 answer

Neat/omega grid issue

I am very new to Neat and currently working on a simple grid that displays a gallery of images. My code $mobile: new-breakpoint(max-width 500px); $tablet: new-breakpoint(max-width 768px); article{ background-color: #efefef; margin-bottom:…
user5898548
  • 73
  • 7
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
0
votes
1 answer

Comment box in check out with big cartel neat theme

I'm wondering if there is any way to add a comment box in the check out or cart section of the customization field with the Neat theme by Big Cartel?
Lalamonsta
  • 1
0
votes
1 answer

Import neat not found by node

I'm not sure on how to serve static assets with Node. I have Bourbon-Neat installed as a dependancy via npm install -g neat. The neat forder is located in my project folder. @import "neat"; leads to 404 error on serverip:8000/neat Giving an…
user3292534
1 2 3
…
20 21
Top Right