/
Stylus and How to Use It in Infusion
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
- stylus
- css
To be converted
, multiple selections available,
Related content
Infusion Integrations
Infusion Integrations
More like this
UI Options Wordpres Plugin Development Guide
UI Options Wordpres Plugin Development Guide
More like this
Community Workshop and Design Crit Topics from 2023
Community Workshop and Design Crit Topics from 2023
More like this
Community Workshop and Design Crit Topics from 2024
Community Workshop and Design Crit Topics from 2024
More like this
Community Workshop and Design Crit Topics from 2020
Community Workshop and Design Crit Topics from 2020
More like this
Community Workshop and Design Crit Topics from 2015
Community Workshop and Design Crit Topics from 2015
More like this