thoughtbot / neat Goto Github PK

.answers {
list-style-type:lower-alpha;
font-size:16px;
li {
@include span-columns(3);
@include omega(4n);
}
}

Have you thought about using placeholder selectors vs an interface which uses @include? Case in point, from this page. http://neat.bourbon.io/examples/

You would instead generate placeholder selectors and allow people to extend vs include.

@extend %span-columns-6;
@extend %omega;

In the readme for Neat it says that the three variables used to size the grid can be set in either px or em. So, since I try to not use pixels unless I have to, I set up a grid using the following:

$column: em(58, 14);
$gutter: em(24, 14);
$grid-columns: 12;
$max-width: em(960, 14);

Now anytime I try to use an @include media call I get the following error:

Undefined operation: "12 times 4.14286em".

Am I missing something? Should I just always use px?

The WIP vertical grid/type mixins should be developed in a separate branch as it makes little sense to have them in master right now.

Looking to verify if something like this is possible?

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
CSS rules for this query go in this space
}

I want do build an off canvas navigation with neat ... not sure if its possible ... @include shift(-3) doesn't seem to work ... is there a way or have I have to hack it ?

~Max

Great looking framework! Just curious, what is the browser support?

We need a better mechanism for overriding default variables. The way it is currently implemented (both _grid.scss and _variables.scss inside /neat) makes it impossible to override those without modifying the default variables themselves.

This seems like a common thing to do, so I guess this might be the right forum for my inquiry.

Currently, I have a list of articles like so:
<article class="odd">...</article>
<article class="even">...</article>

I have applied row(); to

However, this fails:

article {
  @include row();

  &.odd {
    @include row(block,LTR);
  }

  &.even {
    @include row(block,RTL);
  }
}

Using

article {
  @include row(block,RTL);
}

works fine.

I have tried using @include reset-layout-direction; but nothing seems to work.
Is this not possible?

The example pages (and project I'm working on: dev.wcrichmond.org) columns are not totaling the full width of the container which is more evident when there's a darker background for the outer container.

bourbon neat example:

wcrichmond example:

What's the best way of going about having a fixed (non-flud) grid? I've found that setting a width on your element containing outer-container and body::before seems to work for both the grid and visual grid but I'm not sure if there's a better way of doing this or if its even supported by Neat?

I don't know if it's me or Rails, but no matter what I do I get File to import not found or unreadable: neat.

I have added gem 'neat' to Gemfile and tried to do @import 'neat' in application.css.scss.

Wondering if anyone has implemented fixed-width gutters using Neat?

i.e. Instead of gutter width as a percentage, could it be a fixed unit?

Having to manually add this mixin is kinda annoying. I'd like the grid, especially as a developer, to be smart enough to figure that out. Also, it takes a $side argument even if span-columns() add only right margin and paddings.

Do you have something against using :last-child? did you think of a situation where it wouldn’t cut it?

.answers {
list-style-type:lower-alpha;
font-size:16px;
li {
@include span-columns(3);
@include omega(4n);
}
}

From the README describing neat's new visual grid...

"The visual grid reflects the changes applied to the grid via the new-breakpoint() mixin."

I read this to mean the grid should respond, as in, redraw when you view different breakpoints. Which would be reassuring. But I get a 12 column grid even where I've specified an 8 or 4 column variant...and even when that variant is clearly working and in play.

Don't know if I've misunderstood, misconfigured, or if the feature just isn't fully baked.

"You need also to import neat-helpers (or near/neat-helpers in non-Rails projects) in your stylehseet (_my-neat-overrides.scss in the example above) if you want to use helper mixins and functions such as new-breakpoint() and em():"

Currently, a table layout requires adding a table argument to each span-columns call. The solution would be detecting that the parent container/row is using a table layout instead.

In the current implementation, Neat adds a &:last-child {margin-right: 0} to each selector that uses the span-columns() mixin. Example:

// Sass
section {
  @include outer-container();

  aside {
    @include span-columns(6);
  }

  article {
    @include span-columns(2);
  }
}

// CSS
section aside {
  display: block;
  float: left;
  margin-right: 3.22581%;
  width: 22.58065%;
}
section aside:last-child {
  margin-right: 0;
}

section article {
  display: block;
  float: left;
  margin-right: 3.22581%;
  width: 74.19355%;
}
section article:last-child {
  margin-right: 0;
}

This ends up in unused CSS code, as only article:last-child in the example above is targeted. I was thinking that the same can be achieved if we make & *:last-child {margin-right: 0} part of the outer-container() mixin instead. This also comes with two flaws:

• Nested universal selector has a performance cost
• This would make using outer-container() necessary for the elements to float properly, which is not currently the case.

Any thoughts?

From @marchdoe:

Banging my head on how to get the media queries to work. My layout looks like this:

<div class="container">
  <section>
    <ul>
      <li>4 of these</li>
    </ul>
  </section>
</div>

CSS is like this:

div.container {
  @include outer-container;
}
section {
  @include span-columns(12);
}
section ul li {
  margin-bottom: 20px;
  @include span-columns(3);
  @include nth-omega(4n);
}

I am trying to have that section swap to a 4 column grid when it is on a mobile device.

When I try this:

section  {
  @include span-columns(12);
  @include media(min-width 320px max-width 480px, 4);
}

It doesn't switch to 4 columns when I am on an iphone size device.

I used @include row(table); to style the header of some tabs inside of a modal window.

However, any subsequent containers took on "table" as default.

The documentation mentioned that rows can't be nested, but I'm not sure this behaviour is expected.

span-columns() also completely disregarded passing block or inline-block until I removed the element with row(table)

I know we can overwrite the global $gutter variable. But is there a way I can manipulate the $gutter size for a particular CSS selector?

Would you be open to adding a mixin or an extra parameter in span-columns() ?

I love using rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid] in Twitter Bootstrap to get something up/running fast.

That kind of thing would be awesome here.

Is there a way to have a fixed column among a set of fluid columns?

For example a three column grid where
column 1 is fluid
column 2 is a fixed width of 300px
column 3 is fluid

Thanks

According to your documentation here - http://neat.bourbon.io/docs/#span-columns span-columns accepts inline-block as a value for $display property. I checked this information with source code and the inline-block value is ignored. The field accept only: block or table.

It would be good to have ability to display column as inline-block in order to make vertical alignment working.

When trying to import neat from within a folder in a Ruby on Rails (3.2.8) (i.e. app/assets/stylesheets/custom/example.css.scss) the following error occurs:

File to import not found or unreadable: helpers/new-breakpoint.
Load path: Sass::Rails::Importer(/Users/kevin/Desktop/silly/app/assets/stylesheets/custom/example.css.scss)
  (in /Users/kevin/Desktop/silly/app/assets/stylesheets/custom/example.css.scss)

A sample application with the problem can be found here:

http://cl.ly/3Y0R2E2P472r

Hi there,
I have found an issue where importing I have set a breakpoint in my _grid-settings.scss

$max-width: em(1100);
$tablet: new-breakpoint(max-width 768px);

My style.scss imports in the following order:

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";
@import "ui/styles"

But for some reason when I try and call the following

@include media($tablet) {
  @include span-columns(12);
}

in my scss ui/styles file it doesnt import the breakpoint.

Is this a bug or am i doing something wrong.

Would be great if you could consider a method by which to improve "@include pad()"...which as I understand only takes a value as an override. I'd like to be able to keep, for example, the top padding of a column in scale with other elements, without always having to resort to...

@include pad;
padding-left:0;
padding-bottom:0;
padding-right:0;

There would be a few ways to tackle this syntactically...preserving the ability to pass override values, if you're interested I could lay out some options. But if you don't see then need or want to keep things simple, I'll save myself the time. I can also live with the verbosity of manual overrides...it's just a little clumsy, and not fully leveraging the reason for using Sass in the first place.

This framework seriously rocks, BTW.

I just ran 'bundle update' and now during asset preprocessing, I get this error...

Errno::EACCES: Permission denied - /Users/rob/www/sundial/tmp/cache/sass/d2584e652fb0caf999e2a285a5d2bb6d38bab799/_px-to-em.scssc
(in /Users/rob/www/sundial/app/assets/stylesheets/marketing/marketing.scss)

/Users/rob/.rvm/gems/ruby-1.9.3-p392@sundial/gems/sass-3.2.8/lib/sass/cache_stores/filesystem.rb:25:in `unlink'

Is there an incompatibility somewhere or something else I should be addressing?

Thanks!

It would be really great if there was a way for grid elements with position: fixed to respect the grid rather than the viewport.

For example:

.foo {
  @include span-columns(4);
  @include position(fixed, 0px 0 0px 0);
}

.bar {
 @include span-columns(8);
 @include shift(4);
}

Where .foo's width would not change when fixed.

The app I'm working on sets $max-width: 100%, so it conveniently works, but it would be nice to do this on non-fullscreen apps.

Edit: I see that there is no built in way to do this (#62), but unlike that issue, I'm not interested in mixing % and px.

is http://thoughtbot.github.com/examples/

should be http://thoughtbot.github.com/neat/examples/

Hi,

I really like your product, and would like to use it in our next project. On the home page (http://thoughtbot.github.com/neat/) there are broken links to "examples".

Could you fix it? my boss won't believe in the product if he sees that, and will go for another, more established, CSS grid framework. Would make me sad :(

Cheers,
Christophe

Can anyone help me with this? Thanks.

Compass was unable to compile one or more files in the project: 

error global.scss (Line 4: File to import not found or unreadable: neat/neat.
Load paths:
  /Users/M8M/Dropbox/webdesign/localroot_db/htdocs/ringfalcon/scss
  /Users/M8M/.rvm/gems/ruby-1.9.3-p286/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /Users/M8M/.rvm/gems/ruby-1.9.3-p286/gems/compass-0.12.2/frameworks/compass/stylesheets
  /Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
  Compass::SpriteImporter)
overwrite global.css

I have a div which is supposed to have a width of 960px. 16 columns ( out of 24 ) in my grid calculates to 960. However, each column is the "bar" + "gutter" - so removing the gutter of the last column screws up the dimensions. Is there a way to not remove the gutter of the last column by default? ( not adding padding ). Thx.

I was trying to do a right hand nav and noticed there wasn't an easy way to make content higher up in the document be positioned to the right.

I ended up just doing this on the last element for now.

float: right;
margin-right: none;

I worked up some code locally to allow a new display 'right-to-left' layout.

  @else if $display == right-to-left {
    display: block;
    float: right;
    margin-left: flex-gutter($container-columns);
    margin-right: auto;
    width: flex-grid($columns, $container-columns);

    &:last-child {
      margin-left: 0;
      margin-right: auto;
    }
  }

  @else {
    display: block;
    float: left;
    margin-left: auto;
    margin-right: flex-gutter($container-columns);
    width: flex-grid($columns, $container-columns);

    &:last-child {
      margin-right: 0;
      margin-left: auto;
    }
  }

.container {
  @include outer-container;
  aside {
    @include span-columns(2, 'right-to-left');
  }
  article {
    @include span-columns(10, 'right-to-left');
  }
}

This has the same issues as the table layout issue, where you have to put right to left on each.

Let me know what you think, or if theres a better way to accomplish it. I can submit a pull request if you think its needed.

Im trying to override the variables to remove the gutter but it doesn't seem to work.

I tried importing the variables file like in the documention.

@import "variables";

But I get an error from sass saying it can't find variables

Hello
Not sure if I can ask a question here – but I take a chance ;)

I have a class element with media queries, like this:

article.product {
.bildtext {
text-align: left;
width: 15em;
padding: 3px;
}
@include media($medium-cat) {
@include span-columns(6); // to have a image grid with 2 columns
@include nth-omega(2n);
}
@include media($big-cat) {
@include span-columns(4); // to have a image grid with 3 columns
@include nth-omega(3n);
}
}

My problem is that the nth-omega(2n) in $medium-cat, also is active in the media query $big-cat. The right margin on the 3rd column is removed – but also the right margin on every 2nd column.

What am I missing?

Regards, Magnus

Wouldn't it make more sense to use margin left paired with first-child (alpha) instead of margin right/last-child??

That way there would at least be basic grid support for IE all the way back to 7, without the need for Selectivizr.

Is there a recommended way to create a sticky header within a simple two column grid?

Imagine the following construction:

<element class="container">
   <element1 id="stickHeader"> ./element1>
</ element>

<element class="container">
   <elelment id="content" >  
        <elelment  >
        </elelment >
        <elelment >  
              ....
        </ elelment >
    </elelment >
</element>

The sticky header should scroll over all content in viewport. Each element is wrapped by a Container element that sets @outer-container

I currently have something like this in my scss file

.global.stick-top {
    @include span-columns(12, inline-block);
    margin: 0;
    padding: 0;
    // position: absolute;
    // top: 0;
    z-index: 1000;
            ...more code
     }

I need to comment out the positioning styles because it breaks the layout. Using multiple containers is preferred because it allows for greater control.

Thank you taking a look at this!

Due to the way SASS evaluates expressions, any complex argument to the nth-omega mixin will not give the expected result unless the argument is passed as a string.

Problematic example:

li { @include nth-omega(3n+5);} 

Result:

li:nth-omega(8n) { margin-right:0; }

Whereas this one evaluates as expected:

li { @include nth-omega("3n+5"); }

Result:

li:nth-omega(3n+5) { margin-right:0; }

I've tried out a few things and I'm not sure that there is a good solution to this other than making it clear in the documentation, as the argument has already been evaluated by the time it gets to the mixin.

We're a roadmap to Bourbon Neat?

I want to create an irregular grid with a row of two sections, one of 7columns and the other of 5 and the second row with 3 sections of 4 columns each.
The HTML is something like this:

And the Sass code:

section {
@include span-columns(12);
.one {
@include span-columns(7);
}
.two {
@include span-columns(5);
@include omega;
}
.three {
@include span-columns(4);
}
.four {
@include span-columns(4);
}
.five {
@include span-columns(4);
@include omega;
}
}
The issue is that doesn't work... section 1 and 2 are ok, but the section 3 is placed in other row just beyond section 2, and 4 and 5 starts a new row.

I could add an extra markup, one container for sections 1 and 2 and another for 3,4 and 5; but I'd rather solve with css because different aligments of sections in mobile or tablet media queries.

Is there a way to do this with neat? What am I doing wrong? Thanks a lot! (and sorry for my english)

Max

Hi,

I want to try Neat, but it won't install under Windows. I'm following "Non Rails Projects" instructions:

gem install neat --> seems ok:

Fetching: sass-3.2.1.gem (100%)
Fetching: bourbon-2.1.1.gem (100%)
Fetching: neat-0.4.2.gem (100%)
Successfully installed sass-3.2.1
Successfully installed bourbon-2.1.1
Successfully installed neat-0.4.2
3 gems installed
Installing ri documentation for sass-3.2.1...
Installing ri documentation for bourbon-2.1.1...
Installing ri documentation for neat-0.4.2...
Installing RDoc documentation for sass-3.2.1...
Installing RDoc documentation for bourbon-2.1.1...
Installing RDoc documentation for neat-0.4.2...

bourbon install --> seems ok:

Bourbon files installed to bourbon/

neat install --> error

'neat' is not recognized as an internal or external command,
operable program or batch file.

Ruby bin folder doesn't contain any neat binary or bat.

Curious if neat supports something like this

@media only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) { 

}

I looked at the documentation but nothing stood out as the answer.

The function golden-ratio() doesn’t seem to take floats. Not sure how you got that working on your side...

Currently, it's impossible to have a series of columns with float: right and margin-left, instead of the opposite. This forces authors to change the order of the HTML elements, which isn't ideal. Adding a $direction option to row, could fix this problem.

This:

ul {
  @include row(block, right);

  > li {
    @include span-columns(6);
  }
}

Would generate this code (ommiting non-relevant specifics)

ul > li {
  float: right;
  margin-left: ...;
}

ul > li:first-child {
  margin-left: 0;
}

Currently, if one wants to have multiple rows of columns, one has to use both omega and a different selector with clear. Here's an example for a 3-column grid using default settings.

.container {
  @include row;

  > * {
    @include span-columns(4);
    @include omega(3n);

    &:nth-child(3n+1) {
      clear: left;
    }
  }
}

This could be optimized by doing:

.container {
  @include row;

  > * {
    @include span-columns(4);
    @include omega(3n, left, clear);
  }
}

Furthermore, when RTL features are added to Neat (see #71), this could take any $direction arguments into consideration, ending up with a more clear version: @include omega(3n, clear);.

Hi,

I would like to suggest an improvement on the responsive system @include media().

I have the following Neat customizations:

$tablet: new-breakpoint(max-width 768px 8);
$phone: new-breakpoint(max-width 480px 6);

For some <p> of my web page to be displayed over:

• 8 columns centered (high res, default)
• 6 columns centered (tablet)
• full width (phone)

.. I write the following code:

p {
    @include span-columns(8);
    @include shift(2);

    @include media($tablet) {
        @include span-columns(6);
        @include shift(1);
    }
    @include media($phone) {
        @include span-columns(6);
        @include shift(0);
    }
}

I regret having to re-declare @include span-columns(6) for the $phone declaration, but it's necessary because the width of <p> is not updated when the number of columns change, unless you re-declare @include span-columns().

Isn't it possible for the Neat framework to handle such refresh for me?

Cheers,
Christophe

Currently, it’s impossible to have a single floated right element in a series of floated left elements (or vice-versa).

This may not seem important at first, but it’s a issue that easily arises when working in responsive designs.

An example from a project I’m working on. It’s a <footer> of a magazine <article>. It includes sponsor information, author bio, and illustrator bio.

On a narrow viewport, I want to present the content as such:

+---------------+
|               |
|   .sponsor    |
|               |
+---------------+
|               |
|   .author     |
|               |
+---------------+
|               |
| .illustrator  |
|               |
+---------------+

So, naturally, I have to write the following HTML:

<footer>

  <div class="sponsor">
  </div>

  <div class="author">
  </div>

  <div class="illustrator">
  </div>

</footer>

However, on a wider viewport, I want each <div> to take 4 units of a 12-unit flex grid, and have the sponsor at the far right, as such:

+---------------+---------------+---------------+
|               |               |               |
|   .author     | .illustrator  |   .sponsor    |
|               |               |               |
+---------------+---------------+---------------+

However, that’s not so easy right now. I could use span-columns but would have to manually override float and margin-right, as well as set margin-left myself.

So, what I propose is a $direction argument on span-columns, that I could use on .sponsor for this effect. Perhaps seeing as row now has direction support, $reverse is a better name, so this argument would in fact reverse the direction of the current row for the specific element it’s used on.

There wouldn’t be a problem with the &:last-child selector preventing a margin, because the reversed element would have margin to compensate for that, and the new default clearing behavior of omega isn’t an issue if changed to clear: both.

This is an issue that occurs often in responsive designs, as the order of HTML elements needs to match the visual presentation of content in a single-column design, so I believe it’s important enough to be brought up for consideration.

This would make call omega() or nth-omega() inside span-columns(). This would be something like:

@include span-columns(6 of 8, omega);
@icnlude span-columns(2, 4n);