Styles
CSS and SASS style assets are supported out-of-the-box.
CSS
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
.
Why not use SASS?
The framework comes out-of-the-box with SASS, it is encouraging to use it instead of raw CSS style classes.SASS and SCSS
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}
{filename} | The name of a master file (see description below) or the name of a part/partial file. |
{master} | The name of the master file to import into. |
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';
Vendor Styles
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 Language
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" ], "..." }