diff --git a/CONTRIBUTING.md b/.github/CONTRIBUTING.md similarity index 58% rename from CONTRIBUTING.md rename to .github/CONTRIBUTING.md index b38c2cf9..5dae8680 100644 --- a/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -9,25 +9,25 @@ We welcome all contribution from the community, but we have a few guidelines to ### Getting Jeet set up locally 1. [Fork Jeet](https://github.com/mojotech/jeet/fork). -1. `git clone https://github.com/YOUR-USERNAME/jeet` to get a local copy of your fork. +1. `git clone` YOUR fork of Jeet to get a local copy. 1. Run `git remote add upstream https://github.com/mojotech/jeet`. This will add another remote, named upstream, that points to the official Jeet repository. This will help with keeping your forks up to date with Jeet's master branch. ### Making changes -1. Create a new branch following [Git Flow](http://nvie.com/posts/a-successful-git-branching-model/) -1. Checkout your new branch and commit your changes. Separate edits into [clean](https://github.com/erlang/otp/wiki/Writing-good-commit-messages), non-breaking, commits. +1. Create a new branch using `git checkout -b my-new-branch`. +1. Do some work, commit some changes. Separate edits into [clean](https://github.com/erlang/otp/wiki/Writing-good-commit-messages), non-breaking, commits, if possible. At the very least, *try* to separate out your work into logical chunks. Removing trailing whitespace throughout the project? Good commit. Removing whitespace **and** changing indentation? Bad commit. Typically if you can say "and" it can be broken out into separate commits. +1. Try not to submit a HUGE PR. Small PRs are best for everyone. Good for maintainers because they don't have to dig through 50-million lines of code to ensure everything is proper. Good for you so you don't do a ton of work just to get it rejected. :( ### Tests -1. Making big changes or adding a new feature entirely? Make sure you add tests for new mixins/functions. Simply follow the structure found in `/tests`. -1. Run the tests with `npm run test` and make sure they all pass. -1. Fork the [Scss](http://codepen.io/corysimmons/pen/EkcDm) and [Stylus](http://codepen.io/corysimmons/pen/ArLdm) CodePens and make sure the changes behave as expected. +1. Making big changes or adding a new feature entirely? Make sure you add tests for new mixins/functions. If you're not good at writing tests, a maintainer can work with you. +1. Run the tests with `npm test` and make sure they all pass. ### Opening a pull request 1. Push your changes to your fork by running `git push origin your-branch-name`. -1. Open a [pull request](https://help.github.com/articles/creating-a-pull-request), give it a clear title and explain what your changes do. Provide a link to your CodePen so we can check out the changes. -1. Be prepared to update your PR based on feedback. If you make updates, run `git push origin your-branch-name -f` on your branch branch to update the PR on Github. +1. Open a [pull request](https://help.github.com/articles/creating-a-pull-request), give it a clear title and explain what your changes do. +1. Be prepared to update your PR based on feedback. If you make updates, run `git push origin your-branch-name -f` on your branch branch to update the same PR you received feedback on. 1. Bask in the warm glow of being an amazing person. ### Keeping unmerged forks up to date with master @@ -36,6 +36,8 @@ If your fork is taking a while to get merged, you might end up getting behind Je 1. `git fetch upstream master` This will give you all the latest updates from Jeet's master branch. 1. Run `git rebase upstream/master` while inside your feature branch. This will add all the new commits **before** yours, so it's as if you made the changes to the latest codebase. +1. There might be merge conflicts. In which case, open them in an editor then pick and choose what changes to keep. ## Notes + - New to Git? Read this great/free [book](http://git-scm.com/documentation). diff --git a/.gitignore b/.gitignore index 306f1a94..0ff8e63d 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,7 @@ Icon # Files that might appear on external disk .Spotlight-V100 .Trashes + + +### Custom ### +todo.md diff --git a/.npmignore b/.npmignore deleted file mode 100644 index e15428c9..00000000 --- a/.npmignore +++ /dev/null @@ -1,8 +0,0 @@ -.editorconfig -/tests -/scss/README.md -/stylus/README.md -CHANGELOG.md -CONTRIBUTING.md -LICENSE -README.md diff --git a/.travis.yml b/.travis.yml index 6e5919de..e01b8571 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - - "0.10" + - "6.6.0" diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 1198af73..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,153 +0,0 @@ -### 6.1.2 -- Fixes - - Critical bug in Scss port that caused nested columns to have incorrect gutters. - - `column-width()` and `column-gutter()` no longer ignore column nesting. - -### 6.1.1 -- Fixes - - By adding `cycle`/`uncycle` to `span` we are now able to clear floated elements so unequal height columns display as expected. - -### 6.1.0 -- Enhancements - - Add `important` parameter to `edit()` mixin - - Defaults to `false`. When set to `true` it adds the `!important` flag to the CSS to force elements with backgrounds already set to show the debug grid. - -### 6.0.0 -- Enhancements - - Scss and Stylus version now output identical CSS - - Add fully comprehensive inline documentation - - All API functions namespaced with `jeet-` - - All settings variables are now `!default` values so they can be overidden - - Move `$width` to `_settings` for easier modification - - Add uncenter mixin - - Add alias for 'edit()' mixin (`debug()`) and add color parameter - - Add `column-width()` and `column-gutter()` functions - - Add tests for all API methods - - Add a 3.3 enhanced version of the 'jeet-reverse()' function - - Remove padding from `span()` and `column()` mixins -- Fixes - - Algorithm for reversing list - - Spelling errors - - Remove the cycle and uncycle parameters from span -- Breaking changes - - Remove IE7 support for edit - - Remove prefixing from jeet. Please use something like [autoprefixer](https://github.com/postcss/autoprefixer) for adding vendor prefixes - -### 5.3.0 -- Enhancements - - Drop support for IE6 to clean some bloat - -### 5.2.11 -- Fix - - Repair `cycle`/`uncycle` - -### 5.2.10 -- Fix - - Un-npmignore-ing .gitignore so the npm package can read the gitignore data - -### 5.2.9 -- Fix - - Remove site stuff from npm package - -### 5.2.8 -- Bugfix - - Fix `align` so it doesn't make items blurry by adding `transform-style: preserve-3d` to it - -### 5.2.7 -- Enhancements - - Revert SCSS global variables to normal SCSS variables since maps have really poor support unless you're on a recent version of SCSS (which most people aren't). - -### 5.2.6 -- Enhancements - - Add Stylus as dependency of Jeet so it auto-installs - -### 5.2.5 -- Bugfix - - You can't extend placeholders within media queries in any pre-processor so when people were trying to use `col()`, `span()`, or `center()` (all of which made use of a clearfix placeholder) they weren't actually getting clearfixed. This fixes that bug by turning the placeholder into a mixin. This is a slightly breaking change but not big enough to warrant a major release. - -### 5.1.5 -- Bugfix - - Stylus block level mixins break when `display: block` occurs within one. By using `unquote` we're able to apply a temporary bugfix until Stylus and other libraries are repaired. - -### 5.1.4 -- Core - - Convert namespace from `jeet-` to hash maps for Stylus and SCSS -- Migration Strategy - - Update Stylus and SCSS global variable references from `jeet-` to `jeet.`, and `$jeet-` to `jeet(...)` respectively. - -### 5.1.3 -- Core - - Add SCSS port - - Migrate preprocessor ports to own folders - -### 5.0.2 -- Core - - Update Jeet to stop being implicitly loaded as this breaks the ability to override settings. - - Update README for a more thorough quick start guide. - -### 5.0.1 -- Core - - Add custom gutter sizing relative to containing unit. - -### 5.0.0 -- Core - - Jeet 5 is the final step in making Jeet a perfectly modular Stylus component to be used anywhere libs such as [nib](https://github.com/visionmedia/nib) and [Axis](https://github.com/jenius/axis) are accepted. It pulls a lot of extra stuff out and turns Jeet exclusively into the finest Stylus grid system available. - - Drop typography - - Drop colors - - Drop `bp()` - - Namespace things - - Add testing - - Add Travis CI - - Add David DM - - Package for Yeoman and Bower - - Add placeholders where appropriate - - 2 space indents rather than 4 - - Replace snake_case with dash-case for namespaced variables. We're talking CSS here. What are we, animals?! -- Breaking Changes - - By dropping typography, sites that use Jeet's typography system will no longer have typography - - By dropping colors, sites that were making use of these variables in `_settings.styl` will no longer have them defined - - By dropping `bp()`, sites that used `bp()` will now not be responsive -- Migration strategy - - Jeet's typography will be exported to the [Typographic](https://github.com/corysimmons/typographic) npm package, so just include that lib when compiling - - Copy/paste your color variables to anywhere they'll be compiled before they're used - - Include the [Rupture](https://github.com/jenius/rupture) lib and replace occurrences of the `bp()` mixin with Rupture equivalents - -### 4.1.0 -- Core - - Remove Autoprefixer integration so Jeet is primarily a collection of .styl files. While trying to port Jeet to a plethora of applications, I noticed it most of these applications that claimed to have Stylus support were expecting pure Stylus libraries - not a script that performed any other actions. Most of these applications (Roots, Grunt, Ruby) were based around integrating libraries in the [nib](https://github.com/visionmedia/nib). - - Prefixed partials with underscore for consistency across ports. Doesn't break the API. -- Breaking Changes - - By removing Autoprefixer integration 4.0.x projects that were relying on Autoprefixer for non-Jeet elements (e.g. `transform: rotate(90deg)`) will need to be prefixed. -- Migration Strategy - - The easiest migration would be to use Jeet in unison with some other prefixing library (like nib). This will heavy-handily do vendor prefixing (add vendor prefixing to everything as opposed to just the prefixes required) but should work fairly seamlessly via `stylus -u jeet nib -w` - - For a cleaner, better, migration, try to get Autoprefixer in your project's pipeline some other way. We'll keep adding pipelines to do this for things like pure HTML (Grunt), Rails, Node, Roots, etc. but if you end up figuring out a nice way, feel free to contribute or drop us a link and we'll add it to the README. - - Hand prefix partials with underscores in `jeet/` and `jeet/index.styl` -- Bug Fixes - - Update index.styl quick reference to be accurate to API - -### 4.0.2 -- Bug Fixes - - Version lock autoprefixer-stylus -- Enhancements - - Version lock stylus - -### 4.0.1 -- Bug Fixes - - bp(w = 705px) to bp(w = breakpoint) to inherit settings.styl breakpoint setting - - Remove align() block duplication in utilities.styl - -### 4.0.0 -- Core - - Remove watcher (use [Roots](http://roots.cx)) - - Remove template (use [jeet-roots](https://github.com/mojotech/jeet-roots)) which included [these files](https://github.com/mojotech/jeet/commit/153560d04b7eac25f4afe71ca2e233a54988823b) - - Convert to Stylus library only - - Update package.json to reflect npm distribution of Jeet -- Enhancements - - Make center() padding default to 0 - - Add colons to separate prop: val - - Prefix private functions with hyphens -- Breaking Changes - - Jeet 3's npm package (`jeet create`, `jeet watch`) will no longer work with this version. For that kind of functionality, it's recommended you use [Roots](http://roots.cx) in combination with our polyfilled [jeet-roots](https://github.com/mojotech/jeet-roots) template. Visit [the repo](https://github.com/mojotech/jeet-roots) for installation/usage instructions. -- Migration Strategy - - Since most of the Stylus is identical to 3.5.0, functions won't change (for instance `col(1/3)` won't suddenly do something weird). After upgrading your npm package (`npm install -g jeet`) you can navigate to your Jeet 3 projects, `cd` to your `css/` dir, and run `stylus -u jeet -w` to use the same Jeet library and edit away. Effectively 4.0.0 drops support for `jeet create`/`jeet watch` in favor of making Jeet a more modular Stylus library you can plug into almost any project. - - If you really enjoyed the `watch` command, LiveReload, and all that nice stuff, you should really install [Roots](http://roots.cx) (`npm install -g roots`), add our [jeet-roots](https://github.com/mojotech/jeet-roots) repo as a [Roots template](roots.cx/docs/#templates) (it's easy), and run `roots watch`. Boom! All kinds of language support/compilation, LiveReload, and some amazing deployment methods to Heroku or Nodejitsu. diff --git a/LICENSE b/LICENSE index ded1bc28..4ff3de6a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 MojoTech +Copyright (c) 2016 MojoTech Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in @@ -17,4 +17,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index eba7dfbe..2a00a613 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,37 @@ -

- -

+ -

- - - - -

+ + + -# This is a rollback to 6.1.2! +[Jeet](http://jeet.gs) is a simple fractional grid system for **[Sass](scss)** and **[Stylus](styl)**. -> ❗️ Jeet 6.1.3 and 6.1.4 introduced breaking changes that have caused a lot of issues. This is a rollback to 6.1.2. Moving forward, we will strictly adhere to semver and apologize for any broken builds. 🤕 Thanks for sticking with us as we grow! +Learn the [API](docs) in minutes and begin tossing together grids. ---- +Check this out: -[Jeet](http://jeet.gs) is the most advanced, yet intuitive, grid system on the market today. +```fish +npm install -D jeet +``` -By making use of the power of pre-processors, we can now pass real fractions (or float numbers) as context that generates a percentage based width and gutter for grids. We're able to do this while maintaining a consistently sized infinitely nestable gutter. +```scss +@import 'node_modules/jeet/scss/index'; -Check out [this presentation](http://corysimmons.github.io/presentations/the-rise-of-ratio-grids) to learn more about what sets Jeet above other grid systems, then enjoy one of Jeet's many pre-processor flavors: +.container { + @include center(); +} -- [Stylus](stylus) -- [SCSS](scss) +.container div { + @include column(1/3); +} +``` -Want to sandbox it right this very second? Fork an [SCSS](http://bit.ly/jeet6-scss) or [Stylus](http://bit.ly/jeet6-stylus) example on CodePen. +Jeet functions accept fractions (or float numbers) and generates a percentage width and gutter for grids. We're able to do this while maintaining a consistently-sized, infinitely-nestable, gutter (so long as you provide the parent element's fraction as context). -Explore [Jeet Integrations](https://github.com/mojotech/jeet/wiki/Jeet-Integrations) to see some community-backed plugins to your favorite frameworks and libraries. +The API is documented in Sass, but we've worked hard to make the API *very* similar in both preprocessors. `@include column(1/2);` in SCSS would be `column(1/2)` in Stylus, ya dig? -#### Browser Support -- IE9+ and all major browsers without polyfills like Selectivizr -- With a nice boilerplate like [Boy](http://github.com/corysimmons/boy), seamless and responsive in IE7+ ([gallery](http://imgur.com/a/Z0YPD)) - ---- +Explore [Official Integrations](docs/integrations) to see some community-backed plugins to your favorite frameworks and libraries. -##### Jeet is curated by loving hands at... - (psst, [we're hiring](http://www.mojotech.com/jobs)) +#### Browser Support -##### Thanks to all the [awesome contributors](https://github.com/mojotech/jeet/graphs/contributors) +- IE9+ without help. IE8+ with Selectivizr. Obviously always use Autoprefixer. diff --git a/bower.json b/bower.json deleted file mode 100644 index 07f29176..00000000 --- a/bower.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "jeet", - "version": "6.1.5", - "homepage": "http://jeet.gs", - "authors": [ - "Cory Simmons ", - "Sam Saccone ", - "Jake Cleary ", - "Andreas Nedbal " - ], - "description": "A grid system for humans.", - "main": [ - "stylus/jeet/index.styl", - "scss/jeet/index.scss" - ], - "keywords": [ - "grid", - "stylus", - "sass", - "scss", - "framework", - "ratio", - "fraction" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..3ad7ec48 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,7 @@ +# Jeet Docs + +Jeet is available in Sass and Stylus. Sass is more popular, so the docs are written solely in Sass. + +The API is *very* similar so if you're using Stylus you should be able to tell what's what. + +Officially maintained [integrations](integrations) are available. diff --git a/docs/api.md b/docs/api.md new file mode 100644 index 00000000..adfebe7a --- /dev/null +++ b/docs/api.md @@ -0,0 +1,65 @@ +# API + +### column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter')) + +Specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. + +Specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. `column(1/4, $offset: 1/4)` would create a column the quarter of the size of its container and push it to the right a quarter. + +Understanding `cycle` is important. Want to make a gallery but don't want to have a `
` every 4 pictures? `column(1/4, $cycle: 4)` - done. + +Want to change it up when you get down to mobile? Maybe just show 2 images per row? `column(1/2, $cycle: 2)` - done. + +Need to adjust column gutters for a specific container? `col(1/4, $gutter: .5)`. Note the gutter isn't a fixed width. + +### column-width($ratios: 1, $gutter: map-get($jeet, 'gutter')) + +A function to return strictly the column width with none of the styles. + +### column-gutter($ratios: 1, $gutter: map-get($jeet, 'gutter')) + +A function that returns the gutter size. + +### span($ratio: 1, $offset: 0, $cycle: 0) + +Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so with `span(1/5)`. No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that. + +### move($ratios: 0, $col-or-span: column, $gutter: map-get($jeet, 'gutter')) + +Source ordering works in Jeet by assigning `position: relative` and then a `left` offset equal to the ratio passed. + +You can specify if this is a column or span movement to include gutters or not. This works similar to `offset` in that it can accept negative values to shift the other direction. + +`move` can accept multiple context ratios to maintain perfect nested sizing. `move` also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements. + +### unmove() + +Accepts no values. `unmove()` is a great helper function to quickly disable whatever source ordering you've done to an element. + +### debug($color: blue, $important: false) + +Debug mode assigns a lightly translucent background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial. + +### center($max-width: map-get($jeet, 'max-width'), $pad: 0) + +This is a shortcut to easily center containers. The pad variable sets padding on the left and right. + +### uncenter() + +Resets styles associated with `center()`. + +### stack($pad: 0, $align: false) + +A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment. + +### unstack() + +Cancel that `stack()`. This won't revert back to your `column()` calls. For that, manually call your `column()` method again. + +### align($direction: both) + +Aligning blocks relative to their container (so their parent container needs `position: relative`) with `position: absolute` and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers. + +### clearfix() + +A simple/kinda-modern clearfix. Use this to wrap any set of `column()`s or `span()`s. If you need super-old browser support, you can create your own clearfix mixin (use the `clearfix` namespace) with stuff like `:before` and `*zoom: 1` (look up an old clearfix). diff --git a/docs/integrations/gulp.md b/docs/integrations/gulp.md new file mode 100644 index 00000000..861b228b --- /dev/null +++ b/docs/integrations/gulp.md @@ -0,0 +1,19 @@ +# Gulp + +- http://gulpjs.com +- https://github.com/stevelacy/gulp-stylus + +```js +// gulpfile.js +var gulp = require('gulp'); +var stylus = require('gulp-stylus'); +var jeet = require('jeet'); + +gulp.task('default', function() { + return gulp.src('./src/style.styl') + .pipe(stylus({ + use: jeet() + })) + .pipe(gulp.dest('./dist')); +}); +``` diff --git a/docs/integrations/node.md b/docs/integrations/node.md new file mode 100644 index 00000000..ada7bee1 --- /dev/null +++ b/docs/integrations/node.md @@ -0,0 +1,20 @@ +### Node.js + +- https://nodejs.org/en/docs/ +- http://stylus-lang.com/docs/js.html + +```js +// jeet-node.js +var fs = require('fs'); +var stylus = require('stylus'); +var jeet = require('jeet'); + +var code = fs.readFileSync('style.styl', 'utf8'); + +stylus(code) + .use(jeet()) + .render(function (err, css) { + if (err) throw err; + console.log(css) + }); +``` diff --git a/docs/sass.md b/docs/sass.md new file mode 100644 index 00000000..c7cb9cde --- /dev/null +++ b/docs/sass.md @@ -0,0 +1,62 @@ +# Jeet - Sass + +### Installation + +- Install Ruby [[Windows](http://rubyinstaller.org/), [Mac/Linux](https://github.com/sstephenson/rbenv)] +- `gem install sass` +- `npm install -D jeet` + +### Usage Example + +```fish +$ sass -w style.scss +``` + +```scss +// style.scss +@import 'node_modules/jeet/scss/index'; + +@include debug; + +section { + @include center; +} + +aside { + @include column(1/3); +} + +article { + @include column(2/3); +} +``` + +```html + + + + + +
+ +
Content
+
+ + +``` + +### Namespacing and Aliases + +Jeet doesn't namespace or alias by default anymore (to keep the API simple/clean). If you need namespacing or aliasing, you can wrap mixins within namespace/alias mixins. + +```scss +// Namespace Example +@mixin jeet-column($args...) { + @include column($args...); +} + +// Alias Example +@mixin col($args...) { + @include column($args...); +} +``` diff --git a/docs/settings.md b/docs/settings.md new file mode 100644 index 00000000..a6c0f553 --- /dev/null +++ b/docs/settings.md @@ -0,0 +1,52 @@ +# Settings + +Jeet's global settings are wrapped in a `$jeet` preprocessor map. + +```scss +$jeet: ( + gutter: 3, + max-width: 1440px, + layout-direction: LTR, + parent-first: false +); +``` + +These need overridden in your own `my-settings` file and imported after Jeet is imported -- but before you use Jeet's mixins. + +#### gutter: 3 + +The percentage of the page the root-level gutters take up. + +#### max-width: 1440px + +Used for `center()`'s `max-width`. + +### layout-direction: LTR + +Support for left-to-right, or right-to-left (`RTL`) text/layouts. + +### parent-first: false + +When assigning multiple ratio contexts to a `col()`, do you want to reference the outer most container first? Example: Let's assume we have a column set to `col(1/4)` that is nested inside of another column that is `col(1/3)` which is nested inside of another column that is `col(1/2)`. By default, to maintain consistently sized gutters (even when nesting), our inner-most column would look like `col(1/4 1/3 1/2)`. If we adjust this global variable to be `true`, our inner-most column could be written from a top-down perspective like so: `col(1/2 1/3 1/4)`. This is entirely a preference thing. Do you like stepping up or down? + +## Example Usage + +```scss +// my-settings.scss +$jeet: ( + gutter: 2, + max-width: 960px +); + +// style.scss +@import 'node_modules/jeet/scss/index'; +@import 'my-settings'; + +.container { + @include center; +} + +.container div { + @include column(1/3); +} +``` diff --git a/docs/stylus.md b/docs/stylus.md new file mode 100644 index 00000000..a5cf7744 --- /dev/null +++ b/docs/stylus.md @@ -0,0 +1,56 @@ +# Jeet - Stylus + +### Installation + +- Install [NodeJS](http://nodejs.org) +- `npm install -D jeet` + +### Usage Example + +```fish +$ stylus -w style.styl +``` + +```styl +// style.styl +@import 'node_modules/jeet/styl' + +debug() + +section + center() + +aside + column(1/3) + +article + column(2/3) +``` + +```html + + + + + +
+ +
Content
+
+ + +``` + +### Namespacing and Aliases + +Jeet doesn't namespace or alias by default anymore (to keep the API simple/clean). If you need namespacing or aliasing, you can wrap mixins within namespace/alias mixins. + +```styl +// Namespace Example +jeet-column() + column(arguments) + +// Alias Example +col() + column(arguments) +``` diff --git a/index.js b/index.js new file mode 100644 index 00000000..aafc53bd --- /dev/null +++ b/index.js @@ -0,0 +1,20 @@ +var path = require('path'); +var pkg = require('./package.json'); + +var jeetPath = path.join(__dirname, 'styl') + +exports = module.exports = function (opts) { + var implicit = (opts && opts.implicit == false) ? false : true; + + return function (style) { + style.include(__dirname); + + if (implicit) { + style.import(jeetPath); + } + } +} + +exports.libname = pkg.name; +exports.path = jeetPath; +exports.version = pkg.version; diff --git a/package.json b/package.json index 75179557..320d7580 100644 --- a/package.json +++ b/package.json @@ -1,62 +1,28 @@ { "name": "jeet", - "maintainers": [ - { - "name": "Cory Simmons", - "email": "csimmonswork@gmail.com", - "web": "http://jeet.gs" - }, - { - "name": "Sam Saccone", - "email": "sam@mojotech.com", - "web": "http://mojotech.com" - }, - { - "name": "Jake Cleary", - "email": "shout@jakecleary.net", - "web": "http://jakecleary.net" - }, - { - "name": "Andreas Nedbal", - "email": "andy@pixelde.su", - "web": "http://pixelde.su" - } + "version": "7.0.0", + "description": "A simple Sass and Stylus grid system. Built for humans.", + "homepage": "https://jeet.gs", + "license": "MIT", + "main": "./index.js", + "author": "Cory Simmons ", + "contributors": [ + "Jake Cleary (http://jakecleary.net)", + "Andreas Nedbal (http://pixelde.su)", + "Sam Saccone" ], - "main": "stylus/jeet.js", - "version": "6.1.5", - "description": "A grid system for humans.", "keywords": [ + "grid", "stylus", - "scss", - "css", - "framework", - "grid" - ], - "categories": [ - "CSS", - "Frameworks" + "scss" ], - "github": "http://github.com/mojotech/jeet", "devDependencies": { - "chai": "3.5.0", - "css-diff": "0.4.1", - "mocha": "2.5.3", - "node-sass": "3.8.0", - "should": "9.0.2", - "stylus": "0.54.5" + "node-sass": "^3.8.0", + "stylus": "^0.54.5" }, "scripts": { - "test": "mocha tests" - }, - "preferGlobal": true, - "repository": { - "type": "git", - "url": "https://github.com/mojotech/jeet.git" + "test:node": "node test/node-stylus/node" }, - "bugs": { - "url": "https://github.com/mojotech/jeet/issues", - "email": "cory@mojotech.com" - }, - "license": "MIT", - "homepage": "https://jeet.gs" + "repository": "mojotech/jeet", + "bugs": "https://github.com/mojotech/jeet/issues" } diff --git a/scss/README.md b/scss/README.md deleted file mode 100644 index fce7acd7..00000000 --- a/scss/README.md +++ /dev/null @@ -1,68 +0,0 @@ -# Jeet for SCSS - -#### Installation -- Install Ruby [[Windows](http://rubyinstaller.org/), [Mac/Linux](https://github.com/sstephenson/rbenv)] -- `gem install sass` -- `cd ~/Project` -- `svn checkout https://github.com/mojotech/jeet/trunk/scss/jeet` -- Put `@import 'jeet/index';` at the top of `~/Project/foo.scss` - -#### Usage -``` -sass -w foo.scss -``` - -#### Usage Example -```html - - - - - -
- -
Content
-
- - -``` - -```scss -@import 'jeet/index'; -@include edit; - -section { - @include center; -} -aside { - @include col(1/3); -} -article { - @include col(2/3); -} -``` - -#### Rails Installation -- `cd ~/RailsApp` -- `svn checkout https://github.com/mojotech/jeet/trunk/scss/jeet vendor/assets/stylesheets/jeet` -- Add `@import 'jeet/index';` to your `application.css.scss` - -#### API -- **`column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)`** - `column` (also aliased as `col`) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. `column(1/4, $offset: 1/4)` would create a column the quarter of the size of it's container and push it to the right a quarter. `cycle` and `uncycle` are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? `column(1/4, $cycle: 4)` - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? `uncycle` your 4-item cycle then... `column(1/2, $uncycle: 4, $cycle: 2)` - done. Need to adjust column gutters for a specific container? `col(1/4, $gutter: .5)` -- **`span($ratio: 1, $offset: 0)`** - Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so like: `span(1/5)`. No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that. -- **`shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)`** - Source ordering works in Jeet by assigning `position: relative` and then a `left` offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to `offset` in that it can accept negative values to shift the other direction. Again, `shift` can accept multiple context ratios to maintain perfect sizing. `shift` also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements. -- **`unshift()`** - Accepts no values but isn't a block closer either. `unshift()` is a great helper function to quickly disable whatever source ordering you've done to an element. -- **`edit()`** - Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial. -- **`center($max_width: 1410px, $pad: 0)`** - This is a shortcut to easily center containers. The pad variable sets padding on the left and right. -- **`stack($pad: 0, $align: false)`** - A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment. -- **`unstack()`** - Cancel that `stack()`. This won't revert back to your `column()` calls. For that, manually call your `column()` method again. -- **`align($direction: both)`** - Aligning blocks relative to their container with `position: absolute` and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers. -- **`cf()`** - Nicholas Gallagher's clearfix. Use this to wrap any set of `column()`s or `span`s. - - -#### Global Settings -- Create a `_settings.scss` file in your Jeet directory. `@import 'jeet/_settings.scss';` at the top (right above `@import 'jeet/index.scss';`) of whichever file Sass is watching (e.g. `sass -w css/style.scss`). -- You can adjust the following variables: - - **`gutter: 3`** - The percentage of the page the root-level gutters take up. - - **`parent-first: false`** - When assigning multiple ratio contexts to a `col()`, do you want to reference the outer most container first? Example: Let's assume we have a column set to `col(1/4)` that is nested inside of another column that is `col(1/3)` which is nested inside of another column that is `col(1/2)`. By default, to maintain consistently sized gutters (even when nesting), our inner-most column would look like `col(1/4 1/3 1/2)`. If we adjust this global variable to be `true`, our inner-most column could be written from a top-down perspective like so: `col(1/2 1/3 1/4)`. This is entirely a preference thing. Do you like stepping up or down? - - **`layout-direction: LTR`** - Support for left-to-right, or right-to-left (`RTL`) text/layouts. diff --git a/scss/_functions.scss b/scss/_functions.scss new file mode 100644 index 00000000..726b9b59 --- /dev/null +++ b/scss/_functions.scss @@ -0,0 +1,89 @@ +// List functions courtesy of Team Sass. + +// Get percentage from a given ratio. +@function _get-span($ratio: 1) { + @return $ratio * 100; +} + +// Work out the column widths based on the ratio and gutter sizes. +@function _get-column($ratios: 1, $gutter: map-get($jeet, 'gutter')) { + $ratios: if(not map-get($jeet, 'parent-first'), _reverse($ratios), $ratios); + $width: 100; + + @each $ratio in $ratios { + $gutter: $gutter / $width * 100; + $width: 100 * $ratio - $gutter + $ratio * $gutter; + } + + @return $width $gutter; +} + +// Get the set layout direction for the project. +@function _get-layout-direction() { + $direction: if(map-get($jeet, 'layout-direction') == 'RTL', right, left); + + @return $direction; +} + +// Replace a specified list value with a new value (uses built in set-nth() if available) +@function _replace-nth($list, $index, $value) { + // Fallback for Sass 3.2 + @if function-exists('set-nth') != true { + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + $result: append($result, if($i == $index, $value, nth($list, $i))); + } + + @return $result; + } + + // Sass 3.3 + $result: set-nth($list, $index, $value); + + @return $result; +} + +// Reverse a list (progressively enhanced for Sass 3.3) +@function _reverse($list) { + // Sass 3.2 + @if function-exists('set-nth') != true { + $result: (); + + @for $i from length($list) * -1 through -1 { + $result: append($result, nth($list, abs($i))); + } + + @return $result; + } + + // Sass 3.3 + @for $i from 1 through floor(length($list) / 2) + 1 { + $tmp: nth($list, $i); + $list: set-nth($list, $i, nth($list, -$i)); + $list: set-nth($list, -$i, $tmp); + } + + @return $list; +} + +// Get the opposite direction to a given value. +@function _opposite-direction($direction) { + @if $direction == 'left' { + @return right; + } @else if $direction == 'right' { + @return left; + } @else if $direction == 'top' { + @return bottom; + } @else if $direction == 'bottom' { + @return top; + } @else if index('ltr' 'LTR', $direction) { + @return rtl; + } @else if index('rtl' 'RTL', $direction) { + @return ltr; + } @else { + @warn '`#{$direction}` is not a direction; please make sure your direction is all lowercase.'; + @return false; + } +} diff --git a/scss/_grid.scss b/scss/_grid.scss new file mode 100644 index 00000000..a912df2b --- /dev/null +++ b/scss/_grid.scss @@ -0,0 +1,279 @@ +@mixin column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter')) { + $side: _get-layout-direction(); + $opposite-side: _opposite-direction($side); + $column-widths: _get-column($ratios, $gutter); + $margin-last: 0; + $margin-l: $margin-last; + $margin-r: nth($column-widths, 2); + + @if $offset != 0 { + @if $offset < 0 { + $offset: $offset * -1; + $offset: nth(_get-column($offset, nth($column-widths, 2)), 1); + $margin-last: $offset + nth($column-widths, 2) * 2; + $margin-r: $margin-last; + } @else { + $offset: nth(_get-column($offset, nth($column-widths, 2)), 1); + $margin-l: $offset + nth($column-widths, 2); + } + } + + @include clearfix; + + float: $side; + clear: none; + text-align: inherit; + width: nth($column-widths, 1) * 1%; + margin: { + #{$side}: $margin-l * 1%; + #{$opposite-side}: $margin-r * 1%; + }; + + @if $cycle != 0 { + &:nth-child(n) { + margin-#{_opposite-direction($side)}: $margin-r * 1%; + float: $side; + clear: none; + } + + &:nth-child(#{$cycle}n) { + margin-#{_opposite-direction($side)}: $margin-last * 1%; + float: _opposite-direction($side); + } + + &:nth-child(#{$cycle}n + 1) { + clear: both; + } + } @else { + &:last-child { + margin-#{_opposite-direction($side)}: $margin-last * 1%; + } + } +} + + +@function column-width($ratios: 1, $gutter: map-get($jeet, 'gutter')) { + @if (map-get($jeet, 'parent-first') != 'true') { + $ratios: _reverse($ratios); + } + + $w: 100; + + @each $ratio in $ratios { + $w: 100 * $ratio - $gutter + $ratio * $gutter; + } + + @return unquote($w + '%'); +} + + +@function column-gutter($ratios: 1, $gutter: map-get($jeet, 'gutter')) { + @if (map-get($jeet, 'parent-first') != 'true') { + $ratios: _reverse($ratios); + } + + $w: 100; + + @each $ratio in $ratios { + $gutter: $gutter / $w * 100; + } + + @return unquote($gutter + '%'); +} + + +@mixin span($ratio: 1, $offset: 0, $cycle: 0) { + $side: _get-layout-direction(); + $opposite-side: _opposite-direction($side); + $span-width: _get-span($ratio); + $margin-r: 0; + $margin-l: $margin-r; + @if $offset != 0 { + @if $offset < 0 { + $offset: $offset * -1; + $margin-r: _get-span($offset); + } @else { + $margin-l: _get-span($offset); + } + } + + @include clearfix; + float: $side; + clear: none; + text-align: inherit; + width: $span-width * 1%; + margin: { + #{$side}: $margin-l * 1%; + #{$opposite-side}: $margin-r * 1%; + }; + + @if $cycle != 0 { + &:nth-child(n) { + float: $side; + clear: none; + } + + &:nth-child(#{$cycle}n) { + float: _opposite-direction($side); + } + + &:nth-child(#{$cycle}n + 1) { + clear: both; + } + } +} + + +@mixin move($ratios: 0, $col-or-span: column, $gutter: map-get($jeet, 'gutter')) { + $translate: ''; + $side: _get-layout-direction(); + + @if $side == right { + $ratios: _replace-nth($ratios, 0, nth($ratios, 1) * -1); + } + + @if index("column" "col" "c", $col-or-span) { + $column-widths: _get-column($ratios, $gutter); + $translate: nth($column-widths, 1) + nth($column-widths, 2); + } @else { + $translate: _get-span($ratios); + } + + position: relative; + left: $translate * 1%; +} + + +@mixin unmove() { + position: static; + left: 0; +} + + +@mixin debug($color: blue, $important: false) { + @if $important { + * { + background: rgba($color, .05) !important; + } + } @else { + * { + background: rgba($color, .05); + } + } +} + + +@mixin center($max-width: map-get($jeet, 'max-width'), $pad: 0) { + @include clearfix; + width: auto; + max-width: $max-width; + float: none; + display: block; + margin: { + right: auto; + left: auto; + }; + padding: { + left: $pad; + right: $pad; + }; +} + + +@mixin uncenter() { + max-width: none; + margin-right: 0; + margin-left: 0; + padding-left: 0; + padding-right: 0; +} + + +@mixin stack($pad: 0, $align: false) { + $side: _get-layout-direction(); + $opposite-side: _opposite-direction($side); + + display: block; + clear: both; + float: none; + width: 100%; + margin: { + left: auto; + right: auto; + }; + + &:first-child { + margin-#{$side}: auto; + } + + &:last-child { + margin-#{$opposite-side}: auto; + } + + @if $pad != 0 { + padding: { + left: $pad; + right: $pad; + } + } + + @if ($align is not false) { + @if index("center" "c", $align) { + text-align: center; + } @else if index("left" "l", $align) { + text-align: left; + } @else if index("right" "r", $align) { + text-align: right; + } + } +} + + +@mixin unstack() { + $side: _get-layout-direction(); + $opposite-side: _opposite-direction($side); + + text-align: $side; + display: inline; + clear: none; + width: auto; + margin: { + left: 0; + right: 0; + }; + + &:first-child { + margin-#{$side}: 0; + } + + &:last-child { + margin-#{_opposite-direction($side)}: 0; + } +} + + +@mixin align($direction: both) { + position: absolute; + transform-style: preserve-3d; + + @if index("horizontal" "h", $direction) { + left: 50%; + transform: translateX(-50%); + } @else if index("vertical" "v", $direction) { + top: 50%; + transform: translateY(-50%); + } @else { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + + +@mixin clearfix() { + &::after { + content: ''; + display: table; + clear: both; + } +} diff --git a/scss/_settings.scss b/scss/_settings.scss new file mode 100644 index 00000000..791e4795 --- /dev/null +++ b/scss/_settings.scss @@ -0,0 +1,6 @@ +$jeet: ( + gutter: 3, + max-width: 1440px, + layout-direction: LTR, + parent-first: false +); diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 00000000..89f47925 --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,19 @@ +// API Quick Reference +// ------------------- +// column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter')) +// column-width($ratios: 1, $gutter: map-get($jeet, 'gutter')) +// column-gutter($ratios: 1, $gutter: map-get($jeet, 'gutter')) +// span($ratio: 1, $offset: 0, $cycle: 0) +// move($ratios: 0, $col-or-span: column, $gutter: map-get($jeet, 'gutter')) +// unmove() +// debug($color: blue, $important: false) +// center($max-width: map-get($jeet, 'max-width'), $pad: 0) +// uncenter() +// stack($pad: 0, $align: false) +// unstack() +// align($direction: both) +// clearfix() + +@import '_settings'; +@import '_functions'; +@import '_grid'; diff --git a/scss/jeet/_functions.scss b/scss/jeet/_functions.scss deleted file mode 100644 index 2f5c4cdb..00000000 --- a/scss/jeet/_functions.scss +++ /dev/null @@ -1,120 +0,0 @@ -/** - * List functions courtesy of the wonderful folks at Team Sass. - * Check out their awesome grid: Singularity. - */ - -/** - * Get percentage from a given ratio. - * @param {number} [$ratio=1] - The column ratio of the element. - * @returns {number} - The percentage value. - */ -@function jeet-get-span($ratio: 1) { - @return $ratio * 100; -} - -/** - * Work out the column widths based on the ratio and gutter sizes. - * @param {number} [$ratios=1] - The column ratio of the element. - * @param {number} [$gutter=$jeet-gutter] - The gutter for the column. - * @returns {list} $width $gutter - A list containing the with and gutter for the element. - */ -@function jeet-get-column($ratios: 1, $gutter: $jeet-gutter) { - $ratios: if(not $jeet-parent-first, jeet-reverse($ratios), $ratios); - $width: 100; - - @each $ratio in $ratios { - $gutter: $gutter / $width * 100; - $width: 100 * $ratio - $gutter + $ratio * $gutter; - } - - @return $width $gutter; -} - -/** - * Get the set layout direction for the project. - * @returns {string} $direction - The layout direction. - */ -@function jeet-get-layout-direction() { - $direction: if($jeet-layout-direction == "RTL", right, left); - - @return $direction; -} - -/** - * Replace a specified list value with a new value (uses built in set-nth() if available) - * @param {list} $list - The list of values you want to alter. - * @param {number} $index - The index of the list item you want to replace. - * @param {*} $value - The value you want to replace $index with. - * @returns {list} $list - The list with the value replaced or removed. - * @warn if an invalid index is supplied. - */ -@function jeet-replace-nth($list, $index, $value) { - // Fallback for Sass 3.2 - @if function-exists("set-nth") != true { - $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); - - @for $i from 1 through length($list) { - $result: append($result, if($i == $index, $value, nth($list, $i))); - } - - @return $result; - } - - // Sass 3.3 - $result: set-nth($list, $index, $value); - - @return $result; -} - -/** - * Reverse a list (progressively enhanced for Sass 3.3) - * @param {list} $list - The list of values you want to reverse. - * @returns {list} $result - The reversed list. - */ -@function jeet-reverse($list) { - // Sass 3.2 - @if function-exists("set-nth") != true { - $result: (); - - @for $i from length($list) * -1 through -1 { - $result: append($result, nth($list, abs($i))); - } - - @return $result; - } - - // Sass 3.3 - @for $i from 1 through floor(length($list) / 2) + 1 { - $tmp: nth($list, $i); - $list: set-nth($list, $i, nth($list, -$i)); - $list: set-nth($list, -$i, $tmp); - } - - @return $list; -} - -/** - * Get the opposite direction to a given value. - * @param {string} $dir - The direction you want the opposite of. - * @returns {string} - The opposite direction to $dir. - * @warn if an incorrect string is provided. - */ -@function jeet-opposite-direction($direction) { - @if $direction == "left" { - @return right; - } @else if $direction == "right" { - @return left; - } @else if $direction == "top" { - @return bottom; - } @else if $direction == "bottom" { - @return top; - } @else if index("ltr" "LTR", $direction) { - @return rtl; - } @else if index("rtl" "RTL", $direction) { - @return ltr; - } @else { - @warn "`#{$direction}` is not a direction; please make sure your direction is all lowercase."; - @return false; - } -} diff --git a/scss/jeet/_grid.scss b/scss/jeet/_grid.scss deleted file mode 100644 index 5fa4786e..00000000 --- a/scss/jeet/_grid.scss +++ /dev/null @@ -1,372 +0,0 @@ -/** - * Style an element as a column with a gutter. - * @param {number} [$ratios=1] - A width relative to its container as a fraction. - * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). - * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns. - * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one. - * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. - */ -@mixin column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) { - $side: jeet-get-layout-direction(); - $opposite-side: jeet-opposite-direction($side); - $column-widths: jeet-get-column($ratios, $gutter); - $margin-last: 0; - $margin-l: $margin-last; - $margin-r: nth($column-widths, 2); - - @if $offset != 0 { - @if $offset < 0 { - $offset: $offset * -1; - $offset: nth(jeet-get-column($offset, nth($column-widths, 2)), 1); - $margin-last: $offset + nth($column-widths, 2) * 2; - $margin-r: $margin-last; - } @else { - $offset: nth(jeet-get-column($offset, nth($column-widths, 2)), 1); - $margin-l: $offset + nth($column-widths, 2); - } - } - - @include cf; - float: $side; - clear: none; - text-align: inherit; - width: nth($column-widths, 1) * 1%; - margin: { - #{$side}: $margin-l * 1%; - #{$opposite-side}: $margin-r * 1%; - }; - - @if $uncycle != 0 { - &:nth-child(#{$uncycle}n) { - margin-#{jeet-opposite-direction($side)}: $margin-r * 1%; - float: $side; - } - &:nth-child(#{$uncycle}n + 1) { - clear: none; - } - } - - @if $cycle != 0 { - &:nth-child(#{$cycle}n) { - margin-#{jeet-opposite-direction($side)}: $margin-last * 1%; - float: jeet-opposite-direction($side); - } - &:nth-child(#{$cycle}n + 1) { - clear: both; - } - } @else { - &:last-child { - margin-#{jeet-opposite-direction($side)}: $margin-last * 1%; - } - } -} - -/** - * An alias for the column mixin. - * @param [$args...] - All arguments get passed through to column(). - */ -@mixin col($args...) { - @include column($args...); -} - -/** - * Get the width of a column and nothing else. - * @param {number} [$ratios=1] - A width relative to its container as a fraction. - * @param {number} [$g=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. - */ -@function column-width($ratios: 1, $g: $jeet-gutter) { - @if ($jeet-parent-first != 'true') { - $ratios: jeet-reverse($ratios); - } - - $w: 100; - - @each $ratio in $ratios { - $w: 100 * $ratio - $g + $ratio * $g; - } - - @return unquote($w + '%'); -} - -/** - * Get the gutter size of a column and nothing else. - * @param {number} [ratios=1] - A width relative to its container as a fraction. - * @param {number} [g=jeet.gutter] - Specify the gutter width as a percentage of the containers width. - */ -@function column-gutter($ratios: 1, $g: $jeet-gutter) { - @if ($jeet-parent-first != 'true') { - $ratios: jeet-reverse($ratios); - } - - $w: 100; - - @each $ratio in $ratios { - $g: $g / $w * 100; - } - - @return unquote($g + '%'); -} - -/** - * An alias for the column-width function. - * @param [$args...] - All arguments get passed through to column(). - */ -@function cw($args...) { - @return column-width($args...); -} - -/** - * An alias for the column-gutter function. - * @param [$args...] - All arguments get passed through to column(). - */ -@function cg($args...) { - @return column-gutter($args...); -} - -/** - * Style an element as a column without any gutters for a seamless row. - * @param {number} [$ratios=1] - A width relative to its container as a fraction. - * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios). - * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns. - * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one. - */ -@mixin span($ratio: 1, $offset: 0, $cycle: 0, $uncycle: 0) { - $side: jeet-get-layout-direction(); - $opposite-side: jeet-opposite-direction($side); - $span-width: jeet-get-span($ratio); - $margin-r: 0; - $margin-l: $margin-r; - @if $offset != 0 { - @if $offset < 0 { - $offset: $offset * -1; - $margin-r: jeet-get-span($offset); - } @else { - $margin-l: jeet-get-span($offset); - } - } - - @include cf; - float: $side; - clear: none; - text-align: inherit; - width: $span-width * 1%; - margin: { - #{$side}: $margin-l * 1%; - #{$opposite-side}: $margin-r * 1%; - }; - - @if $cycle != 0 { - &:nth-child(#{$cycle}n) { - float: $opposite-side; - } - &:nth-child(#{$cycle}n + 1) { - clear: both; - } - } - - @if $uncycle != 0 { - &:nth-child(#{$uncycle}n) { - float: $side; - } - &:nth-child(#{$uncycle}n + 1) { - clear: none; - } - } - -} - -/** - * Reorder columns without altering the HTML. - * @param {number} [$ratios=0] - Specify how far along you want the element to move. - * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not. - * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width. - */ -@mixin shift($ratios: 0, $col-or-span: column, $gutter: $jeet-gutter) { - $translate: ''; - $side: jeet-get-layout-direction(); - - @if $side == right { - $ratios: jeet-replace-nth($ratios, 0, nth($ratios, 1) * -1); - } - - @if index("column" "col" "c", $col-or-span) { - $column-widths: jeet-get-column($ratios, $gutter); - $translate: nth($column-widths, 1) + nth($column-widths, 2); - } @else { - $translate: jeet-get-span($ratios); - } - - position: relative; - left: $translate * 1%; -} - -/** - * Reset an element that has had shift() applied to it. - */ -@mixin unshift() { - position: static; - left: 0; -} - -/** - * View the grid and its layers for easy debugging. - * @param {string} [$color=black] - The background tint applied. - * @param {boolean} [$important=false] - Whether to apply the style as !important. - */ -@mixin edit($color: black, $important: false) { - @if $important { - * { - background: rgba($color, .05) !important; - } - } @else { - * { - background: rgba($color, .05); - } - } -} - -/** - * Alias for edit(). - */ -@mixin debug() { - @include edit; -} - -/** - * Horizontally center an element. - * @param {number} [$max-width=1410px] - The max width the element can be. - * @param {number} [$pad=0] - Specify the element's left and right padding. - */ -@mixin center($max-width: $jeet-max-width, $pad: 0) { - @include cf; - width: auto; - max-width: $max-width; - float: none; - display: block; - margin: { - right: auto; - left: auto; - }; - padding: { - left: $pad; - right: $pad; - }; -} - -/** - * Uncenter an element. - */ -@mixin uncenter() { - max-width: none; - margin-right: 0; - margin-left: 0; - padding-left: 0; - padding-right: 0; -} - -/** - * Stack an element so that nothing is either side of it. - * @param {number} [$pad=0] - Specify the element's left and right padding. - * @param {boolean/string} [$align=false] - Specify the text align for the element. - */ -@mixin stack($pad: 0, $align: false) { - $side: jeet-get-layout-direction(); - $opposite-side: jeet-opposite-direction($side); - - display: block; - clear: both; - float: none; - width: 100%; - margin: { - left: auto; - right: auto; - }; - - &:first-child { - margin-#{$side}: auto; - } - - &:last-child { - margin-#{$opposite-side}: auto; - } - - @if $pad != 0 { - padding: { - left: $pad; - right: $pad; - } - } - - @if ($align is not false) { - @if index("center" "c", $align) { - text-align: center; - } @else if index("left" "l", $align) { - text-align: left; - } @else if index("right" "r", $align) { - text-align: right; - } - } -} - -/** - * Unstack an element. - */ -@mixin unstack() { - $side: jeet-get-layout-direction(); - $opposite-side: jeet-opposite-direction($side); - - text-align: $side; - display: inline; - clear: none; - width: auto; - margin: { - left: 0; - right: 0; - }; - - &:first-child { - margin-#{$side}: 0; - } - - &:last-child { - margin-#{jeet-opposite-direction($side)}: 0; - } -} - -/** - * Center an element on either or both axes. - * @requires A parent container with relative positioning. - * @param {string} [$direction=both] - Specify which axes to center the element on. - */ -@mixin align($direction: both) { - position: absolute; - transform-style: preserve-3d; - - @if index("horizontal" "h", $direction) { - left: 50%; - transform: translateX(-50%); - } @else if index("vertical" "v", $direction) { - top: 50%; - transform: translateY(-50%); - } @else { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -/** - * Apply a clearfix to an element. - */ -@mixin cf() { - *zoom: 1; - - &:before, &:after { - content: ''; - display: table; - } - - &:after { - clear: both; - } -} diff --git a/scss/jeet/_settings.scss b/scss/jeet/_settings.scss deleted file mode 100644 index 984e46a8..00000000 --- a/scss/jeet/_settings.scss +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Grid settings. - * All values are defaults and can therefore be easily overidden. - */ - -$jeet-gutter: 3 !default; -$jeet-parent-first: false !default; -$jeet-layout-direction: "LTR" !default; -$jeet-max-width: 1410px !default; diff --git a/scss/jeet/index.scss b/scss/jeet/index.scss deleted file mode 100644 index cd9b01d2..00000000 --- a/scss/jeet/index.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* Syntax Quick Reference - -------------------------- - column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter) - span($ratio: 1, $offset: 0) - shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter) - unshift() - edit() - center($max_width: 1410px, $pad: 0) - stack($pad: 0, $align: false) - unstack() - align($direction: both) - cf() -*/ - -@import '_settings'; -@import '_functions'; -@import '_grid'; diff --git a/styl/_functions.styl b/styl/_functions.styl new file mode 100644 index 00000000..c0fc5e46 --- /dev/null +++ b/styl/_functions.styl @@ -0,0 +1,42 @@ +// Get percentage from a given ratio. +_get-span(ratio = 1) + return ratio * 100 + +// Work out the column widths based on the ratio and gutter sizes. +_get-column(ratios = 1, gutter = $jeet.gutter) + ratios = _reverse(ratios) unless $jeet.parent-first is true + width = 100 + + for ratio in ratios + gutter = gutter / width * 100 + width = 100 * ratio - gutter + ratio * gutter + + return width gutter + +// Get the set layout direction for the project. +_get-layout-direction() + $jeet.layout-direction == RTL ? result = right : result = left + + return result + +// Replace a specified list value with a new value. +_replace-nth(list, index, value) + result = () + index = length(list) + index if index < 0 + + for i in (0..(length(list) - 1)) + if i == index + append(result, value) + else + append(result, list[i]) + + return result + +// Reverse a list. +_reverse(list) + result = () + + for item in list + prepend(result, item) + + return result diff --git a/styl/_grid.styl b/styl/_grid.styl new file mode 100644 index 00000000..7bf76e3b --- /dev/null +++ b/styl/_grid.styl @@ -0,0 +1,216 @@ +column($ratios = 1, $offset = 0, $cycle = 0, $gutter = $jeet.gutter) + side = _get-layout-direction() + opposite-side = opposite-position(side) + column-widths = _get-column($ratios, $gutter) + margin-last = 0 + margin-l = margin-last + margin-r = column-widths[1] + + unless $offset == 0 + if $offset < 0 + $offset *= -1 + $offset = _get-column($offset, column-widths[1])[0] + margin-r = margin-last = $offset + column-widths[1] * 2 + else + $offset = _get-column($offset, column-widths[1])[0] + margin-l = $offset + column-widths[1] + + clearfix() + float: side + clear: none + text-align: inherit + width: (column-widths[0])% + margin-{side}: (margin-l)% + margin-{opposite-side}: (margin-r)% + + if $cycle != 0 + &:nth-child(n) + margin-{opposite-side}: (margin-r)% + float: side + clear: none + + &:nth-child({$cycle}n) + margin-{opposite-side}: (margin-last)% + float: opposite-side + + &:nth-child({$cycle}n + 1) + clear: both + else + &:last-child + margin-{opposite-side}: (margin-last)% + + +column-width($ratios = 1, $gutter = $jeet.gutter) + $ratios = _reverse($ratios) unless $jeet.parent-first is true + w = 100 + + for ratio in $ratios + w = 100 * ratio - $gutter + ratio * $gutter + + return w + '%' + + +column-gutter($ratios = 1, $gutter = $jeet.gutter) + $ratios = _reverse($ratios) unless $jeet.parent-first is true + w = 100 + + for ratio in $ratios + $gutter = $gutter / w * 100 + + return $gutter + '%' + + +span($ratio = 1, $offset = 0, $cycle = 0) + side = _get-layout-direction() + opposite-side = opposite-position(side) + span-width = _get-span($ratio) + margin-r = 0 + margin-l = margin-r + + unless $offset == 0 + if $offset < 0 + $offset *= -1 + margin-r = _get-span($offset) + else + margin-l = _get-span($offset) + + clearfix() + float: side + clear: none + text-align: inherit + width: (span-width)% + margin-{side}: (margin-l)% + margin-{opposite-side}: (margin-r)% + + if $cycle != 0 + &:nth-child(n) + float: side + clear: none + + &:nth-child({$cycle}n) + float: opposite-side + + &:nth-child({$cycle}n + 1) + clear: both + + +move($ratios = 0, $col-or-span = column, $gutter = $jeet.gutter) + translate = '' + side = _get-layout-direction() + + if side == right + $ratios = _replace-nth($ratios, 0, $ratios[0] * -1) + + if $col-or-span == column or $col-or-span == col or $col-or-span == c + column-widths = _get-column($ratios, $gutter) + translate = column-widths[0] + column-widths[1] + else + translate = _get-span($ratios) + + position: relative + left: (translate)% + + +unmove() + position: static + left: 0 + + +debug($color = blue, $important = false) + if $important + * + background: rgba($color, 5%) !important + else + * + background: rgba($color, 5%) + + +center($max-width = $jeet.max-width, $pad = 0) + clearfix() + width: auto + max-width: $max-width + float: none + display: unquote('block') + margin-right: auto + margin-left: auto + padding-left: $pad + padding-right: $pad + + +uncenter() + max-width: none + margin-right: 0 + margin-left: 0 + padding-left: 0 + padding-right: 0 + + +stack($pad = 0, $align = false) + side = _get-layout-direction() + opposite-side = opposite-position(side) + + display: unquote('block') + clear: both + float: none + width: 100% + margin-left: auto + margin-right: auto + + &:first-child + margin-{side}: auto + + &:last-child + margin-{opposite-side}: auto + + if $pad != 0 + padding-left: $pad + padding-right: $pad + + if ($align is not false) + if ($align == center) or ($align == c) + text-align: center + if ($align == left) or ($align == l) + text-align: left + if ($align == right) or ($align == r) + text-align: right + + +unstack() + side = _get-layout-direction() + opposite-side = opposite-position(side) + + text-align: side + display: inline + clear: none + width: auto + margin-left: 0 + margin-right: 0 + + &:first-child + margin-{side}: 0 + + &:last-child + margin-{opposite-side}: 0 + + +align($direction = both) + position: absolute + transform-style: preserve-3d + + if ($direction == horizontal) or ($direction == h) + left: 50% + transform: translateX(-50%) + else if ($direction == vertical) or ($direction == v) + top: 50% + transform: translateY(-50%) + else + top: 50% + left: 50% + transform: translate(-50%, -50%) + + +clearfix() + &::after + content: '' + display: table + clear: both diff --git a/styl/_settings.styl b/styl/_settings.styl new file mode 100644 index 00000000..f4f9993e --- /dev/null +++ b/styl/_settings.styl @@ -0,0 +1,6 @@ +$jeet = { + gutter: 3, + max-width: 1440px, + layout-direction: LTR, + parent-first: false +} diff --git a/styl/index.styl b/styl/index.styl new file mode 100644 index 00000000..27642f28 --- /dev/null +++ b/styl/index.styl @@ -0,0 +1,19 @@ +// API Quick Reference +// ------------------- +// column($ratios = 1, $offset = 0, $cycle = 0, $gutter = $jeet.gutter) +// column-width($ratios = 1, $gutter = $jeet.gutter) +// column-gutter($ratios = 1, $gutter = $jeet.gutter) +// span($ratio = 1, $offset = 0, $cycle = 0) +// move($ratios = 0, $col-or-span = column, $gutter = $jeet.gutter) +// unmove() +// debug($color = blue, $important = false) +// center($max-width = $jeet.max-width, $pad = 0) +// uncenter() +// stack($pad = 0, $align = false) +// unstack() +// align($direction = both) +// clearfix() + +@import '_settings' +@import '_functions' +@import '_grid' diff --git a/stylus/README.md b/stylus/README.md deleted file mode 100644 index 3bd06476..00000000 --- a/stylus/README.md +++ /dev/null @@ -1,73 +0,0 @@ -# Jeet for Stylus - -#### Installation -- Install [NodeJS](http://nodejs.org) -- `npm install -g jeet` -- `cd ~/Project` -- Put `@import 'jeet'` at the top of `~/Project/foo.styl` - -#### Usage -``` -stylus -u jeet -w foo.styl -``` - -For more information on the many ways you can use Stylus plugins, please refer to [this guide](https://gist.github.com/jenius/8263065). - -#### Usage Example -```html - - - - - -
- -
Content
-
- - -``` -```stylus -@import 'jeet' -edit() - -section - center() -aside - col(1/3) -article - col(2/3) -``` - -#### API -Be sure to check out [Jeet's website](http://jeet.gs) for [CodePen](http://codepen.io) examples of all this stuff. - -- **`column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)`** - `column` (also aliased as `col`) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. `column(1/4, offset: 1/4)` would create a column the quarter of the size of it's container and push it to the right a quarter. `cycle` and `uncycle` are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? `column(1/4, cycle: 4)` - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? `uncycle` your 4-item cycle then... `column(1/2, uncycle: 4, cycle: 2)` - done. Need to adjust column gutters for a specific container? `col(1/4, gutter: .5)` -- **`span(ratio = 1, offset = 0)`** - Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so like: `span(1/5)`. No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that. -- **`shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)`** - Source ordering works in Jeet by assigning `position: relative` and then a `left` offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to `offset` in that it can accept negative values to shift the other direction. Again, `shift` can accept multiple context ratios to maintain perfect sizing. `shift` also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements. -- **`unshift()`** - Accepts no values but isn't a block closer either. `unshift()` is a great helper function to quickly disable whatever source ordering you've done to an element. -- **`edit()`** - Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial. -- **`center(max-width = 1410px, pad = 0)`** - This is a shortcut to easily center containers. The pad variable sets padding on the left and right. -- **`stack(pad = 0, align = false)`** - A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment. -- **`unstack()`** - Cancel that `stack()`. This won't revert back to your `column()` calls. For that, manually call your `column()` method again. -- **`align(direction = both)`** - Aligning blocks relative to their container with `position: absolute` and fancy positioning and transform. Vertical alignment is now trivial in IE9+ browsers. -- **`cf()`** - Nicholas Gallagher's clearfix. Use this to wrap any set of `column()`s or `span`s. - -#### Protip -Use Jeet alongside other great Stylus projects like [nib](https://github.com/visionmedia/nib), [Axis](https://github.com/jenius/axis), [Autoprefixer-Stylus](https://github.com/jenius/autoprefixer-stylus), [Rupture](https://github.com/jenius/rupture), and [Typographic](https://github.com/corysimmons/typographic). - -``` -npm install -g nib axis-css autoprefixer-stylus rupture typographic jeet -stylus -u nib -u axis-css -u autoprefixer-stylus -u rupture -u typographic -u jeet -w css/style.styl -``` - -#### Global Settings -- Create a `_settings.styl` file in your project directory somewhere. `@import '_settings'` at the top (right above `@import 'jeet'`) of whichever file Stylus is watching (e.g. `stylus -u jeet -w css/style.styl`) -- You can adjust the following variables: - - **`gutter = 3`** - The percentage of the page the root-level gutters take up. - - **`parent-first = false`** - When assigning multiple ratio contexts to a `col()`, do you want to reference the outer most container first? Example: Let's assume we have a column set to `col(1/4)` that is nested inside of another column that is `col(1/3)` which is nested inside of another column that is `col(1/2)`. By default, to maintain consistently sized gutters (even when nesting), our inner-most column would look like `col(1/4 1/3 1/2)`. If we adjust this global variable to be `true`, our inner-most column could be written from a top-down perspective like so: `col(1/2 1/3 1/4)`. This is entirely a preference thing. Do you like stepping up or down? - - **`layout-direction = LTR`** - Support for left-to-right, or right-to-left (`RTL`) text/layouts. - -#### Gulp -- `npm install gulp gulp-stylus jeet` -- `gulp jeet` diff --git a/stylus/jeet.js b/stylus/jeet.js deleted file mode 100644 index d290d2fd..00000000 --- a/stylus/jeet.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = function(opts) { - return function(style) { - style.include(__dirname); - } -} diff --git a/stylus/jeet/_functions.styl b/stylus/jeet/_functions.styl deleted file mode 100644 index 90fff55d..00000000 --- a/stylus/jeet/_functions.styl +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Get percentage from a given ratio. - * @param {number} [ratio=1] - The column ratio of the element. - * @returns {number} - The percentage value. - */ -jeet-get-span(ratio = 1) - return ratio * 100 - -/** - * Work out the column widths based on the ratio and gutter sizes. - * @param {number} [ratios=1] - The column ratio of the element. - * @param {number} [gutter=jeet.gutter] - The gutter for the column. - * @returns {list} width gutter - A list containing the with and gutter for the element. - */ -jeet-get-column(ratios = 1, gutter = jeet.gutter) - ratios = jeet-reverse(ratios) unless jeet.parent-first is true - width = 100 - - for ratio in ratios - gutter = gutter / width * 100 - width = 100 * ratio - gutter + ratio * gutter - - return width gutter - -/** - * Get the set layout direction for the project. - * @returns {string} result - The layout direction. - */ -jeet-get-layout-direction() - jeet.layout-direction == RTL ? result = right : result = left - - return result - -/** - * Replace a specified list value with a new value. - * @param {list} list - The list of values you want to alter. - * @param {number} index - The index of the list item you want to replace. - * @param {*} value - The value you want to replace $index with. - * @returns {list} result - The list with the value replaced. - */ -jeet-replace-nth(list, index, value) - result = () - index = length(list) + index if index < 0 - - for i in (0..(length(list) - 1)) - if i == index - append(result, value) - else - append(result, list[i]) - - return result - -/** - * Reverse a list. - * @param {list} list - The list of values you want to reverse. - * @returns {list} result - The reversed list. - */ -jeet-reverse(list) - result = () - - for item in list - prepend(result, item) - - return result diff --git a/stylus/jeet/_grid.styl b/stylus/jeet/_grid.styl deleted file mode 100644 index 09a2556f..00000000 --- a/stylus/jeet/_grid.styl +++ /dev/null @@ -1,293 +0,0 @@ -/** - * Style an element as a column with a gutter. - * @param {number} [ratios=1] - A width relative to its container as a fraction. - * @param {number} [offset=0] - A offset specified as a fraction (see ratios). - * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns. - * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one. - * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width. - */ -column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter) - side = jeet-get-layout-direction() - opposite-side = opposite-position(side) - column-widths = jeet-get-column(ratios, gutter) - margin-last = 0 - margin-l = margin-last - margin-r = column-widths[1] - - unless offset == 0 - if offset < 0 - offset *= -1 - offset = jeet-get-column(offset, column-widths[1])[0] - margin-r = margin-last = offset + column-widths[1] * 2 - else - offset = jeet-get-column(offset, column-widths[1])[0] - margin-l = offset + column-widths[1] - - cf() - float: side - clear: none - text-align: inherit - width: (column-widths[0])% - margin-{side}: (margin-l)% - margin-{opposite-side}: (margin-r)% - - if uncycle != 0 - &:nth-child({uncycle}n) - margin-{opposite-side}: (margin-r)% - float: side - &:nth-child({uncycle}n+1) - clear: none - - if cycle != 0 - &:nth-child({cycle}n) - margin-{opposite-side}: (margin-last)% - float: opposite-side - &:nth-child({cycle}n+1) - clear: both - else - &:last-child - margin-{opposite-side}: (margin-last)% - -/** - * An alias for the column mixin. - */ -col = column - -/** - * Get the width of a column and nothing else. - * @param {number} [ratios=1] - A width relative to its container as a fraction. - * @param {number} [g=jeet.gutter] - Specify the gutter width as a percentage of the containers width. - */ -column-width(ratios = 1, g = jeet.gutter) - ratios = jeet-reverse(ratios) unless jeet.parent-first is true - w = 100 - - for ratio in ratios - w = 100 * ratio - g + ratio * g - - return w + '%' - -/** - * An alias for the column-width function. - */ -cw = column-width - -/** - * Get the gutter size of a column and nothing else. - * @param {number} [ratios=1] - A width relative to its container as a fraction. - * @param {number} [g=jeet.gutter] - Specify the gutter width as a percentage of the containers width. - */ -column-gutter(ratios = 1, g = jeet.gutter) - ratios = jeet-reverse(ratios) unless jeet.parent-first is true - w = 100 - - for ratio in ratios - g = g / w * 100 - - return g + '%' - -/** - * An alias for the column-gutter function. - */ -cg = column-gutter - -/** - * Style an element as a column without any gutters for a seamless row. - * @param {number} [ratios=1] - A width relative to its container as a fraction. - * @param {number} [offset=0] - A offset specified as a fraction (see ratios). - * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns. - * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one. - */ -span(ratio = 1, offset = 0, cycle = 0, uncycle = 0) - side = jeet-get-layout-direction() - opposite-side = opposite-position(side) - span-width = jeet-get-span(ratio) - margin-r = 0 - margin-l = margin-r - - unless offset == 0 - if offset < 0 - offset *= -1 - margin-r = jeet-get-span(offset) - else - margin-l = jeet-get-span(offset) - - cf() - float: side - clear: none - text-align: inherit - width: (span-width)% - margin-{side}: (margin-l)% - margin-{opposite-side}: (margin-r)% - - if cycle != 0 - &:nth-child({cycle}n) - float: opposite-side - &:nth-child({cycle}n + 1) - clear: both - - if uncycle != 0 - &:nth-child({uncycle}n) - float: side - &:nth-child({uncycle}n + 1) - clear: none - -/** - * Reorder columns without altering the HTML. - * @param {number} [ratios=0] - Specify how far along you want the element to move. - * @param {string} [col-or-span=column] - Specify whether the element has a gutter or not. - * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width. - */ -shift(ratios = 0, col-or-span = column, gutter = jeet.gutter) - translate = '' - side = jeet-get-layout-direction() - - if side == right - ratios = jeet-replace-nth(ratios, 0, ratios[0] * -1) - - if col-or-span == column or col-or-span == col or col-or-span == c - column-widths = jeet-get-column(ratios, gutter) - translate = column-widths[0] + column-widths[1] - else - translate = jeet-get-span(ratios) - - position: relative - left: (translate)% - -/** - * Reset an element that has had shift() applied to it. - */ -unshift() - position: static - left: 0 - -/** - * View the grid and its layers for easy debugging. - * @param {string} [color=black] - The background tint applied. - * @param {boolean} [important=false] - Whether to apply the style as !important. - */ -edit(color = black, important = false) - if important - * - background: rgba(color, 5%) !important - else - * - background: rgba(color, 5%) - -/** - * Alias for edit(). - */ -debug = edit - -/** - * Horizontally center an element. - * @param {number} [max-width=jeet.max-width] - The max width the element can be. - * @param {number} [pad=0] - Specify the element's left and right padding. - */ -center(max-width = jeet.max-width, pad = 0) - cf() - width: auto - max-width: max-width - float: none - display: unquote('block') - margin-right: auto - margin-left: auto - padding-left: pad - padding-right: pad - -/** - * Uncenter an element. - */ -uncenter() - max-width: none - margin-right: 0 - margin-left: 0 - padding-left: 0 - padding-right: 0 - -/** - * Stack an element so that nothing is either side of it. - * @param {number} [pad=0] - Specify the element's left and right padding. - * @param {bollean/string} [align=false] - Specify the text align for the element. - */ -stack(pad = 0, align = false) - side = jeet-get-layout-direction() - opposite-side = opposite-position(side) - - display: unquote('block') - clear: both - float: none - width: 100% - margin-left: auto - margin-right: auto - - &:first-child - margin-{side}: auto - - &:last-child - margin-{opposite-side}: auto - - if pad != 0 - padding-left: pad - padding-right: pad - - if (align is not false) - if (align == center) or (align == c) - text-align: center - if (align == left) or (align == l) - text-align: left - if (align == right) or (align == r) - text-align: right - -/** - * Unstack an element. - */ -unstack() - side = jeet-get-layout-direction() - opposite-side = opposite-position(side) - - text-align: side - display: inline - clear: none - width: auto - margin-left: 0 - margin-right: 0 - - &:first-child - margin-{side}: 0 - - &:last-child - margin-{opposite-side}: 0 - -/** - * Center an element on either or both axes. - * @requires A parent container with relative positioning. - * @param {string} [direction=both] - Specify which axes to center the element on. - */ -align(direction = both) - position: absolute - transform-style: preserve-3d - - if (direction == horizontal) or (direction == h) - left: 50% - transform: translateX(-50%) - else if (direction == vertical) or (direction == v) - top: 50% - transform: translateY(-50%) - else - top: 50% - left: 50% - transform: translate(-50%, -50%) - -/** - * Apply a clearfix to an element. - */ -cf() - *zoom: 1 - - &:before, &:after - content: '' - display: table - - &:after - clear: both diff --git a/stylus/jeet/_settings.styl b/stylus/jeet/_settings.styl deleted file mode 100644 index 9cf6bf54..00000000 --- a/stylus/jeet/_settings.styl +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Grid settings. - * All values are defaults and can therefore be easily overidden. - */ - -jeet = { - gutter: 3, - parent-first: false, - layout-direction: LTR, - max-width: 1440px -} diff --git a/stylus/jeet/index.styl b/stylus/jeet/index.styl deleted file mode 100644 index 4c76ed2b..00000000 --- a/stylus/jeet/index.styl +++ /dev/null @@ -1,17 +0,0 @@ -/* Syntax Quick Reference - -------------------------- - column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter) - span(ratio = 1, offset = 0) - shift(ratios = 0, col_or_span = column, gutter = jeet.gutter) - unshift() - edit() - center(max_width = 1410px, pad = 0) - stack(pad = 0, align = false) - unstack() - align(direction = both) - cf() -*/ - -@import '_settings' -@import '_functions' -@import '_grid' diff --git a/test/node-stylus/node.js b/test/node-stylus/node.js new file mode 100644 index 00000000..784d491e --- /dev/null +++ b/test/node-stylus/node.js @@ -0,0 +1,12 @@ +var fs = require('fs'); +var stylus = require('stylus'); +var jeet = require('../../index'); + +var fileIn = fs.readFileSync('test/node-stylus/style.styl', 'utf8'); + +stylus(fileIn) + .use(jeet()) + .render(function (err, css) { + if (err) throw err; + console.log(css) + }); diff --git a/test/node-stylus/style.styl b/test/node-stylus/style.styl new file mode 100644 index 00000000..b149426a --- /dev/null +++ b/test/node-stylus/style.styl @@ -0,0 +1,2 @@ +div + column(1/3) diff --git a/test/playground/index.html b/test/playground/index.html new file mode 100644 index 00000000..2bb80591 --- /dev/null +++ b/test/playground/index.html @@ -0,0 +1,19 @@ + + + + + Jeet Playground + + + + +
1
+
2
+
3
+
4
+
5
+
6
+
7
+ + + diff --git a/test/playground/sass/custom-settings.scss b/test/playground/sass/custom-settings.scss new file mode 100644 index 00000000..66506a22 --- /dev/null +++ b/test/playground/sass/custom-settings.scss @@ -0,0 +1,4 @@ +$jeet: ( + gutter: 2, + max-width: 960px +); diff --git a/test/playground/sass/style.css b/test/playground/sass/style.css new file mode 100644 index 00000000..9bc74f75 --- /dev/null +++ b/test/playground/sass/style.css @@ -0,0 +1,76 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } + +:root { + font-family: sans-serif; } + +* { + background: rgba(0, 0, 255, 0.05); } + +body { + width: auto; + max-width: 960px; + float: none; + display: block; + margin-right: auto; + margin-left: auto; + padding-left: 0; + padding-right: 0; } + body::after { + content: ''; + display: table; + clear: both; } + +div { + display: block; + clear: both; + float: none; + width: 100%; + margin-left: auto; + margin-right: auto; } + div:first-child { + margin-left: auto; } + div:last-child { + margin-right: auto; } + @media (min-width: 700px) { + div { + float: left; + clear: none; + text-align: inherit; + width: 50%; + margin-left: 0%; + margin-right: 0%; } + div::after { + content: ''; + display: table; + clear: both; } + div:nth-child(n) { + float: left; + clear: none; } + div:nth-child(2n) { + float: right; } + div:nth-child(2n + 1) { + clear: both; } } + @media (min-width: 900px) { + div { + float: left; + clear: none; + text-align: inherit; + width: 33.33333%; + margin-left: 0%; + margin-right: 0%; } + div::after { + content: ''; + display: table; + clear: both; } + div:nth-child(n) { + float: left; + clear: none; } + div:nth-child(3n) { + float: right; } + div:nth-child(3n + 1) { + clear: both; } } + +/*# sourceMappingURL=style.css.map */ diff --git a/test/playground/sass/style.scss b/test/playground/sass/style.scss new file mode 100644 index 00000000..12d03b6c --- /dev/null +++ b/test/playground/sass/style.scss @@ -0,0 +1,30 @@ +@import '../../../scss/index'; +@import 'custom-settings'; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + font-family: sans-serif; +} + +@include debug; + +body { + @include center; +} + +div { + @include stack(); + + @media (min-width: 700px) { + @include span(1/2, $cycle: 2); + } + + @media (min-width: 900px) { + @include span(1/3, $cycle: 3); + } +} diff --git a/test/playground/stylus/custom-settings.styl b/test/playground/stylus/custom-settings.styl new file mode 100644 index 00000000..4dc136c5 --- /dev/null +++ b/test/playground/stylus/custom-settings.styl @@ -0,0 +1,4 @@ +$jeet = { + gutter: 2, + max-width: 960px +} diff --git a/test/playground/stylus/style.css b/test/playground/stylus/style.css new file mode 100644 index 00000000..30b1e666 --- /dev/null +++ b/test/playground/stylus/style.css @@ -0,0 +1,90 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +:root { + font-family: sans-serif; +} +* { + background: rgba(0,0,255,0.05); +} +body { + width: auto; + max-width: 960px; + float: none; + display: block; + margin-right: auto; + margin-left: auto; + padding-left: 0; + padding-right: 0; +} +body::after { + content: ''; + display: table; + clear: both; +} +div { + display: block; + clear: both; + float: none; + width: 100%; + margin-left: auto; + margin-right: auto; +} +div:first-child { + margin-left: auto; +} +div:last-child { + margin-right: auto; +} +@media (min-width: 700px) { + div { + float: left; + clear: none; + text-align: inherit; + width: 50%; + margin-left: 0%; + margin-right: 0%; + } + div::after { + content: ''; + display: table; + clear: both; + } + div:nth-child(n) { + float: left; + clear: none; + } + div:nth-child(2n) { + float: right; + } + div:nth-child(2n + 1) { + clear: both; + } +} +@media (min-width: 900px) { + div { + float: left; + clear: none; + text-align: inherit; + width: 33.33333333333333%; + margin-left: 0%; + margin-right: 0%; + } + div::after { + content: ''; + display: table; + clear: both; + } + div:nth-child(n) { + float: left; + clear: none; + } + div:nth-child(3n) { + float: right; + } + div:nth-child(3n + 1) { + clear: both; + } +} diff --git a/test/playground/stylus/style.styl b/test/playground/stylus/style.styl new file mode 100644 index 00000000..f2b4723f --- /dev/null +++ b/test/playground/stylus/style.styl @@ -0,0 +1,24 @@ +@import '../../../styl' +@import 'custom-settings' + +* + margin: 0 + padding: 0 + box-sizing: border-box + +:root + font-family: sans-serif + +debug() + +body + center() + +div + stack() + + @media (min-width: 700px) + span(1/2, $cycle: 2) + + @media (min-width: 900px) + span(1/3, $cycle: 3) diff --git a/tests/functions/align/align.scss b/tests/functions/align/align.scss deleted file mode 100644 index b5ef30e1..00000000 --- a/tests/functions/align/align.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include align($direction: both); -} diff --git a/tests/functions/align/align.styl b/tests/functions/align/align.styl deleted file mode 100644 index e3de067c..00000000 --- a/tests/functions/align/align.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - align(direction: both) diff --git a/tests/functions/center/center.scss b/tests/functions/center/center.scss deleted file mode 100644 index cb0a6bd4..00000000 --- a/tests/functions/center/center.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include center($max-width: 1000px, $pad: 10px); -} diff --git a/tests/functions/center/center.styl b/tests/functions/center/center.styl deleted file mode 100644 index 8c2cbb04..00000000 --- a/tests/functions/center/center.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - center(max-width: 1000px, pad: 10px) diff --git a/tests/functions/cf/cf.scss b/tests/functions/cf/cf.scss deleted file mode 100644 index 19521abe..00000000 --- a/tests/functions/cf/cf.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include cf; -} diff --git a/tests/functions/cf/cf.styl b/tests/functions/cf/cf.styl deleted file mode 100644 index d4e220e6..00000000 --- a/tests/functions/cf/cf.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - cf() diff --git a/tests/functions/column-gutter/column-gutter.scss b/tests/functions/column-gutter/column-gutter.scss deleted file mode 100644 index b56a1754..00000000 --- a/tests/functions/column-gutter/column-gutter.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - margin-right: column-gutter($ratios: 1/5, $g: 5); -} diff --git a/tests/functions/column-gutter/column-gutter.styl b/tests/functions/column-gutter/column-gutter.styl deleted file mode 100644 index 369cea6b..00000000 --- a/tests/functions/column-gutter/column-gutter.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - margin-right: column-gutter(ratios: 1/5, g: 5) diff --git a/tests/functions/column-width/column-width.scss b/tests/functions/column-width/column-width.scss deleted file mode 100644 index ce79b318..00000000 --- a/tests/functions/column-width/column-width.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - margin-right: column-width($ratios: 1/5, $g: 5); -} diff --git a/tests/functions/column-width/column-width.styl b/tests/functions/column-width/column-width.styl deleted file mode 100644 index e992d203..00000000 --- a/tests/functions/column-width/column-width.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - margin-right: column-width(ratios: 1/5, g: 5) diff --git a/tests/functions/column/column.scss b/tests/functions/column/column.scss deleted file mode 100644 index 775c7652..00000000 --- a/tests/functions/column/column.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include column($ratios: 1/5, $offset: 1/5, $cycle: 5, $uncycle: 5, $gutter: 5); -} diff --git a/tests/functions/column/column.styl b/tests/functions/column/column.styl deleted file mode 100644 index 99c25b01..00000000 --- a/tests/functions/column/column.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - column(ratios: 1/5, offset: 1/5, cycle: 5, uncycle: 5, gutter: 5) diff --git a/tests/functions/edit/edit.scss b/tests/functions/edit/edit.scss deleted file mode 100644 index 8cb08048..00000000 --- a/tests/functions/edit/edit.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -@include edit(blue); - -@include edit(blue, $important: true); diff --git a/tests/functions/edit/edit.styl b/tests/functions/edit/edit.styl deleted file mode 100644 index 9819eb80..00000000 --- a/tests/functions/edit/edit.styl +++ /dev/null @@ -1,5 +0,0 @@ -@import 'stylus/jeet/index' - -edit(blue) - -edit(blue, important: true) diff --git a/tests/functions/shift/shift.scss b/tests/functions/shift/shift.scss deleted file mode 100644 index 9f2efbd7..00000000 --- a/tests/functions/shift/shift.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include shift($ratios: 1/5, $col-or-span: column, $gutter: 5); -} diff --git a/tests/functions/shift/shift.styl b/tests/functions/shift/shift.styl deleted file mode 100644 index 9b433713..00000000 --- a/tests/functions/shift/shift.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - shift(ratios: 1/5, col-or-span: column, gutter: 5) diff --git a/tests/functions/span/span.scss b/tests/functions/span/span.scss deleted file mode 100644 index d8338238..00000000 --- a/tests/functions/span/span.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include span($ratio: 1/5, $offset: 1/5, $cycle: 5, $uncycle: 5); -} diff --git a/tests/functions/span/span.styl b/tests/functions/span/span.styl deleted file mode 100644 index db0e5718..00000000 --- a/tests/functions/span/span.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - span(ratio: 1/5, offset: 1/5, cycle: 5, uncycle: 5) diff --git a/tests/functions/stack/stack.scss b/tests/functions/stack/stack.scss deleted file mode 100644 index e85423b9..00000000 --- a/tests/functions/stack/stack.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include stack($pad: 10px, $align: c); -} diff --git a/tests/functions/stack/stack.styl b/tests/functions/stack/stack.styl deleted file mode 100644 index 2c5ef5a1..00000000 --- a/tests/functions/stack/stack.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - stack(pad: 10px, align: c) diff --git a/tests/functions/uncenter/uncenter.scss b/tests/functions/uncenter/uncenter.scss deleted file mode 100644 index a43594b7..00000000 --- a/tests/functions/uncenter/uncenter.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include uncenter; -} diff --git a/tests/functions/uncenter/uncenter.styl b/tests/functions/uncenter/uncenter.styl deleted file mode 100644 index 0ebfb2bc..00000000 --- a/tests/functions/uncenter/uncenter.styl +++ /dev/null @@ -1,5 +0,0 @@ -@import 'stylus/jeet/index' - -.test - uncenter() - diff --git a/tests/functions/unshift/unshift.scss b/tests/functions/unshift/unshift.scss deleted file mode 100644 index bba8d598..00000000 --- a/tests/functions/unshift/unshift.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include unshift; -} diff --git a/tests/functions/unshift/unshift.styl b/tests/functions/unshift/unshift.styl deleted file mode 100644 index bb636cef..00000000 --- a/tests/functions/unshift/unshift.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - unshift() diff --git a/tests/functions/unstack/unstack.scss b/tests/functions/unstack/unstack.scss deleted file mode 100644 index 92480596..00000000 --- a/tests/functions/unstack/unstack.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'scss/jeet/index'; - -.test { - @include unstack; -} diff --git a/tests/functions/unstack/unstack.styl b/tests/functions/unstack/unstack.styl deleted file mode 100644 index 6b56508b..00000000 --- a/tests/functions/unstack/unstack.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'stylus/jeet/index' - -.test - unstack() diff --git a/tests/index.js b/tests/index.js deleted file mode 100644 index f3301199..00000000 --- a/tests/index.js +++ /dev/null @@ -1,158 +0,0 @@ -var compare = require("./util/compare"); -var basePath = __dirname; - -describe("span", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/span/span.scss", - "functions/span/span.styl" - ] - }); - }); -}); - -describe("column", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/column/column.scss", - "functions/column/column.styl" - ] - }); - }); -}); - -describe("shift", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/shift/shift.scss", - "functions/shift/shift.styl" - ] - }); - }); -}); - -describe("unshift", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/unshift/unshift.scss", - "functions/unshift/unshift.styl" - ] - }); - }); -}); - -describe("edit", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/edit/edit.scss", - "functions/edit/edit.styl" - ] - }); - }); -}); - -describe("center", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/center/center.scss", - "functions/center/center.styl" - ] - }); - }); -}); - -describe("uncenter", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/uncenter/uncenter.scss", - "functions/uncenter/uncenter.styl" - ] - }); - }); -}); - -describe("stack", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/stack/stack.scss", - "functions/stack/stack.styl" - ] - }); - }); -}); - -describe("unstack", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/unstack/unstack.scss", - "functions/unstack/unstack.styl" - ] - }); - }); -}); - -describe("align", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/align/align.scss", - "functions/align/align.styl" - ] - }); - }); -}); - -describe("cf", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/cf/cf.scss", - "functions/cf/cf.styl" - ] - }); - }); -}); - -describe("column-gutter", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/column-gutter/column-gutter.scss", - "functions/column-gutter/column-gutter.styl" - ] - }); - }); -}); - -describe("column-width", function() { - it("should match", function() { - return compare({ - basePath: basePath, - files: [ - "functions/column-width/column-width.scss", - "functions/column-width/column-width.styl" - ] - }); - }); -}); diff --git a/tests/util/compare.js b/tests/util/compare.js deleted file mode 100644 index dc68f614..00000000 --- a/tests/util/compare.js +++ /dev/null @@ -1,24 +0,0 @@ -var cssDiff = require("css-diff"); -var path = require("path"); -var chai = require("chai"); -chai.should(); - -module.exports = function(opts) { - var files = opts.files.map(function(path) { - return opts.basePath + "/"+path; - }); - - return cssDiff({ - omit: [ - "comment" - ], - files: files, - visual: true - }).then(function(diff) { - if (diff.different) { - console.log(diff.visual) - } - - return diff.different.should.be.false; - }); -} \ No newline at end of file