Permalink
Browse files

Merge pull request #585 from FNGR2911/patch-1

Update install.rst with gulp instructions
  • Loading branch information...
2 parents c360b5f + ca4f2aa commit 135fc87c0a6a515f969a96dd1ff58f7ec6b7985a @mirisuzanne mirisuzanne committed on GitHub Jun 10, 2016
Showing with 71 additions and 45 deletions.
  1. +71 −45 docs/install.rst
View
@@ -59,52 +59,61 @@ If you add Susy to an existing Rails app, follow the steps above, but use bundle
# command line
bundle update
-Compass
--------
-If you want to use Susy with `Compass`_,
-start by `installing Compass`_.
+Webpack and npm
+---------------
-Create a new Compass project:
+Install using npm:
.. code-block:: bash
- # command line
- compass create --using susy <project name>
+ npm install susy sass-loader --save-dev
-Alternatively, add Susy to a current project
-.. code-block:: bash
+Make sure you have `sass-loader <https://github.com/jtangelder/sass-loader>`_ enabled in your `webpack` configuration:
- # command line
- compass install susy
+.. code-block:: js
-.. _Compass: http://compass-style.org/
-.. _installing Compass: http://compass-style.org/install/
+ // webpack.config.js
+ loaders: [
+ {
+ test: /\.scss$/,
+ loader: 'style!css!sass'
+ }
+ ]
-Bower
------
+Start using Susy:
-.. code-block:: bash
+.. code-block:: sass
- # command line
- bower install susy --save
+ /* app.scss */
+ @import "~susy/sass/susy";
-This will add the Susy repository to your ``bower_components`` directory or
-create a ``bower_components`` directory for you.
-.. code-block:: scss
+Gulp
+----
- // Import Susy
- @import "bower_components/susy/sass/susy";
+Install susy with npm:
-You can also import Susyone.
+.. code-block:: bash
-.. code-block:: scss
+ npm install susy --save-dev
- // Import Susy
- @import "bower_components/susy/sass/susyone";
+
+Add Gulp Task:
+
+.. code-block:: js
+
+ // gulpfile.js
+ gulp.task('sass', function() {
+ return gulp.src('scss/*.scss')
+ .pipe(sass({
+ outputStyle: 'compressed',
+ includePaths: ['node_modules/susy/sass']
+ }).on('error', sass.logError))
+ .pipe(gulp.dest('dist/css'));
+ });
Grunt (and Yeoman)
@@ -153,35 +162,52 @@ Again, assuming you've already installed Susy,
it will now be added to the project.
-Webpack and npm
----------------
-
-Install using npm:
+Bower
+-----
.. code-block:: bash
- npm install susy sass-loader --save-dev
+ # command line
+ bower install susy --save
+This will add the Susy repository to your ``bower_components`` directory or
+create a ``bower_components`` directory for you.
-Make sure you have `sass-loader <https://github.com/jtangelder/sass-loader>`_ enabled in your `webpack` configuration:
+.. code-block:: scss
-.. code-block:: js
+ // Import Susy
+ @import "bower_components/susy/sass/susy";
- // webpack.config.js
- loaders: [
- {
- test: /\.scss$/,
- loader: 'style!css!sass'
- }
- ]
+You can also import Susyone.
+.. code-block:: scss
-Start using Susy:
+ // Import Susy
+ @import "bower_components/susy/sass/susyone";
-.. code-block:: sass
- /* app.scss */
- @import "~susy/sass/susy";
+Compass
+-------
+
+If you want to use Susy with `Compass`_,
+start by `installing Compass`_.
+
+Create a new Compass project:
+
+.. code-block:: bash
+
+ # command line
+ compass create --using susy <project name>
+
+Alternatively, add Susy to a current project
+
+.. code-block:: bash
+
+ # command line
+ compass install susy
+
+.. _Compass: http://compass-style.org/
+.. _installing Compass: http://compass-style.org/install/
Manual Start

0 comments on commit 135fc87

Please sign in to comment.