@@ -18,13 +18,13 @@ and versions, file compilation is easy to get started with and compilation itsel
## Requirements
To use this theme you need to install & enable these modules in advance, if they are not you are likely to run into a white screen of death (WOD). Eventually this project will rely on single directory compoents (SDC) within Drupal core, intial release 10.1.x, however we currently use the SDC module.
To use this theme you need to install & enable these modules in advance, if they are not you are likely to run into a white screen of death (WOD). Eventually this project will rely on Single Directory Components (SDC) within Drupal core, initial release 10.1.x, however we currently use the SDC module.
- Single Directory Components (Either the 1.x or 2.x branch works)
- Twig Field Value (2.x)
- Twig Tweak (3.x)
This theme and it's build tools require the following local development tools:
This theme and its build tools require the following local development tools:
@@ -62,9 +62,11 @@ all assets for production. In order to minify and optimize all files and assets,
To update your browserlist usage database: `npx update-browserslist-db@latest`
To see which browsers your build is supporting:
```
npx browserslist
```
**PostCSS Inline SVG**
Prototype now offers an easy way to inject inline SVG's into your CSS. In order to take advantage of the PostCSS Inline SVG plugin, simple utilize the predefined function from this plugin, with path to the SVG and any inline styles that you need to add.
...
...
@@ -110,10 +112,9 @@ Example Usage = `width: percent(250, 1000);`\
Example Usage = `font-size: rem(24px);`
**Color**\
`partials/settings/_colors.scss`\
`partials/functions/_colors.scss`
`partials/settings/_colors.scss`
Example Usage = `background-color: color(primary);`
Example Usage = `background-color: var(--color-primary);`
**Flex Grid**\
`partials/mixins/_layout.scss`
...
...
@@ -130,13 +131,6 @@ Example Usage = `@include full-width();`
Example Usage = `@include font-h2()`
**Font Size & Line Height**\
`partials/mixins/_typography.scss`
Example Usage = `@include font-size(16, 30);`\
Example Usage = `font-size: var(--font-size-24);`\
Example Usage = `line-height: var(--font-line-height-30);`
**Responsive IFrame**\
`partials/mixins/_media.scss`
...
...
@@ -160,17 +154,21 @@ We are taking a new approach with the switch from SASS to CSS variables, and wit
Another feature included with this change is a mixin that allows developers to easily set the font size & line height of an element in one line. An example of this would be `@include font-size(16, 30)` which would set the font size to the --font-size-16 variable and line height to --font-line-height-30. You can also just pass only a font size value and it will default to the line height of the same size. So an example would look like `@include font-size(24)` which would apply a font size and line height of 24px at the largest screen.
With this updated strucuture we are able to easily change the font size and line height of all headings at once. In addition they can be changed at different breakpoints for a more responsive design. These settings can be found in the `global/_typography.scss` file and are easily changed between projects as needed.
With this updated structure we are able to easily change the font size and line height of all headings at once. In addition they can be changed at different breakpoints for a more responsive design. These settings can be found in the `global/_typography.scss` file and are easily changed between projects as needed.
## Menu Structure
Since version 4.x, Prototype ships with an accessible menu that works with Drupal's default menu system out of the box. To utlize for the main menu there are a few steps you will need to take:
Since version 4.x, Prototype ships with an accessible menu that works with Drupal's default menu system out of the box. To utilize for the main menu there are a few steps you will need to take:
By default the Main navigation menu provided by Drupal is used by Prototype. To add links simply navigate to structure -> menus & select the Main navigation menu.
Add links by following the prompts provided for the fields. To add buttons you will need to type `<button>` within the menu link field rather than a link.
This structure is intentional, buttons provide one action which is to open a menu and not act as a link.This menu structure supports mutliple levels of menus with submenu buttons, so you can build out the menu using the standard Drupal structure.
This structure is intentional, buttons provide one action which is to open a menu and not act as a link. This menu structure supports multiple levels of menus with submenu buttons, so you can build out the menu using the standard Drupal structure.
Prototype takes the `menu--main.html.twig` file in `templates/menu` directory and passes it to the `menu--navigation` component which is located in the `components` directory. The `menu-navigation` component is built on the default Drupal menu strucutre and supports multiple levels of menus, submenu, and buttons as well as mobile menu functionality.
There is a base `menu` component that can be used to make any menu component accessible, an example might be adding a utility nav or sidebar navigation. That component does not support a mobile toggle format by default. If you need to add a mobile toggle to a menu component you can use the `menu--navigation` component as a base and add the mobile toggle functionality to your component.
