If you’re looking to add some flair to your frontend projects, meet Gerillass! This library, built on top of Sass (Syntactically Awesome Style Sheets), offers flexibility that helps accelerate your creative process. Inspired by popular frameworks like Bourbon and Bootstrap, Gerillass is packed with utilities tailored to common challenges developers face.

Table of Contents

• Dart Sass Upgrade
• Installation
• Namespace Usage
• Vendor Prefix Support
• Experimenting
• Testing
• Contribution
• License
• Additional Info

Dart Sass Upgrade

With version 1.3.0, Gerillass bids farewell to LibSass. Due to deprecation, it is crucial to switch to Dart Sass to continue using Gerillass effectively. If you’re facing issues with Gerillass v1.3.0, ensure you’re running Dart Sass; otherwise, revert to earlier versions.

Installation

To get started with Gerillass, you can easily install it via npm:

npm install gerillass --save-dev

You can import Gerillass with the node_modules path as follows:

@import node_modules_path/gerillass/scss/gerillass;

If you’re using an eyeglass setup, simply import without specifying the node_modules path:

@import gerillass;

Node.js Installation

If you’re working within a Node project, add Gerillass as a dependency using:

npm install gerillass --save-dev

You can also use Yarn:

yarn add gerillass

Using with React.js

Simply import Gerillass at the beginning of your App.scss file without using the node_modules path:

@import gerillass;

Using with Gulp

Add a new Gulp task as shown below, or include includePath: [node_modules/gerillass/scss] in your existing task:

function sassify(done) {
    return (
        src('assets/sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded',
            includePaths: ['node_modules/gerillass/scss'],
        }).on('error', sass.logError))
        .pipe(dest('assets/css'))
    );
    done();
}

Including Gerillass in your Gulp project:

@import gerillass;

Using with Grunt

Edit your Gruntfile.js to integrate Gerillass by adding loadPath: [node_modules/gerillass/scss] inside your Sass options:

sass: {
    dist: {
        options: {
            style: 'expanded',
            loadPath: ['node_modules/gerillass/scss']
        },
        files: {
            'main.css': 'main.scss'
        }
    }
}

Including Gerillass in your Grunt project:

@import gerillass;

Cloning the Repository from Github

Clone the repository locally:

git clone https://github.com/selfishprimate/gerillass.git

Alternatively, add Gerillass as a submodule in your Git project:

git submodule add https://github.com/selfishprimate/gerillass.git

Including in your project:

@import folder_path/gerillass/scss/gerillass;

Namespace Usage

You can use Gerillass with or without the gls- namespace. Using the namespace is optional, but it’s highly recommended to avoid conflicts with other Sass libraries or frameworks.

Vendor Prefix Support

Gerillass currently does not provide built-in vendor prefix support due to the prevalence of bundlers like Gulp and Webpack. Consider using the Autoprefixer tool for this purpose.

Experimenting

Experimentation with Gerillass is a breeze. If you’re already processing Sass files, download the Gerillass Sass library and integrate it into your project, or get started with Gerillass Play, a Gulp-based playground for quick setup.

Just remember, you’ll need Node.js and Gulp CLI installed to work with Gerillass Play.

Testing

Gerillass includes a unit-testing module called True for easy testing. Explore existing test examples in the test folder and create your unit tests. Run your tests with the following command:

npm test

Contribution

Check the contribution details if you wish to contribute to the Gerillass library!

License

Gerillass is licensed under the Apache License, Version 2.0. For more details, consult the license content.

Additional Info

This project is crafted with the loving music of Anna German and dedicated to James Williamson, a commendable web educator. Curious about his work? Check out his legacy blog page or watch his lectures on LinkedIn Learning.

Troubleshooting

If you encounter problems, check your configuration, make sure dependencies are correctly installed, and verify your import paths. Ensure you are using Dart Sass since LibSass support is deprecated. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.