-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* VOTE-464 Initialize redesign votegov theme * VOTE-464 resolve phplint errors with new theme * VOTE-414: scaffolding for header * Header refinements * Update text formats for wysiwyg content * Add ordered list to simple text format * VOTE-499 configure main menu VOTE-497 configure sitewide alert * VOTE-415 Configure footer * VOTE-528: state page title scaffolding * revert block placement * VOTE-525: add breadcrumb module * VOTE-418: Homepage template scaffolding (#445) * add nvrf block to state page nodes * fix page title * create registration type template suggestions * satisfy phplint * state page main content scaffolding * votegov theme refinements * Remove unused files from bixal_uswds theme * Update CI/CD and references to new theme * Move drupal_breadcrumb enable to right config dir * testing rolling deploy on test * testing --------- Co-authored-by: Ray Estrada <raymond.estrada@gsa.gov> Co-authored-by: mlloydbixal <amanda.lloyd@gsa.gov> Co-authored-by: Christian Medders - Bixal <88721460+clmedders@users.noreply.github.com>
- Loading branch information
1 parent
a79001b
commit 15b5aff
Showing
99 changed files
with
5,077 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
_core: | ||
default_config_hash: cI-Pl1vK4EZIlVhkBeRB-LcoEoKTUgI5gdJ7paB8cQk | ||
favicon: | ||
use_default: true | ||
features: | ||
comment_user_picture: true | ||
comment_user_verification: true | ||
favicon: true | ||
node_user_picture: true | ||
logo: | ||
use_default: true | ||
time_picker_style: html5_time_picker |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
uuid: 9d925d66-c067-4f97-b040-543c96e23916 | ||
langcode: en | ||
status: true | ||
dependencies: | ||
module: | ||
- node | ||
- system | ||
theme: | ||
- bixal_uswds | ||
_core: | ||
default_config_hash: W00dRxBD1MUkvdrG5GCp5ucRMano3bszsmhxU8gkn4E | ||
id: bixal_uswds_breadcrumbs | ||
theme: bixal_uswds | ||
region: breadcrumb | ||
weight: 0 | ||
provider: null | ||
plugin: system_breadcrumb_block | ||
settings: | ||
id: system_breadcrumb_block | ||
label: Breadcrumbs | ||
label_display: '0' | ||
provider: system | ||
visibility: | ||
'entity_bundle:node': | ||
id: 'entity_bundle:node' | ||
negate: false | ||
context_mapping: | ||
node: '@node.node_route_context:node' | ||
bundles: | ||
article: article | ||
bx_update: bx_update | ||
page: page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
uuid: 2b0e2fb8-f0e6-4673-aa12-57a4701ff740 | ||
langcode: en | ||
status: true | ||
dependencies: | ||
module: | ||
- system | ||
theme: | ||
- bixal_uswds | ||
_core: | ||
default_config_hash: 2G5FjlDbZWWDTiD3NUntBHFuQ4sFrp1VsMH2kKIDB2I | ||
id: bixal_uswds_content | ||
theme: bixal_uswds | ||
region: content | ||
weight: -6 | ||
provider: null | ||
plugin: system_main_block | ||
settings: | ||
id: system_main_block | ||
label: 'Main page content' | ||
label_display: '0' | ||
provider: system | ||
visibility: { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
uuid: fce6a776-e80f-4975-9fe8-8eb25533bcb4 | ||
langcode: en | ||
status: true | ||
dependencies: | ||
theme: | ||
- bixal_uswds | ||
_core: | ||
default_config_hash: ezVrmCOm0kkrQu3AkWTHOJo9DOQPkTDQcpUqjCx3QIQ | ||
id: bixal_uswds_local_tasks | ||
theme: bixal_uswds | ||
region: help | ||
weight: -5 | ||
provider: null | ||
plugin: local_tasks_block | ||
settings: | ||
id: local_tasks_block | ||
label: Tabs | ||
label_display: '0' | ||
provider: core | ||
primary: true | ||
secondary: true | ||
visibility: { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
uuid: 1b705334-213b-40ad-87d1-41af9695f461 | ||
langcode: en | ||
status: true | ||
dependencies: | ||
module: | ||
- system | ||
theme: | ||
- bixal_uswds | ||
_core: | ||
default_config_hash: KIRJdxuSar1WHKnHKfD-tAyAp6I6yTPBfDS9A6tBaTg | ||
id: bixal_uswds_messages | ||
theme: bixal_uswds | ||
region: help | ||
weight: -6 | ||
provider: null | ||
plugin: system_messages_block | ||
settings: | ||
id: system_messages_block | ||
label: 'Status messages' | ||
label_display: '0' | ||
provider: system | ||
visibility: { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
uuid: ece2eb22-ccef-481a-9c95-71e72789e613 | ||
langcode: en | ||
status: true | ||
dependencies: | ||
theme: | ||
- bixal_uswds | ||
_core: | ||
default_config_hash: Y1X3ac5Q9KbzE_7p4d5WMA3P1WtvzLi4I56Cf_pddy8 | ||
id: bixal_uswds_page_title | ||
theme: bixal_uswds | ||
region: help | ||
weight: -3 | ||
provider: null | ||
plugin: page_title_block | ||
settings: | ||
id: page_title_block | ||
label: 'Page title' | ||
label_display: '0' | ||
provider: core | ||
visibility: { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
# Bixal USWDS v3 Theme | ||
|
||
## General methodology | ||
|
||
The idea behind this theme is to present a basis for using USWDS 3 in Drupal while at the same time following all the best practices that USWDS suggests to be followed with the advent of version 3 being released during the summer of 2022. | ||
|
||
## Follow USWDS 3 best practices | ||
|
||
More information is provided below but as a general rule, the idea here is to not write custom CSS unless you are building a custom component. There are few exceptions, for example in `bixal_uswds/src/sass/uswds-overrides` where there were a few cases of there not being a specific setting from USWDS. Even so, these files use USWDS mixins and functions. | ||
|
||
## Use Lando and USWDS Compile! | ||
|
||
It's imperative that you at least use USWDS compile which is in the `package.json` file and for an enhanced experience, use the provided Lando file in the `example-settings` folder. Then, you can run lando gulp and everything should just work. This theme was built with all that in mind so as to give everyone a uniform experience. If you go off the rails and do your own thing with the front-end build, it may be hard to provide support. | ||
|
||
## Get Started | ||
|
||
Once you setup Lando with the Lando file provided in the `example-settings` folder, cd into the theme folder and run `lando gulp`. That is all you need to do to start making CSS and USWDS theme updates. | ||
|
||
When you run lando gulp you will see 2 URLs that come up in terminal with a port number appended. If you visit one of these URLs, you will get automatic reloading on save via BrowserSync. Note that compiling USWDS CSS can take up to 30 seconds. | ||
|
||
## Overview of things to keep in mind. | ||
|
||
Keep theme Sass files lean and simple. That is to say, think before you write custom css. There may be a setting for what you are trying to change. In fact there are hundreds of settings that can be used to override something in USWDS core listed on [the USWDS settings page](https://designsystem.digital.gov/documentation/settings/). And by core, we mean whatever is within `bixal_uswds/node_modules/@uswds/uswds`. | ||
|
||
## The old vs the new method | ||
|
||
The old method in version 2 seemed to be to copy all those sass files from the `node_modules` folder and then modify those as you liked. There were many downsides to that method but now with USWDS 3, we do not need to do that anymore. | ||
|
||
At the heart of the theme is the file, `bixal_uswds/src/sass/_uswds-theme.scss`. This is where you will do any overrides from known settings from the aforementioned USWDS settings page. If you cannot find a setting for what you’d like to override, there are a few options in order of importance. | ||
|
||
- Search the USWDS documentation | ||
|
||
1. [Components overview](https://designsystem.digital.gov/components/overview/) | ||
2. [Design Tokens](https://designsystem.digital.gov/design-tokens/) | ||
3. [Utilities](https://designsystem.digital.gov/utilities/) | ||
4. [Settings](https://designsystem.digital.gov/documentation/settings/) | ||
|
||
If there is not an explicit setting for what you need to do, it may be that the maintainers of USWDS do not want you to change whatever you are trying to change. You may need to check with them to clarify things. | ||
|
||
## Drupal USWDS theming principles | ||
|
||
Here is a list of best practices for theming USWDS within Drupal | ||
|
||
- Use Twig field Value and Twig Tweak within entity templates. By using these theming helper modules, you can remove drupal field templates. This is a good thing as field templates will often get in the way of adhering to USWDS markup. For example, in a Paragraphs template, you might have a field called `field_bx_title_eyebrow`. Using Twig field value, you would write that as `{{ content.field_bx_title_eyebrow | field_value }}`. | ||
|
||
```twig | ||
{% if content.field_bx_title_eyebrow %} | ||
<span class="usa-hero__heading--alt"> | ||
{{ content.field_bx_title_eyebrow | field_value }} | ||
</span> | ||
{{ content.field_bx_title | field_value }} | ||
{% endif %} | ||
``` | ||
|
||
This method generally cuts out Drupal field templates and greatly simplifies the HTML markup as well as reducing the DOM load. | ||
|
||
## Custom USWDS CSS examples | ||
|
||
If you do get to the point of needing to write custom CSS, you will have built in tools to help. You can first search the node modules folder for a mixin or other function to use which will most likely work inside the `bixal_uswds` theme. So for example, let’s say you wanted to change the font size of `usa-hero__heading`. | ||
|
||
Rather than this: | ||
|
||
```css | ||
.usa-hero__heading { | ||
font-size: 22px; | ||
} | ||
``` | ||
|
||
Do one of these below: | ||
|
||
```css | ||
.usa-hero__heading { | ||
@include typeset-h3; | ||
} | ||
``` | ||
|
||
Or: | ||
|
||
```css | ||
.usa-hero__heading { | ||
font-size: font-size($theme-header-font-family, 7); | ||
} | ||
``` | ||
|
||
Or: | ||
|
||
```css | ||
.usa-hero__heading { | ||
font-size: font-size($theme-header-font-family, "lg"); | ||
} | ||
``` | ||
|
||
## Custom USWDS CSS mixin examples | ||
|
||
Here is an example of using USWDS mixins, the example below is a bit nonsensical but it shows off the capabilities of the mixins. | ||
|
||
```css | ||
.my-element { | ||
@include u-display("flex"); | ||
@include u-flex("column", "wrap"); | ||
@include u-border-bottom(2px, "solid", "primary"); | ||
@include u-text("primary"); | ||
@include u-bg("white"); | ||
@include u-padding-top(3); | ||
@include u-margin-bottom(3); | ||
} | ||
``` | ||
|
||
You can view the USWDS documentation for utilities to see more examples at [https://designsystem.digital.gov/utilities/](https://designsystem.digital.gov/utilities/). Each page within this section has documentation for mixins. You can also look in USWDS core for other examples. | ||
|
||
## Resources | ||
|
||
- [USWDS](https://designsystem.digital.gov/) | ||
- [Components overview](https://designsystem.digital.gov/components/overview/) | ||
- [Design Tokens](https://designsystem.digital.gov/design-tokens/) | ||
- [Utilities](https://designsystem.digital.gov/utilities/) | ||
- [Settings](https://designsystem.digital.gov/documentation/settings/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
bixal_uswds.images.small: | ||
label: small | ||
mediaQuery: '' | ||
weight: 0 | ||
multipliers: | ||
- 1x | ||
- 2x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.narrow: | ||
label: narrow | ||
mediaQuery: '(min-width: 480px)' | ||
weight: 1 | ||
multipliers: | ||
- 1x | ||
- 2x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.narrow_plus: | ||
label: narrow | ||
mediaQuery: '(min-width: 640px)' | ||
weight: 1 | ||
multipliers: | ||
- 1x | ||
- 2x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.medium: | ||
label: medium | ||
mediaQuery: '(min-width: 768px)' | ||
weight: 3 | ||
multipliers: | ||
- 1x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.large: | ||
label: wide | ||
mediaQuery: '(min-width: 1024px)' | ||
weight: 5 | ||
multipliers: | ||
- 1x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.large_plus: | ||
label: wide | ||
mediaQuery: '(min-width: 1140px)' | ||
weight: 5 | ||
multipliers: | ||
- 1x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.wide: | ||
label: wide | ||
mediaQuery: '(min-width: 1280px)' | ||
weight: 5 | ||
multipliers: | ||
- 1x | ||
group: bixal_uswds.images | ||
|
||
bixal_uswds.images.wide_plus: | ||
label: ultrawide | ||
mediaQuery: '(min-width: 1400px)' | ||
weight: 7 | ||
multipliers: | ||
- 1x | ||
group: bixal_uswds.images |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
name: Bixal USWDS Theme (version 3.2.0) | ||
type: theme | ||
description: "Custom Drupal theme based on USWDS 3." | ||
package: Core | ||
core_version_requirement: "^9.4 || ^10" | ||
base theme: stable | ||
dependencies: | ||
- drupal:twig_tweak | ||
- drupal:twig_field_value | ||
- drupal:admin_toolbar | ||
|
||
regions: | ||
preface: "Preface" | ||
highlighted: "Highlighted" | ||
breadcrumb: "breadcrumb" | ||
help: "Help" | ||
content: "Content" | ||
sidebar: "Sidebar" | ||
postscript: "Postscript" | ||
footer: "Footer" | ||
no_region: "Blocks for Twig Tweak, hidden, or other purposes" | ||
|
||
## unset any unwanted CSS or JS. | ||
libraries-override: | ||
system/base: false | ||
core/drupal.announce: false | ||
paragraphs/drupal.paragraphs.unpublished: false | ||
olivero/tabs: | ||
js: | ||
js/tabs.js: false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
global: | ||
version: VERSION | ||
css: | ||
theme: | ||
dist/css/styles.css: { minified: true } | ||
js: | ||
dist/js/uswds.min.js: { minified: true } | ||
dist/js/bx-global.js: { minified: true } | ||
dependencies: | ||
- core/once | ||
- core/drupal.active-link | ||
|
||
form_range: | ||
version: VERSION | ||
js: | ||
dist/js/bx-form-range.js: { minified: true } | ||
|
||
# https://github.com/AgnosticUI/a11y-tabs | ||
a11y_tabs: | ||
version: VERSION | ||
js: | ||
dist/vendor/js/a11y-tabs.min.js: { minified: true } | ||
dist/js/bx-a11y-tabs-init.js: { minified: true } | ||
|
||
remote_video: | ||
version: VERSION | ||
js: | ||
dist/js/bx-remote-video.js: { minified: true } |
Oops, something went wrong.