The Barayamal website is built using DRY development principles, using Craft CMS to power the backend of the website and Twig/SCSS to combine styles and display frontend templates.
- Request permission to the barayamal3/barayamal-design repository
- Install a Git desktop client such as GitKraken, or Sourcetree
- Clone the ‘default’ branch of the site to your local development workstation
- Follow the instructions in the README.md file for setting up your dev environment
Styles can be amended/created in /web/src/scss/
Scripts can be amended/created in /web/src/js
Twig partials can be amended/created in /templates
You may wish to use the /web/test directory to store temporary development files as these are not committed to the GitHub repository.
Hierarchically, the design system is structured in the following way:
- NETWORK: (Fields for all sites, not used for styles).
- SITE: General styles used across the entire site, including AMP.
- LAYOUT: Site layout styles, not generic like typography, font-size, etc.
- PAGES: Avoided, styles specific to particular pages (e.g. home page).
- MODULES: Individual components within the site.
As HTTP/2 is assumed, assets are only loaded when necessary. The main.css file contains the Site/Layout styles concatenated and minified, whereas the pages and modules files should be loaded in their respective templates. A Twig macro exists for this purpose.
- Once you have confirmed the changes work in your local test environment, commit the change to the GitHub repository
- Request a deployment through Buddy.Works to be pushed to production
- Confirm that changes are working as expected on production
Never used Git before? Learn more here: https://www.atlassian.com/git