Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Neat CLI commands #13

Closed
wants to merge 17 commits into from

3 participants

@kaishin
Admin

We need to provide an easier workflow for non-Rails projects using install and update commands (like we do for bourbon).

@mike-burns
Admin

Proposal: a bourbon plugin infrastructure for installation and updates.

From the user's perspective, they type bourbon install neat and bourbon update neat.

Tech details:

On the bourbon side this will require the file neat/plugin. Neat::Plugin looks like this:

module Neat
  class Plugin < Bourbon::Plugin
  end
end

Instance of Neat::Plugin can be used to #install and #update neat. The inherited installer and updater simply copy the relevant files from app/assets/stylesheets.

@kaishin
Admin

Just to make sure we're on the same page, would this requires the Neat gem to be installed locally?

@mike-burns
Admin

Yes, that part does not change. The Gemfile still needs this line:

gem 'neat'
@plapier

Mike, I have plans for improving the install and update commands. Like specifying a location.

bourbon install ./stylesheets/scss/
bourbon update ./stylesheets/scss/

I don't necessarily think bourbon should require neat. If we build a plugin system, we should think about building it so that other members of the open source community can use it too. Bourbon should not have to require all the plugins we may build for it.

Neat should require bourbon, but not vice versa.

Though, I do like the simplicity of bourbon install neat & bourbon install neat ./stylesheets/scss/ (location specified)

@mike-burns
Admin

Sorry, I miscommunicated. Bourbon will not depend on Neat, but the Ruby code will translate bourbon install neat into require neat/plugin.

I definitely want hooks that the community can build atop, and I see Neat as a good testbed for that.

@plapier

Gotcha. I'm fine with with the proposal then.

@kaishin
Admin

Is there a way to make bourbon install neat install the actual Neat gem if it's missing? That way we can skip the gem install neat altogether.

@mike-burns
Admin

It can, yes, but this will interact oddly with bundle/Gemfile. If this is actually an option you want then I recommend something like bourbon install neat --remote or --system or something extra.

@kaishin
Admin

I guess what bothers me is this exact sequence:

$ gem install neat
$ bourbon install neat
@mike-burns
Admin

Let's optimize for the common case. So, what is the common case: will people who use bourbon install often use Bundler and Gemfiles, or will they instead type gem install neat?

@kaishin
Admin

Unless @plapier has some concrete data for Bourbon, my hunch tells me it's the latter. Either way, those who use Gemfile are well covered regardless of he direction we take. I'm fine with bourbon install neat for a start, just thinking of ways to make it even simpler.

@mike-burns mike-burns referenced this pull request in thoughtbot/bourbon
Closed

Plugin infrastructure #116

@kaishin
Admin

I think we should temporarily provide a way to install and update Neat on non-Rails projects . I added this functionality in the present PR.

@kaishin kaishin referenced this pull request
Closed

Package 'neat' into a gem #10

@kaishin kaishin closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 31, 2012
  1. Package up neat into a gem

    Joel Oliveira authored
  2. Preliminary README edits

    Joel Oliveira authored
  3. Ready gem for first release.

    Joel Oliveira authored
Commits on Sep 4, 2012
  1. @mike-burns
  2. @mike-burns
  3. @mike-burns
Commits on Oct 22, 2012
  1. @kaishin
  2. @kaishin
  3. @kaishin
Commits on Oct 23, 2012
  1. @kaishin

    Add NEWS.md

    kaishin authored
Commits on Oct 24, 2012
  1. @kaishin
  2. @kaishin

    Change stylesheets structure

    kaishin authored
  3. @kaishin
  4. @kaishin

    Update NEWS.md

    kaishin authored
  5. @kaishin
Commits on Oct 29, 2012
  1. @kaishin

    Better override documentation

    kaishin authored
    - Rename neat-overrides to neat-helpers
  2. @kaishin

    Rename breakpoint() to media()

    kaishin authored
This page is out of date. Refresh to see the latest.
Showing with 726 additions and 213 deletions.
  1. +2 −1  .gitignore
  2. +4 −0 Gemfile
  3. +13 −0 NEWS.md
  4. +318 −163 README.md
  5. +2 −0  Rakefile
  6. +0 −18 _neat.scss
  7. +2 −0  app/assets/stylesheets/_neat-helpers.scss
  8. +10 −0 app/assets/stylesheets/_neat.scss
  9. +2 −0  app/assets/stylesheets/functions/_helpers.scss
  10. +63 −0 app/assets/stylesheets/functions/_private.scss
  11. +18 −0 app/assets/stylesheets/functions/helpers/_new-breakpoint.scss
  12. 0  {functions → app/assets/stylesheets/functions/helpers}/_px-to-em.scss
  13. +1 −0  app/assets/stylesheets/grid/_global-variables.scss
  14. +82 −3 { → app/assets/stylesheets}/grid/_grid.scss
  15. +40 −0 app/assets/stylesheets/grid/_visual-grid.scss
  16. +2 −0  app/assets/stylesheets/settings/_default.scss
  17. +6 −0 app/assets/stylesheets/settings/default/_grid.scss
  18. +5 −0 app/assets/stylesheets/settings/default/_visual-grid.scss
  19. +5 −0 bin/neat
  20. +0 −15 functions/_grid.scss
  21. 0  functions/_line-height.scss
  22. +17 −0 lib/neat.rb
  23. +5 −0 lib/neat/engine.rb
  24. +74 −0 lib/neat/generator.rb
  25. +3 −0  lib/neat/version.rb
  26. +23 −0 lib/tasks/install.rake
  27. +29 −0 neat.gemspec
  28. +0 −6 settings/_grid.scss
  29. +0 −3  settings/_typography.scss
  30. +0 −4 typography/_typography.scss
View
3  .gitignore
@@ -11,4 +11,5 @@ images/
css/
_config.yml
index.html
-
+pkg
+Gemfile.lock
View
4 Gemfile
@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in neat.gemspec
+gemspec
View
13 NEWS.md
@@ -0,0 +1,13 @@
+
+1.0.0 (2012-10-29)
+
+ * Add executable for non-Rails projects
+ * Add visual grid
+ * Add `media` and `new-breakpoint` mixins
+ * Add `_neat-helpers.scss` as a public interface for Neat
+ * Fix bug in the `shift()` mixin for nested columns
+ * Remove typography mixins and settings
+
+0.4.2 (2012-08-31)
+
+ * Initial release
View
481 README.md
@@ -4,274 +4,429 @@
Learn more about Neat and why we built it [here](http://thoughtbot.com/neat/).
+Requirements
+===
+- Sass 3.2+
+- Bourbon 2.1+
-Getting started
+Non-Rails projects
===
+Install Neat:
-Requirements:
+```bash
+gem install neat
+```
+Then `cd` to your Sass directory and run:
+
+```bash
+bourbon install #If not installed
+neat install
+```
+
+In your main stylesheet:
+
+```sass
+@import "bourbon/bourbon";
+@import "neat/neat";
+```
+
+To update Neat, run:
+
+```bash
+neat update
+```
+
+and to remove it:
+
+```bash
+neat remove
+```
-- Sass 3.2+
-- Bourbon 2.1+
-Put the ```/neat``` folder in your Sass directory and import it right below Bourbon in your stylesheets:
- @import "bourbon/bourbon";
- @import "neat/neat";
+Rails apps
+===
+
+In your Gemfile:
+
+```bash
+gem 'neat'
+```
+
+After running `bundle install` you will be able to use Bourbon and Neat together.
+
+If you see this error `Bundler could not find compatible versions for gem "sass"` run:
+
+```bash
+bundle update sass
+```
+Within your `application.css.scss` file place the following:
+
+```sass
+@import "bourbon";
+@import "neat";
+```
Using the grid
===
-The default grid uses 12 columns (a setting that can be easily overridden as detailed further down).
+The default grid uses 12 columns, a setting that can be easily overridden as detailed [further down](https://github.com/thoughtbot/neat#changing-the-defaults).
### Containers
-Include the ```outer-container``` mixin in the topmost container (to which the ```max-width``` setting will be applied):
-
- div.container {
- @include outer-container;
- }
+Include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
+```scss
+div.container {
+ @include outer-container;
+}
+```
You can include this mixin in more than one element in the same page.
### Columns
-Use the ```span-columns``` mixin to specify the number of columns an element should span:
+Use the `span-columns` mixin to specify the number of columns an element should span:
- @include span-columns($span: $columns of $container-columns, $display: block)
+```scss
+@include span-columns($span: $columns of $container-columns, $display: block)
+```
- * ```columns``` is the number of columns you wish this element to span.
- * ```container-columns``` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
- * ```display``` (optional) changes the display type of the grid. Use ```block```—the default—for floated layout, ```table``` for table-cell layout, and ```inline-block``` for an inline block layout.
+ * `columns` is the number of columns you wish this element to span.
+ * `container-columns` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
+ * `display` (optional) changes the display type of the grid. Use `block`—the default—for floated layout, `table` for table-cell layout, and `inline-block` for an inline block layout.
eg. Element that spans across 6 columns (out of the default 12):
- div.element {
- @include span-columns(6);
- }
-
+```scss
+div.element {
+ @include span-columns(6);
+}
+```
If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
- div.container {
- @include outer-container;
-
- div.parent-element {
- @include span-columns(8);
-
- div.element {
- @include span-columns(6 of 8);
- }
- }
+```scss
+div.container {
+ @include outer-container;
+ div.parent-element {
+ @include span-columns(8);
+ div.element {
+ @include span-columns(6 of 8);
}
+ }
+}
+```
-To use a table-cell layout, add ```table``` as the ```display``` argument:
-
- @include span-columns(6 of 8, table)
+To use a table-cell layout, add `table` as the `display` argument:
+```scss
+@include span-columns(6 of 8, table)
+```
Likewise for inline-block:
- @include span-columns(6 of 8, inline-block)
+```scss
+@include span-columns(6 of 8, inline-block)
+```
The following syntaxes would also work:
- @include span-columns(6 / 8,inline-block);
- @include span-columns(6 8,inline-block);
-
+```scss
+@include span-columns(6 / 8,inline-block);
+@include span-columns(6 8,inline-block);
+```
### Rows
-In order to clear floated or table-cell columns, use the ```row``` mixin:
-
- @include row($display);
+In order to clear floated or table-cell columns, use the `row` mixin:
- * ```display``` takes either ```block```—the default—or ```table```.
+```scss
+@include row($display);
+```
+ * `display` takes either `block`—the default—or `table`.
### Shifting columns
+To move an element to the left or right by a number of columns, use the `shift` mixin:
-To move an element to the left or right by a number of columns, use the ```shift``` mixin:
-
- @include shift(2); // Move 2 columns to the right
- @include shift(-3); // Move 3 columns to the left
-
-Please note that the ```shift()``` mixin is incompatible with display ```table```.
+```scss
+@include shift(2); // Move 2 columns to the right
+@include shift(-3); // Move 3 columns to the left
+```
+Please note that the `shift()` mixin is incompatible with display `table`.
### Padding columns
-To add padding around the entire column use ```pad()```. By default it adds the same value as the grid's gutter but can take any unit value.
+To add padding around the entire column use `pad()`. By default it adds the same value as the grid's gutter but can take any unit value.
- @include pad; // Adds a padding equivalent to the grid's gutter
- @extend pad(20px); // Adds a padding of 20px
+```scss
+@include pad; // Adds a padding equivalent to the grid's gutter
+@include pad(20px); // Adds a padding of 20px
+```
-The ```pad()``` mixin works particularly well with ```span-columns(x, y, table)``` by adding the necessary padding without breaking your table-based grid layout.
+The `pad()` mixin works particularly well with `span-columns(x, table)` by adding the necessary padding without breaking your table-based grid layout.
### Removing gutter
-Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the ```omega``` mixin to achieve this:
+Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the `omega` mixin to achieve this:
- @include omega; // Removes right gutter
+```scss
+@include omega; // Removes right gutter
+```
-You can also use ```nth-omega``` to remove the gutter of a specific column or set of columns:
+You can also use `nth-omega` to remove the gutter of a specific column or set of columns:
- @include nth-omega(nth-child);
+```scss
+@include nth-omega(nth-child);
+```
- * ```nth-child``` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
+ * `nth-child` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
eg. Remove every 3rd gutter using:
- @include nth-omega(3n);
+```scss
+@include nth-omega(3n);
+```
### Filling parent elements
This makes sure that the child fills 100% of its parent:
- @include fill-parent;
+```scss
+@include fill-parent;
+```
-### Breakpoints
+### Media Queries
-The ```breakpoint()``` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
+The `media()` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
- @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
+```scss
+@include media($query, $total-columns: $grid-columns)
+```
-* ```query``` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, ```min-width``` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
-* ```total-columns``` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the ```span-column``` mixin.
+* `query` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, `min-width` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
+* `total-columns` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the `span-column` mixin.
##### Example 1
- .my-class {
- @include breakpoint(481px) {
- font-size: 1.2em;
- }
- }
+```scss
+.my-class {
+ @include media(481px) {
+ font-size: 1.2em;
+ }
+}
- // Compiled CSS
+// Compiled CSS
- @media screen and (min-width: 481px) {
- .my-class {
- font-size: 1.2em;
- }
- }
+@media screen and (min-width: 481px) {
+ .my-class {
+ font-size: 1.2em;
+ }
+}
+```
##### Example 2
- .my-class {
- @include breakpoint(max-width 769px) {
- float: none;
- }
- }
+```scss
+.my-class {
+ @include media(max-width 769px) {
+ float: none;
+ }
+}
- // Compiled CSS
+// Compiled CSS
- @media screen and (max-width: 769px) {
- .my-class {
- float: none;
- }
- }
+@media screen and (max-width: 769px) {
+ .my-class {
+ float: none;
+ }
+}
+```
##### Example 3
- .my-class {
- @include breakpoint(max-width 769px) {
- @include span-columns(6);
- }
- }
-
- // Compiled CSS
-
- @media screen and (max-width: 769px) {
- .my-class {
- display: block;
- float: left;
- margin-right: 2.35765%;
- width: 48.82117%; // That's 6 columns of the total 12
- }
-
- .my-class:last-child {
- margin-right: 0;
- }
- }
+```scss
+.my-class {
+ @include media(max-width 769px) {
+ @include span-columns(6);
+ }
+}
+
+// Compiled CSS
+
+@media screen and (max-width: 769px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 2.35765%;
+ width: 48.82117%; // That's 6 columns of the total 12
+ }
+
+ .my-class:last-child {
+ margin-right: 0;
+ }
+}
+```
##### Example 4
- .my-class {
- @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
- @include span-columns(6);
- }
- }
+```scss
+.my-class {
+ @include media(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
+ @include span-columns(6);
+ }
+}
+
+// Compiled CSS
+
+@media screen and (max-width: 769px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 4.82916%;
+ width: 100%; // That's 6 columns of the total 6 specified for this media query
+ }
+ .my-class:last-child {
+ margin-right: 0;
+ }
+}
+```
+
+##### Example 5
+
+```scss
+.my-class {
+ @include media(min-width 320px max-width 480px) {
+ font-size: 1.2em;
+ }
+}
+
+// Compiled CSS
+
+@media screen and (min-width: 320px) and (max-width: 480px) {
+ .my-class {
+ font-size: 1.2em;
+ }
+}
+```
+
+You can also use two ```@media``` features at the same time.
+
+Here is a summary of possible argument combinations:
+
+```scss
+// YAY
+@include media(480px);
+@include media(max-width 480px);
+@include media(min-width 320px max-width 480px);
+@include media(480px, 4);
+@include media(max-width 480px, 4);
+@include media(min-width 320px max-width 480px, 4);
+@include media(max-width 480px 4); // Shorthand syntax
+@include media(min-width 320px max-width 480px 4); // Shorthand syntax
+
+// NAY
+@include media(480px 4);
+@include media(max-width 4);
+@include media(max-width, 4);
+@include media(320px max-width 480px);
+```
+
+For convenience, you can create a new media context (breakpoint/column-count) with the help of the `new-breakpoint` mixin and use it throughout your code:
+
+```scss
+$mobile: new-breakpoint(max-width 480px 4); // Use a 4 column grid in mobile devices
+
+.my-class {
+ @include media($mobile) {
+ @include span-columns(2);
+ }
+}
+
+// Compiled CSS
+
+@media screen and (max-width: 480px) {
+ .my-class {
+ display: block;
+ float: left;
+ margin-right: 7.42297%;
+ width: 46.28851%; // 2 columns of the total 4 in this media context
+ }
+ .my-class:last-child {
+ margin-right: 0;
+ }
+}
+```
+
+The `new-breakpoint` takes the same arguments as `media`.
+
+### Helpers
+
+- The `em($pxval, $base: 16)` function takes a pixel value and returns its equivalent in *em* units. You can change the base pixel size in the second argument.
+
+### Visual grid
+
+By setting `$visual-grid` to `true`, you can display the base grid in the background (default) or as an overlay. You can even change the color and opacity of the gridlines by overriding the default settings as detailed in the section below. Keep in mind that on Webkit, rounding errors in the fluid grid might result in the overlay being few pixels off.
+
+The visual grid reflects the changes applied to the grid via the `new-breakpoint()` mixin.
- // Compiled CSS
-
- @media screen and (max-width: 769px) {
- .my-class {
- display: block;
- float: left;
- margin-right: 4.82916%;
- width: 100%; // That's 6 columns of the total 6 specified for this media query
- }
- .my-class:last-child {
- margin-right: 0;
- }
- }
+### Changing the defaults
-For convenience, you can create a list variable to hold your media context (breakpoint/column-count) and use it throughout your code:
+All the default settings in Neat can be overridden in your stylesheets. The only thing you need to keep in mind is that these overrides should occur *before* importing Neat (failing to do so will cause the framework to use the default values):
- $mobile: max-width 480px 4; // Use a 4 column grid in mobile devices (requires all three arguments to work)
+```scss
+@import "bourbon"; // or "bourbon/bourbon" when not in Rails
+@import "my-neat-overrides";
+@import "neat"; // or "neat/neat" when not in Rails
+```
+You need also to import `neat-helpers` (or `near/neat-helpers` in non-Rails projects) in your stylehseet (`_my-neat-overrides.scss` in the xample above) if you want to use helper mixins and functions such as `new-breakpoint()` and `em()`:
- .my-class {
- @include breakpoint($mobile) {
- @include span-columns(2);
- }
- }
+```scss
+@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
- // Compiled CSS
-
- @media screen and (max-width: 480px) {
- .my-class {
- display: block;
- float: left;
- margin-right: 7.42297%;
- width: 46.28851%; // 2 columns of the total 4 in this media context
- }
- .my-class:last-child {
- margin-right: 0;
- }
- }
+$column: 90px;
+$grid-columns: 10;
+$mobile: new-breakpoint(max-width 480px 4); // Failing to import neat-helpers will cause this line to throw an error
+```
-Here is a summary of possible argument combinations:
+Here is the list of the available settings:
- // YAY
- @include breakpoint(480px);
- @include breakpoint(max-width 480px);
- @include breakpoint(480px, 4);
- @include breakpoint(max-width 480px, 4);
- @include breakpoint(max-width 480px 4); // Shorthand syntax
+#### Grid settings
- // NAY
- @include breakpoint(480px 4);
- @include breakpoint(max-width 4);
- @include breakpoint(max-width, 4);
+- `$column`: The width of a single column in `px` or `em`.
+- `$gutter`: Space between each two columns in `px` or `em`.
+- `$grid-columns`: Total number of columns in the base grid. Defaults to 12.
+- `$max-width`: The maximum width of the outer container in `px` or `em`.
+#### Visual grid settings
-### Changing the defaults
+- `$visual-grid`: Show the base grid. Defaults to `false`.
+- `$visual-grid-color`: Visual grid color. Defaults to `#EEEEEE`.
+- `$visual-grid-index`: If set to `front`, the grid is overlaid on the content.
+- `$visual-grid-opacity`: Visual grid opacity.
-All the default settings can be overridden, including ```$grid-columns``` and ```$max-width```. The complete list of settings can be found in the ```/settings``` subfolder. In order to override any of these settings, redefine the variable in your site-wide ```_variables.scss``` and make sure to import it *before* Neat (failing to do so will cause Neat to use the default values):
+#### Other settings
- @import "bourbon/bourbon";
- @import "variables";
- @import "neat/neat";
+- `$border-box-sizing`: Makes all elements have a `border-box` layout. Defaults to `true`.
+- `$default-feature`: Default `@media` feature for the `breakpoint()` mixin. Defaults to `min-width`.
+### Browser support
+- Firefox 3.5+
+- Safari 4.0+
+- Chrome 4.0+
+- Opera 9.5+
+- IE 9+ (Visual grid is IE10 only)
+- IE 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
Credits
===
![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
-Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [Kyle](https://twitter.com/kylefiedler) / [Reda](https://twitter.com/kaishin).
+Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [@kaishin](https://twitter.com/kaishin) and [@kylefiedler](https://twitter.com/kylefiedler).
License
===
Bourbon Neat is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
-
View
2  Rakefile
@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
View
18 _neat.scss
@@ -1,18 +0,0 @@
-// Bourbon Neat 0.9 beta
-// MIT Licensed
-// Copyright (c) 2011 thoughtbot, inc.
-
-// Custom Functions
-@import "functions/line-height";
-@import "functions/px-to-em";
-@import "functions/grid";
-
-// Default Settings
-@import "settings/grid";
-@import "settings/typography";
-
-// The Grid
-@import "grid/grid";
-
-// Typography
-@import "typography/typography";
View
2  app/assets/stylesheets/_neat-helpers.scss
@@ -0,0 +1,2 @@
+@import "settings/default";
+@import "functions/helpers";
View
10 app/assets/stylesheets/_neat.scss
@@ -0,0 +1,10 @@
+// Bourbon Neat 0.9 beta
+// MIT Licensed
+// Copyright (c) 2011 thoughtbot, inc.
+
+@import "functions/private";
+@import "functions/helpers";
+@import "settings/default";
+@import "grid/global-variables";
+@import "grid/grid";
+@import "grid/visual-grid";
View
2  app/assets/stylesheets/functions/_helpers.scss
@@ -0,0 +1,2 @@
+@import "helpers/new-breakpoint";
+@import "helpers/px-to-em";
View
63 app/assets/stylesheets/functions/_private.scss
@@ -0,0 +1,63 @@
+// Checks if a number is even
+@function is-even($int) {
+ @if $int%2 == 0 {
+ @return true;
+ }
+
+ @return false;
+}
+
+// Checks if an element belongs to a list
+@function belongs-to($tested-item, $list) {
+ @each $item in $list {
+ @if $item == $tested-item {
+ @return true;
+ }
+ }
+
+ @return false;
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+ @if length($span) == 3 {
+ $container-columns: nth($span, 3);
+ @return $container-columns;
+ }
+
+ @else if length($span) == 2 {
+ $container-columns: nth($span, 2);
+ @return $container-columns;
+ }
+
+ @else {
+ @return $grid-columns;
+ }
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+ $transparent: rgba(0,0,0,0);
+
+ $column-width: flex-grid(1, $grid-columns);
+ $gutter-width: flex-gutter($grid-columns);
+ $column-offset: $column-width;
+
+ $values: ($transparent 0, $color 0);
+
+ @for $i from 1 to $grid-columns*2 {
+ @if is-even($i) {
+ $values: append($values, $transparent $column-offset);
+ $values: append($values, $color $column-offset);
+ $column-offset: $column-offset + $column-width;
+ }
+
+ @else {
+ $values: append($values, $color $column-offset);
+ $values: append($values, $transparent $column-offset);
+ $column-offset: $column-offset + $gutter-width;
+ }
+ }
+
+ @return $values;
+}
View
18 app/assets/stylesheets/functions/helpers/_new-breakpoint.scss
@@ -0,0 +1,18 @@
+@import "../private";
+
+@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+ @if length($query) == 1 {
+ $query: $default-feature nth($query, 1) $total-columns;
+ }
+
+ @else if length($query) == 2 or length($query) == 4 {
+ $query: append($query, $total-columns);
+ }
+
+ @if not belongs-to($query, $visual-grid-breakpoints) {
+ $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+ }
+
+ @return $query;
+}
View
0  functions/_px-to-em.scss → ...sets/stylesheets/functions/helpers/_px-to-em.scss
File renamed without changes
View
1  app/assets/stylesheets/grid/_global-variables.scss
@@ -0,0 +1 @@
+$parent-columns: $grid-columns !default;
View
85 grid/_grid.scss → app/assets/stylesheets/grid/_grid.scss
@@ -26,6 +26,14 @@ $fg-max-width: $max-width;
$columns: nth($span, 1);
$container-columns: container-span($span);
+ @if $container-columns != $grid-columns {
+ $parent-columns: $container-columns;
+ }
+
+ @else {
+ $parent-columns: $grid-columns;
+ }
+
@if $display == table {
display: table-cell;
padding-right: flex-gutter($container-columns);
@@ -72,7 +80,7 @@ $fg-max-width: $max-width;
// Shift
@mixin shift($n-columns: 1) {
- margin-left: $n-columns * flex-grid(1) + $n-columns * flex-gutter();
+ margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
}
@@ -115,8 +123,8 @@ $fg-max-width: $max-width;
}
}
-// Breakpoints
-@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+// Media Queries
+@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
@@ -145,8 +153,79 @@ $fg-max-width: $max-width;
}
}
+ @else if length($query) == 4 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 5 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 5);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
@else {
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
}
}
+// Legacy Mixins
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+ @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
+
+ @if length($query) == 1 {
+ @media screen and ($default-feature: nth($query, 1)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 2 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 3 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 3);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 4 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 5 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 5);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else {
+ @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+ }
+}
View
40 app/assets/stylesheets/grid/_visual-grid.scss
@@ -0,0 +1,40 @@
+@mixin grid-column-gradient($values...) {
+ background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+ background-image: -webkit-linear-gradient(left, $values);
+ background-image: -moz-linear-gradient(left, $values);
+ background-image: -ms-linear-gradient(left, $values);
+ background-image: -o-linear-gradient(left, $values);
+ background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@if $visual-grid == true {
+ body:before {
+ content: '';
+ display: inline-block;
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ height: 100%;
+ left: 0;
+ margin: 0 auto;
+ max-width: $max-width;
+ opacity: $visual-grid-opacity;
+ position: fixed;
+ right: 0;
+ width: 100%;
+
+ @if $visual-grid-index == back {
+ z-index: -1;
+ }
+
+ @else if $visual-grid-index == front {
+ z-index: 9999;
+ }
+
+ @each $breakpoint in $visual-grid-breakpoints {
+ @if $breakpoint != nil {
+ @include media($breakpoint) {
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ }
+ }
+ }
+ }
+}
View
2  app/assets/stylesheets/settings/_default.scss
@@ -0,0 +1,2 @@
+@import "default/grid";
+@import "default/visual-grid";
View
6 app/assets/stylesheets/settings/default/_grid.scss
@@ -0,0 +1,6 @@
+$column: golden-ratio(1em, 3) !default; // Column width
+$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
+$grid-columns: 12 !default; // Total number of columns in the grid
+$max-width: em(1088) !default; // Max-width of the outer container
+$border-box-sizing: true !default; // Makes all elements have a border-box layout
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin
View
5 app/assets/stylesheets/settings/default/_visual-grid.scss
@@ -0,0 +1,5 @@
+$visual-grid: false !default; // Display the base grid
+$visual-grid-color: #EEE !default;
+$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
+$visual-grid-opacity: 0.4 !default;
+$visual-grid-breakpoints: nil !default;
View
5 bin/neat
@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+require "neat"
+
+Neat::Generator.new(ARGV).run
View
15 functions/_grid.scss
@@ -1,15 +0,0 @@
-@function container-span($span: $span) {
- @if length($span) == 3 {
- $container-columns: nth($span, 3);
- @return $container-columns;
- }
-
- @else if length($span) == 2 {
- $container-columns: nth($span, 2);
- @return $container-columns;
- }
-
- @else {
- @return $grid-columns;
- }
-}
View
0  functions/_line-height.scss
No changes.
View
17 lib/neat.rb
@@ -0,0 +1,17 @@
+require "neat/generator"
+
+module Neat
+ if defined?(Rails) && defined?(Rails::Engine)
+ class Engine < ::Rails::Engine
+ require 'neat/engine'
+ end
+
+ module Rails
+ class Railtie < ::Rails::Railtie
+ rake_tasks do
+ load "tasks/install.rake"
+ end
+ end
+ end
+ end
+end
View
5 lib/neat/engine.rb
@@ -0,0 +1,5 @@
+module Neat
+ class Engine < Rails::Engine
+ # auto wire
+ end
+end
View
74 lib/neat/generator.rb
@@ -0,0 +1,74 @@
+require "fileutils"
+
+module Neat
+ class Generator
+ def initialize(arguments)
+ @subcommand = arguments.first
+ end
+
+ def run
+ if @subcommand == "install"
+ install
+ elsif @subcommand == "update"
+ update
+ elsif @subcommand == "remove"
+ remove
+ end
+ end
+
+ def update
+ if neat_files_already_exist?
+ remove_neat_directory
+ install_files
+ puts "Neat files updated."
+ else
+ puts "No existing neat installation. Doing nothing."
+ end
+ end
+
+ def install
+ if neat_files_already_exist?
+ puts "Neat files already installed, doing nothing."
+ else
+ install_files
+ puts "Neat files installed to neat/"
+ end
+ end
+
+ def remove
+ if neat_files_already_exist?
+ remove_neat_directory
+ puts "Neat was successfully removed."
+ else
+ puts "No existing neat installation. Doing nothing."
+ end
+ end
+
+ private
+
+ def neat_files_already_exist?
+ File.directory?("neat")
+ end
+
+ def install_files
+ FileUtils.mkdir_p("neat")
+ FileUtils.cp_r(all_stylesheets, "neat/")
+ end
+
+ def remove_neat_directory
+ FileUtils.rm_rf("neat")
+ end
+
+ def all_stylesheets
+ Dir["#{stylesheets_directory}/*"]
+ end
+
+ def stylesheets_directory
+ File.join(top_level_directory, "app", "assets", "stylesheets")
+ end
+
+ def top_level_directory
+ File.dirname(File.dirname(File.dirname(__FILE__)))
+ end
+ end
+end
View
3  lib/neat/version.rb
@@ -0,0 +1,3 @@
+module Neat
+ VERSION = '1.0.0'
+end
View
23 lib/tasks/install.rake
@@ -0,0 +1,23 @@
+# Needed for pre-3.1.
+
+require "fileutils"
+require "find"
+
+namespace :bourbon do
+ namespace :neat do
+ desc "Copy Neat's files to the Rails assets directory."
+ task :install, [:sass_path] do |t, args|
+ args.with_defaults(:sass_path => 'public/stylesheets/sass')
+ source_root = File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
+ FileUtils.mkdir_p("#{Rails.root}/#{args.sass_path}/neat")
+ FileUtils.cp_r("#{source_root}/app/assets/stylesheets/.", "#{Rails.root}/#{args.sass_path}/neat", { :preserve => true })
+
+ Find.find("#{Rails.root}/#{args.sass_path}/neat") do |path|
+ if path.end_with?(".css.scss")
+ path_without_css_extension = path.gsub(/\.css\.scss$/, ".scss")
+ FileUtils.mv(path, path_without_css_extension)
+ end
+ end
+ end
+ end
+end
View
29 neat.gemspec
@@ -0,0 +1,29 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path('../lib', __FILE__)
+require 'neat/version'
+
+Gem::Specification.new do |s|
+ s.name = "neat"
+ s.version = Neat::VERSION
+ s.platform = Gem::Platform::RUBY
+ s.authors = ["Kyle Fiedler", "Reda Lemeden", "Joel Oliveira"]
+ s.email = ["support@thoughtbot.com"]
+ s.homepage = "https://github.com/thoughtbot/neat"
+ s.summary = "A fluid grid framework on top of Bourbon"
+ s.description = <<-DESC
+Neat is an open source grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
+ DESC
+
+ s.rubyforge_project = "neat"
+
+ s.files = `git ls-files`.split("\n")
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+ s.require_paths = ["lib"]
+
+ s.add_dependency('sass', '>= 3.2')
+ s.add_dependency('bourbon', '>= 2.1')
+
+ s.add_development_dependency('aruba', '~> 0.4')
+ s.add_development_dependency('rake')
+end
View
6 settings/_grid.scss
@@ -1,6 +0,0 @@
-$column: golden-ratio(1em, 3) !default;
-$gutter: golden-ratio(1em, 1) !default;
-$grid-columns: 12 !default;
-$max-width: golden-ratio(1em, 9) !default;
-$border-box-sizing: true !default; // Makes all elements have border-box layout
-$default-feature: min-width;
View
3  settings/_typography.scss
@@ -1,3 +0,0 @@
-$body-font-size: 1em !default;
-$body-line-height: golden-ratio(1em, 1) !default;
-$body-font-family: $helvetica !default;
View
4 typography/_typography.scss
@@ -1,4 +0,0 @@
-body {
- font: $body-font-size $body-font-family;
- line-height: $body-line-height;
-}
Something went wrong with that request. Please try again.