Get ready to write some CSS. Here's a crash course on contributing to the front-end of DoSomething.org. Be sure to check out our JavaScript and SCSS code style guides as well.

Components

Forge is our pattern library. We use it as a foundation for building consistent interfaces amongst all of our products. The latest version of Forge is included in the DoSomething app using NPM whenever your local environment is built.

You should be aware of the patterns available to you in Forge and reuse them whenever possible instead of re-inventing the wheel. You can browse the pattern library by going to forge.dosomething.org.

Paraneue is our app-specific Drupal theme. It lives in lib/themes/dosomething/paraneue_dosomething. It contains all the styles, scripts, and templates that are specific to the main Drupal site.

Workflow

Running ds assets --watch from within your Vagrant box will install dependencies, compile stylesheets and scripts, and watch for changes to re-build on demand.

If you want to make a production build (with minified code), run ds assets.

SCSS Development

Forge's helper mix-ins and variables are available for your use when theming. We also use Suzy to make building layouts on a fluid grid easy.

Each "feature" should live in its own partial in the paraneue_dosomething/scss/content directory. A feature refers to a specific section of the site, like campaigns or the auth flow. In many cases, these will be the node type of the page you're looking to theme. Be sure to add your SCSS partial to app.scss to include it for compilation.

We write our styles mobile-first. This means that we write the base styles required for a mobile device, and then progressively layer additional styles onto the element using media queries. You can use the media mix-in to fit to our breakpoints.

JavaScript development

We compile client-side modules using Webpack. This lets us intelligently manage dependencies both with third-party code (installed and versioned using NPM) and our own codebase.