Working with CSS/LESS/SCSS/JS in Sellvana

Tips & TricksDevelopment

Introduction

This tutorial will show how to add custom JS, CSS, LESS and SCSS files to your Sellvana site.

First, let us start a new custom module. Create a new module within your Sellvana installation:

local/Acme/ExampleJsCss/manifest.yml

modules:
    Acme_ExampleJsCss:
        version: 0.1.0

Enable the module from web admin: Go to System > Installed Modules, find Acme_Example module in quick search field, and click on the toggle on the module row and choose run level REQUESTED

Alternativaly, performing this action from the command line:
$ php shell.php module -e Acme_Example

CSS

Let’s add a CSS file to our module.

Edit your module manifest.yml file, so it looks like this:
local/Acme/ExampleJsCss/manifest.yml

modules:
    Acme_ExampleJsCss:
        version: 0.1.0
        areas:
            FCom_Frontend:
                auto_use: [ layout ]

Now your module will use layout file which you place in
local/Acme/ExampleJsCss/Frontend/layout.yml:

base:
    - view: head
        do:
            - [ css, "@Acme_ExampleJsCss/Frontend/css/example.css" ]

And create the CSS file itself in local/Acme/ExampleJsCss/Frontend/css/example.css

Also, you could specify an external CSS asset, by providing full URL instead of @Acme_ExampleJsCss/...

This CSS will be used on all frontend pages of your site. If you’d like it to be used only on a specific pages, instead of base: use relevant layout name, like /catalog/product:

LESS

Add to manifest.yml file requirement for module that will handle our LESS files:

modules:
    Acme_ExampleJsCss:
        version: 0.1.0
        require: { module: [ FCom_LibLessPhp ] }
        areas:
            FCom_Frontend:
                auto_use: [ layout ]

Now let’s add a LESS stylesheet. Add this line to your layout.yml file:

- [ less, "@Acme_ExampleJsCss/Frontend/less/example.less" ]

so it looks like this now:

base:
    - view: head
        do:
            - [ css, "@Acme_ExampleJsCss/Frontend/css/example.css" ]
            - [ less, "@Acme_ExampleJsCss/Frontend/less/example.less" ]

All required libraries for LESS (and SCSS) compilation are included with Sellvana, and it is not necessary to install them separately on the server and run watchers.

Since Sellvana will generate the LESS file, we need to make sure that less folder is writable for web service on developer machine. The built CSS file will be generated on relevant pages load every time the original LESS file is changed in DEBUG or DEVELOPMENT mode.
The resulting file will be located in the same folder, named example.build.css, to make sure that any references to images or other resources from the file are still valid.

SCSS

Update manifest.yml file to require built-in SCSS library:

require: { module: [ FCom_LibLessPhp, FCom_LibScssPhp ] }

Add this to your layout.yml file:

- [ scss, "@Acme_ExampleJsCss/Frontend/scss/example.scss" ]

SCSS imports are supported, and you can declare custom import folders like this:

- [ scss, "@Acme_ExampleJsCss/Frontend/scss/example.scss", { import: [ Folder1, Folder2 ] } ]

Everything else works exactly as with LESS example.

Javascript

There are few ways to add a Javascript file to your site in Sellvana.

Sellvana core modules use require.js library to modularize JS code, and it is the recommended way.

If you’re adding a file that works with require.js, edit layout.yml file and add:

- [ requireJs, acme.example, "@Acme_ExampleJsCss/Frontend/js/acme.example" ]

If your file is not made for require.js, but you still want to load it this way, you can specify dependencies in layout.yml:

- [ requireJs, acme.example, "@Acme_ExampleJsCss/Frontend/js/acme.example", { deps: [ jquery ] } ]

And create local/Acme/ExampleJsCss/Frontend/js/acme.example.js file:

define(['jquery'], function($) {
    var Export;
    /// ...
    return Export;
});

Using your new JS module is straightforward:

require(['jquery', 'acme.example'], function($, AcmeExample) {
    /// ...
});

You can also add simple JS libraries it to <head> tag. Edit layout.yml file and add:

- [ js, "@Acme_ExampleJsCss/Frontend/js/acme.simple.js" ]

Alternatively, you can add Javascript files to the bottom of the page:

base:
    - view: bottom_scripts
        do
            - [ js, "@Acme_ExampleJsCss/Frontend/js/acme.bottom.js" ]

Wrap up

This concludes quick overview of adding CSS and JS assets to your site. The final module files could look like this:

local/Acme/ExampleJsCss/manifest.yml

modules:
    Acme_ExampleJsCss:
        version: 0.1.0
        require: { module: [ FCom_LibLessPhp, FCom_LibScssPhp ] }
        areas:
            FCom_Frontend:
                auto_use: [ layout ]

local/Acme/ExampleJsCss/Frontend/layout.yml:

base:
    - view: head
        do:
            - [ css, "@Acme_ExampleJsCss/Frontend/css/example.css" ]
            - [ less, "@Acme_ExampleJsCss/Frontend/less/example.less" ]
            - [ scss, "@Acme_ExampleJsCss/Frontend/scss/example.scss" ]
            - [ requireJs, acme.example, "@Acme_ExampleJsCss/Frontend/js/acme.example" ]
            - [ js, "@Acme_ExampleJsCss/Frontend/js/acme.simple.js" ]
   - view: bottom_scripts
           do:
            - [ js, "@Acme_ExampleJsCss/Frontend/js/acme.bottom.js" ]

This concludes the CSS, LESS, SCSS, and JS example tutorial. Will be glad to answer all your questions and comments.

— Boris

comments powered by Disqus