/
Stylus and How to Use It in Infusion

Stylus and How to Use It in Infusion

Owned by Cindy Li
Last updated: Jun 06, 2023 by Avtar GillVersion comment

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

WhatPeopleEstimateNotes

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)

   

Related content