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.

  1. Request permission to the barayamal3/barayamal-design repository
  2. Install a Git desktop client such as GitKraken, or Sourcetree
  3. Clone the ‘default’ branch of the site to your local development workstation
  4. 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.

  1. Once you have confirmed the changes work in your local test environment, commit the change to the GitHub repository
  2. Request a deployment through Buddy.Works to be pushed to production
  3. Confirm that changes are working as expected on production

Never used Git before? Learn more here: https://www.atlassian.com/git 

Help Needed