diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c6c8b36 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2c9087c --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +node_modules/ +bower_components/*/ +.sass-cache/ +.idea/ + +.env +.DS_Store +.ruby-gemset +.ruby-version + +log/*.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..3853d28 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# employer-style-grid + +A stack-agnostic SASS library providing a framework-agnostic, [Neat](http://neat.bourbon.io/)-based grid system intended for the Employer experience. + +### Consumption + +Install with Bower (from an appropriate repository) + +```sh +$ bower install employer-style-grid +``` + +Now, import `sass/grid` after [Neat](http://neat.bourbon.io/) Helpers, and after a framework like [Bourbon](http://bourbon.io/) in your main `application.scss`. Then, import Neat. For example: + +```scss +@import 'bower_components/bourbon/app/assets/stylesheets/bourbon'; +@import 'bower_components/neat/app/assets/stylesheets/neat-helpers'; +@import 'bower_components/employer-style-grid/sass/grid'; +@import 'bower_components/neat/app/assets/stylesheets/neat'; + +@import 'your-app'; +``` + +You can now use [Neat mixins](http://thoughtbot.github.io/neat-docs/latest/) and the provided breakpoints (see `_grid-settings.scss`). + +### What's included + +At the moment, only uncompiled SASS source files are available for consumption. That means your application will need to perform the precompilation, whether it be through Gulp, Grunt, Rails asset pipeline, etc. Do note that `employer-style-grid` simply wraps around, and depends upon [Neat](http://neat.bourbon.io/) to actually power its grid system. + +### Future + +- Implement build process to compile CSS into `dist` for easy consumption diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..27eb90b --- /dev/null +++ b/bower.json @@ -0,0 +1,34 @@ +{ + "name": "employer-style-grid", + "version": "0.0.1", + "authors": [ + "Content Enablement " + ], + "description": "A stack-agnostic SASS library providing a framework-agnostic, Neat-based grid system intended for the Employer experience", + "keywords": [ + "cb", + "careerbuilder", + "employer", + "platform", + "style", + "styling", + "grid", + "sass", + "css" + ], + "private": true, + "main": [ + "sass/_grid.scss", + "sass/_grid-settings.scss" + ], + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "neat": "~1.7.2" + } +} diff --git a/dist/.keep b/dist/.keep new file mode 100644 index 0000000..e69de29 diff --git a/sass/_grid-settings.scss b/sass/_grid-settings.scss new file mode 100644 index 0000000..b7e1a01 --- /dev/null +++ b/sass/_grid-settings.scss @@ -0,0 +1,15 @@ +// Widths +$mobile-width: em(480); +$small-tablet-width: em(720); +$large-tablet-width: em(960); +$desktop-width: em(1050); + +// Breakpoints +$mobile: new-breakpoint(max-width $mobile-width, 4); +$small-tablet: new-breakpoint(min-width $small-tablet-width max-width $large-tablet-width - 1, 8); +$large-tablet: new-breakpoint(min-width $large-tablet-width max-width $desktop-width - 1, 12); +$tablet: new-breakpoint(min-width $small-tablet-width max-width $desktop-width - 1, 12); +$desktop: new-breakpoint(min-width $desktop-width, 16); + +$small-tablet-down: new-breakpoint(max-width $large-tablet-width, 8); +$tablet-down: new-breakpoint(max-width $desktop, 8); diff --git a/sass/_grid.scss b/sass/_grid.scss new file mode 100644 index 0000000..8b82f47 --- /dev/null +++ b/sass/_grid.scss @@ -0,0 +1 @@ +@import '_grid-settings';