Quickstart Guide - 4.x

Usage 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). 

• Components! (3.x)
• Twig Field Value (2.x)
• Twig Tweak (3.x)

This theme and it's build tools require the following local development tools:

• Node.js
• NPM
• NVM

Installation

1. Before installing any node modules, first be sure you are using the defined version of Node for this project. The following command requires the tool NVM Node package manager. If you do not have the recommended version of Node installed on your computer, NVM will prompt you to download and install the correct version -- nvm use
2. Once you are using the recommended version of Node, you may install all Node modules defined in the package.json file -- npm install
3. To correctly utilize Browsersync, copy the .env-example file and rename it .env. Within this file specify both your local website address and default browser.

Configuration

Browser Support: This theme uses PostCSS and Babel to provide cross-browser support for newer CSS and JS features. Both of these tools rely upon the following files for configuration and settings.

• postcss.config.js - This file contains all settings, overrides and extra plugins for the PostCSS module, including PostCSS Preset Env and PostCSS Inline SVG, as detailed below.

• babel.config.js - This file contains all settings, overrides and extra plugins for the Babel module, as well as settings for caching JavaScript in Babel.

• .browserslistrc - This file contains instructions to other modules like Babel and PostCSS on what browsers to support when transpiling frontend assets. Currently, Prototype is supporting the last 4 versions (last 4 versions) of any browser that more than 0.5% of the population is using (> .5%) and am also disregarding Internet Explorer (not IE 10, not IE_mob 10).

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.

• Example: background: svg-load('image.svg', fill=#000000);

Important The new PostCSS Inline SVG replaces the str.scss and svg.scss functionalities. Since this is a breaking change, all references to the past functionalities with inline SVGs will need to be updated to use the new inline SVG policy.

Resources

• PostCSS
• PostCSS Preset Env
• PostCSS Inline SVG
• Babel

SASS Tools

There are several useful SASS functions and mixins available to developers when theming. All the documentation can be found in the respective files, but below is a list of available functions and mixins with examples and where to find them in the partials directory.

It is recommended to use modern SASS standards for importing partials with name-spacing, however, older standards are still available for importing partials.

@use '../partials/partials' as * instead of @import '../partials/partials'
@use '../partials/mixins/breakpoints' as breakpoints instead of @import '../partials/mixins/breakpoints'

Background Image
partials/mixins/_media.scss

Example Usage = @include background-image(center);

Breakpoints
partials/functions/_breakpoints.scss
partials/mixins/_breakpoints.scss
partials/settings/_breakpoints.scss

Example Usage = @include bp-min(small) {}
Example Usage = @include bp-max(large) {}
Example Usage = @include bp-between(small, large) {}

Calculations
partials/functions/_calculations.scss

Example Usage = width: calc-percent(250, 1000);
Example Usage = font-size: calc-rem(24px);

Color
partials/settings/_colors.scss
partials/functions/_colors.scss

Example Usage = background-color: color(primary);

Flex Grid
partials/mixins/_layout.scss

Example Usage = @include flex-grid(3, 'li', 40px, 40px);

Full Width
partials/mixins/_layout.scss

Example Usage = @include full-width();

Heading Sizes
partials/settings/_typography.scss
partials/mixins/_typography.scss

Example Usage = @include heading-size(h1)

Line Height
partials/settings/_typography.scss
partials/functions/_typography.scss

Example Usage = line-height: line-height(heading);

Responsive IFrame
partials/mixins/_media.scss

Example Usage = @include responsive-iframe(16, 9);

Transitions
partials/settings/_animations.scss
partials/functions/_animations.scss

Example Usage = transition: transition(all, 0.6s, easeInOutQuad)

Z-Index
partials/settings/_layout.scss
partials/functions/_layout.scss

Example Usage = z-index: z-index(bottomless-pit);

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 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 multiple levels of menus with submenu buttons, so you can build out the menu using the standard Drupal structure.