INSTALLATION
- Before you begin, make sure all the requirements are fulfilled.
- You will find example commands for Linux Ubuntu that you can adapt to your OS.
1. Ara theme:
As Ara is still a sandbox project, there is no releases available for download on drupal.org. An alternate method to get it is cloning with git:
cd YOUR/DRUPAL/PATH/themes
git clone --branch 8.x-1.x https://git.drupal.org/sandbox/ahwebd/2668242.git ara
npm packages:
Install the needed npm packages locally inside ara directory:
cd ara
npm install
This will create a new directory "node_modules" inside ara.
Configuration for gulpfile.js:
Make a copy of "ara/example.gulpfile-config.json" inside ara and rename it to "gulpfile-config.json". Open it and configure browser-sync to point to your development site:
"browserSync" : {
"proxy" : "mysite.dev"
},
Change proxy value to your dev site url.
Libraries and frameworks:
Inside ara directory:
# Create lib directory:
mkdir lib
cd lib
# Install bourbon and neat:
bourbon install
neat install
# Install LumX:
mkdir lumx
cd lumx
bower install lumx
cd ..
# Install Polymer elements:
mkdir polymer
cd polymer
bower install PolymerElements/iron-elements PolymerElements/paper-elements PolymerElements/gold-elements
cd ..
Compile assets:
Run gulp inside ara directory:
gulp
To stop gulp press "Ctrl+Shift+c".
2. Subthemes:
Ara is designed as a base theme to hold functions and logic related code, and you need to create subtheme(s) that will hold site specific settings and theming.
If you have multiple sites and in order to avoid duplicating common settings it is recommended to create a subtheme that will hold these common settings and serve as a base theme for site specific subthemes.
To facilitate creating Ara subthemes, example subthemes are provided: Bouquet and Tulip.
Bouquet is a subtheme of Ara, and Tulip is a subtheme of Bouquet.
As these subthemes are still sandbox projects, there is no releases available for download on drupal.org. An alternate method to get them is cloning with git:
cd YOUR/DRUPAL/PATH/themes
git clone --branch 8.x-1.x https://git.drupal.org/sandbox/ahwebd/2668260.git bouquet
git clone --branch 8.x-1.x https://git.drupal.org/sandbox/ahwebd/2668262.git tulip
These subthemes serve as examples and guides, so don't use them directly. Instead make copies with different names and edit with your own settings. This will avoid loosing your custom settings when you update the provided example subthemes.
Do the following:
Make copies of bouquet and tulip and rename files:
cd MY/DRUPAL/PATH/themes
cp -r bouquet mybouquet
cd mybouquet
mv bouquet.info.yml mybouquet.info.yml
mv bouquet.libraries.yml mybouquet.libraries.yml
mv bouquet.theme mybouquet.theme
Open mybouquet.info.yml and change all instances of "bouquet" to "mybouquet"
Make a copy of "ara/example.gulpfile-config.json" inside mybouquet and rename it to "gulpfile-config.json". Open it and configure browser-sync to point to your development site:
"browserSync" : {
"proxy" : "mysite.dev"
},
Create a symbolik link to node_modules:
ln -s /YOUR/DRUPAL/PATH/themes/ara/node_modules mybouquet/node_modules
Run gulp inside mybouquet directory:
gulp
Repeat the above steps with tulip.
Now make "mytulip" your active theme.