-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #120 from ncoden/docs/meteor-readme
docs: improve standard and Meteor installation instructions
- Loading branch information
Showing
2 changed files
with
66 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,73 @@ | ||
| ## Motion-UI for Meteor | ||
| <p align="center"> | ||
| <a href="https://zurb.com/playground/motion-ui"> | ||
| <img src="https://user-images.githubusercontent.com/9939075/40385796-108879b6-5e08-11e8-8a12-3bbe7d0bc631.png" alt="Motion UI" width="448px" style="max-width:100%;"/> | ||
| </a> | ||
| </p> | ||
|
|
||
|
|
||
|
|
||
| You can use only Sass version with this package. If you need compiled .css version just copy .css and .js files from `dist` folder and add them to your Meteor project. | ||
|
|
||
| ### Installation | ||
| <p align="center"> | ||
| <a href="https://github.com/zurb/motion-ui/blob/docs/installation.md"><b>Install</b></a> | ||
| | <a href="https://zurb.com/playground/motion-ui">Demo</a> | ||
| | <a href="https://github.com/zurb/motion-ui/blob/docs">Documentation</a> | ||
| | <a href="https://github.com/zurb/motion-ui/releases">Releases</a> | ||
| </p> | ||
|
|
||
| ```bash | ||
| $ meteor add zurb:motion-ui | ||
| ``` | ||
| --- | ||
|
|
||
| ### Sass Usage | ||
|
|
||
| In your main .scss file in the Meteor project `@import` the library: | ||
| [](https://travis-ci.org/zurb/motion-ui) | ||
| [](https://cdnjs.com/libraries/motion-ui/) | ||
| [](https://david-dm.org/zurb/motion-ui) | ||
| [](https://david-dm.org/zurb/motion-ui?type=dev) | ||
|
|
||
| ```css | ||
| @import '{zurb:motion-ui}/src/motion-ui'; | ||
| ``` | ||
|
|
||
| Autoprefixer is required to use this library. The library uses unprefixed transition and animation properties, which are then prefixed by Autoprefixer. You can use one of two packages (they will be no autoincluded): | ||
| 💎 The powerful Sass library for creating CSS transitions and animations. Originally integrated into [Foundation for Apps](http://foundation.zurb.com/apps), the code is now a standalone library, used by [Foundation for Sites](http://foundation.zurb.com/sites) and Foundation for Apps. Made by your friends at [ZURB](http://zurb.com). | ||
|
|
||
| - [juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss) (Autoprefixer is just a PostCSS plugin) | ||
| - [seba:minifiers-autoprefixer](https://atmospherejs.com/seba/minifiers-autoprefixer) | ||
| ## Installation | ||
|
|
||
| The library includes two mixins which export all of the default CSS for the framework. This includes: | ||
| Install Motion UI from Atmosphere. | ||
|
|
||
| - Transitions for slide, fade, hinge, scale, and spin | ||
| - Animation classes for spinning, shaking, and wiggling | ||
| - Modifier classes for transition/animation speed, timing, and delay | ||
| ```sh | ||
| meteor add zurb:motion-ui | ||
| ``` | ||
|
|
||
| Then to build with **Sass** | ||
| ```scss | ||
| @import '{zurb:motion-ui}/src/motion-ui'; | ||
|
|
||
| ```css | ||
| @include motion-ui-transitions; | ||
| @include motion-ui-animations; | ||
| ``` | ||
|
|
||
| You can also use special mixins. You'll find more documentation here: [Motion-UI docs](https://github.com/zurb/motion-ui/tree/master/docs) All besides installation details should work the same. | ||
| > This will include all of the Motion UI transition and animation CSS classes. To build transitions, animations, series and more according to your needs, see the [Motion UI documentation](https://github.com/zurb/motion-ui/tree/master/docs). | ||
| > Autoprefixer is required for the installation with Sass. We recommend you to install [juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss) and [seba:minifiers-autoprefixer](https://atmospherejs.com/seba/minifiers-autoprefixer). | ||
| Or to use the equivalent pre-compiled **CSS**, copy or import the Motion UI standalone CSS file `dist/motion-ui.css` or `dist/motion-ui.min.css` in your application. | ||
|
|
||
| To easily transition elements in and out using Motion UI classes, copy or import the Motion UI **JavaScript** library `dist/motion-ui.js` or `dist/motion-ui.min.js` in your application. | ||
|
|
||
| See the [full installation instructions](https://github.com/zurb/motion-ui/tree/master/docs/installation.md) | ||
|
|
||
| ## Demos | ||
|
|
||
| [View live demos on the ZURB Playground.](http://zurb.com/playground/motion-ui) | ||
|
|
||
| ## Documentation | ||
|
|
||
| [View the documentation here.](https://github.com/zurb/motion-ui/tree/master/docs) | ||
|
|
||
| ## Develop Locally | ||
|
|
||
| ```sh | ||
| git clone https://github.com/zurb/motion-ui | ||
| cd motion-ui | ||
| npm install | ||
| ``` | ||
|
|
||
| - Run `npm start` to compile test Sass/JS files, and to build the documentation. | ||
| To make changes to the documentation, edit the files under `docs/src`. | ||
| - Run `npm test` to run the unit tests. | ||
| - Run `npm start dist` to compile distribution files. |