Stylus and How to Use It in Infusion

Stylus documentation: http://learnboost.github.io/stylus/

Stylus tutorial: http://learnboost.github.io/stylus/try.html

What is Stylus

Stylus is a CSS pre-processor, that runs in node.js or even a web browser.

Why Use a CSS pre-processor

Easier to maintain
- reduces duplication (e.g. variables, mixins, functions, and etc)
- improved organization

Why Stylus

Runs in node.js
Rich functionality
Flexible syntax

Stylus convention for Infusion

Keep colons, semi-colons and brackets (for readability)

How to prevent grunt from compiling utility Stylus files

Utility Stylus files only contain mixins or functions for other Stylus files to import. Utility files should not be compiled down to CSS, to prevent the grunt task `grunt buildStylus` from compiling them, place these files in a "utils" directory. This is an example of the utility directory.

Steps to convert an infusion CSS to Stylus

Create a "stylus" directory inside of the modules css directory and place all stylus files in the "stylus" directory
If utility Stylus files are needed, create a "utils" sub-directory within the "stylus" directory and place the utils files within
To compile to CSS, from the command line run grunt buildStylus. This will place the compiled CSS files directly in the parent css directory

Example Structure

component
- css
  - stylus
    - utils

To be converted

What	People	Estimate	Notes
FLUID-5560 - Getting issue details... STATUS Inline Editor - https://github.com/fluid-project/infusion/tree/master/src/components/inlineEdit/css
FLUID-5561 - Getting issue details... STATUS Pager - https://github.com/fluid-project/infusion/tree/master/src/components/pager/css
FLUID-5562 - Getting issue details... STATUS Reorderer - https://github.com/fluid-project/infusion/tree/master/src/components/reorderer/css
FLUID-5570 - Getting issue details... STATUS Table of contents - https://github.com/fluid-project/infusion/tree/master/src/components/tableOfContents/css
FLUID-5571 - Getting issue details... STATUS Uploader - https://github.com/fluid-project/infusion/tree/master/src/components/uploader/css
FLUID-5572 - Getting issue details... STATUS Framework core - https://github.com/fluid-project/infusion/tree/master/src/framework/core/css
FLUID-5573 - Getting issue details... STATUS Progressive enhancement - https://github.com/fluid-project/infusion/tree/master/src/framework/enhancement/css
FLUID-5574 - Getting issue details... STATUS Overview Panel - https://github.com/fluid-project/infusion/tree/master/src/components/overviewPanel/css (relatively difficult involving themes)

Fluid