This is the theme used for the WordCamp US website. The compiled CSS is loaded by the us.wordcamp.org site, while the child theme itself can be used in a local development environment.
To work on the site:
First, set up a local install using the wordpress-meta-environment, and follow this guide to set up a new wordcamp site.
- Add this repo to your themes directory, activate it, and set up the site
- Create a new branch
- Make your changes in the Sass as needed, see "CSS Structure" for where things live.
- You can run
npm run watch, which will rebuild the CSS as you're working, and also works with livereload (alternately you can runnpm run buildto do a one-time build of the CSS) - Commit your changes, including the compiled CSS
- Create a PR for your change
- Request review from anyone on the web team, or post in #web
Get started by running npm install. This will install the gulp, sass, autoprefixer, stylelint, and livereload dependencies.
We use stylelint with the WordPress Coding Standards for scss enforced (with minor exceptions). With PostCSS + autoprefixer, you don't need to worry about vendor prefixes. Lastly, you can use a livereload browser extension to avoid manual reloads. If you don't want to use a browser extension, turn on SCRIPT_DEBUG to always load the latest CSS file.
The scripts available to you are:
npm run build: Run the linter and build the CSS filenpm run lint: Run the linter by itselfnpm run watch: Run the linter and build the CSS file, watching scss files for changes. Also turns on the livereload server.
If you need to, you can also run npx gulp css (if you're on npm 5.2+), which will compile the CSS, skipping the linter. Please don't do this if you can avoid it 🙂
If you have trouble getting this to run, try installing nvm & running nvm install. This will update your node & npm version to the expected versions.
The CSS structure is based on _s's sass structure. Filenames are intended to be self-explanatory, but here's a general overview. Sections with
When working, we might end up removing entire files, or adding new ones for new features, or totally changing the structure of a file— that's to be expected, since WordCamp.org has added new features & refactored old features.
Abstracts contains all mixins & variables. Variables are used for spacing rhythm, font details, colors, and asset paths. Assets such as SVGs need to be uploaded to wc-us.org since WordCamp.org does not allow SVGs to be uploaded — if you need an account here, ask in #web.
Base styles for the site.
reusable/ folder is used for resuable blocks with specific classes (ex the hero block, is-hero-header, that takes over the header section on a full-width page).
Basic form styles, also includes some overrides for Contact Forms. Specific forms should be styled in their respective site file, unless they repeat across the site.
Links & menu styles.
Self-contained components of CSS. Screen reader text helper class, float clearings, and alignments. You shouldn't need to touch these (except maybe the alignments).
Media, galleries, and captions.
The block color palette colors are re-mapped by the theme to our theme colors. The following table shows which colors are mapped to what theme color. Note that if you use Dark Gray, Vivid Red, or Vivid Cyan Blue, it automatically switches the text color to white.
| Editor Color | Theme Color Name | Theme Color |
|---|---|---|
| Light Pink | #f98386 |
|
| Red | #bd2b2e |
|
| n/a | ||
| n/a | ||
| n/a | ||
| n/a | ||
| Light Blue | #7ea1b8 |
|
| Blue | #003b63 |
|
| Cream | #fffffa |
|
| n/a | ||
| Grey | #303030 |