zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-21 10:16:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1871 from cisagov/bem-documentation

Browse source 
Update documentation on CSS BEM naming
This commit is contained in:
Rachid Mrad 2024-03-22 18:11:19 -04:00 • committed by GitHub
commit 7bb3439c3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/developer/README.md
View file

@ -240,7 +240,7 @@ type
docker-compose run owasp
```
# Images, stylesheets, and JavaScript
## Images, stylesheets, and JavaScript
We use the U.S. Web Design System (USWDS) for styling our applications.
@ -252,7 +252,7 @@ Assets are stored in `registrar/assets` during development and served from `regi
We utilize the [uswds-compile tool](https://designsystem.digital.gov/documentation/getting-started/developers/phase-two-compile/) from USWDS to compile and package USWDS assets.
## Making and viewing style changes
### Making and viewing style changes
When you run `docker-compose up` the `node` service in the container will begin to watch for changes in the `registrar/assets` folder, and will recompile once any changes are made.
@ -263,7 +263,11 @@ Within the `registrar/assets` folder, the `_theme` folder contains three files i
You can also compile the **Sass** at any time using `npx gulp compile`. Similarly, you can copy over **other static assets** (images and javascript files), using `npx gulp copyAssets`.
## Upgrading USWDS and other JavaScript packages
### CSS class naming conventions
We use the [CSS Block Element Modifier (BEM)](https://getbem.com/naming/) naming convention for our custom classes. This is in line with how USWDS [approaches](https://designsystem.digital.gov/whats-new/updates/2019/04/08/introducing-uswds-2-0/) their CSS class architecture and helps keep our code cohesive and readable.
### Upgrading USWDS and other JavaScript packages
Version numbers can be manually controlled in `package.json`. Edit that, if desired.