CSS and SASS style assets are supported out-of-the-box.

Raw custom CSS .css files are stored in the folder [project]/assets/raw/css, CSS files in this folder will be concatenated into one file called app.css and stored into [..]/assets/css when the compilation process is executed (read about gulp compilation).

Subfolders under [...]/assets/raw/css will have all its CSS files concatenated into a single file with the same name and stored into [..]/assets/css, for example, all files in the subfolder [...]/assets/raw/css/admin will be concatenated into [..]/assets/css/admin.css.

Create command

php ayuco create css:{filename}

Command sample:

php ayuco create css:my-app

The example above will create the file assets/raw/css/my-app.css.

SASS .sass and SCSS .scss files are stored in the folder[project]/assets/raw/sass, these files are compiled into CSS files and stored in the folder [project]/assets/css/ when the compilation process is executed (read about gulp compilation).

Create command

php ayuco create sass:{filename} {master}

php ayuco create scss:{filename} {master}

Command samples:

php ayuco create sass:master

The example above will create the master file assets/raw/sass/master.sass.

php ayuco create scss:header master

The example above will create the partial file assets/raw/sass/parts/_header.scss and will import in into master.scss. Ayuco will create the master file as well if it doesn't exist.

Recommended SASS/SCSS structure

It is recommended to have a master and multiple partial SASS files for a decentralized styling, this will allow having files focused on styling a specific content and it will improve team development by decreasing repository conflicts.

+ /assets
|-- /raw
|----- /sass
|-------- master.scss
|-------- /parts
|---------- _header.scss
|---------- _footer.scss
|---------- _widgets.scss

The example above shows a suggested SASS folder structure, with a master file (master.scss) and partial ones. The content of the master file will look like:

/*!
 * Master style file.
 */
@import 'parts/header';
@import 'parts/footer';
@import 'parts/widgets';

3rd party developed style files (vendor styles) should be added to the project as a dependency using NodeJS (this will follow the dependency injection design pattern).

The majority of vendor styles are already supported on NodeJS. For example, to include Font Awesome in the project run its install command:

npm install font-awesome --save

The example above, will download the dependency and store it inside the folder [project]/node_modules.

Add a dependency style as an asset

Downloaded dependencies need to be copied inside the [project]/assets/css folder to be accessible by the framework.

Custom gulp tasks must be included inside the file gulpfile.js to transfer vendor files inside the assets folder.

// --------------
// START - CUSTOM TASKS

gulp.task('vendorcss', async function() {
    return gulp.src([
            './node_modules/font-awesome/css/font-awesome.min.css',
            '[other-vendor-file].css',
            '[other-vendor-file].css',
        ])
        .pipe(gulp.dest('./assets/css'));
});

In the example above, "Font Awesome" and other vendor files are copied by the custom gulp task vendorcss.

Custom gulp tasks must be added to the file [project]/package.json so these are registered and taken into account during compilation and deployment, see the example below:

{
  "...",
  "prestyles": [
    "sass",
    "vendorcss"
  ],
  "..."
}

Additional style languages, such as LESS or Stylus, can be used with the framework as long as they have gulp support.

A Gulp dependency must be added through NodeJS. For example, to use LESS, the following command must be run:

npm install gulp-less --save-dev

Custom gulp compilation tasks must be included inside the file gulpfile.js, see the example below:

// ...
var less = require('gulp-less');

// --------------
// START - CUSTOM TASKS
gulp.task('less', async function () {
    return gulp.src('./assets/raw/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./assets/raw/css'));
});

Custom gulp compilation tasks must be added to the file [project]/package.json, see the example below:

{
  "...",
  "prestyles": [
    "sass",
    "less"
  ],
  "..."
}