@moreonion/foundation-base

MO Foundation Base

Common code to include in Foundation based themes.

You can include the SCSS and JS by importing the needed files.

We recommend to derive your theme from MO Foundation Starterkit.

Structure

This code is intended to be used as extension to ZURB Foundation 6. It provides additional styles and JS for use in themes.

It should be the only module you need to depend on, all its dependencies, including Foundation, are pulled in as dependencies as well.

Additionally, development tools for linting and bundling the code are also pulled via dependencies: Vite, esbuild, ESLint,…

We try to adhere to the conventions behind Foundation 6:

• trying to split additions into "components"
• leveraging the Foundation plugin architecture for JS code
• providing SCSS partials that include only variables/mixins/functions but no actual styles and are therefore safe to be imported

Foundation does not support @use/@forward at the moment, so we can’t either. Except for SASS libraries, all module files have to be imported.

Use

Add this repository as a dependency in the package.json file (using the current version number from package.json, this is just an example):

"dependencies": {
  "@moreonion/foundation-base": "^0.2.0"
}

Then you can use/import individual partials in your SCSS or import all of Foundation and this module together with:

@import "@moreonion/foundation-base/scss/mo-foundation";

Use modules in your JS files:

import { SelectTwo } from '@moreonion/foundation-base'

Additions

Baseline grid

Normalize line-heights, paddings and margins so they fit in a baseline grid.

Adds 2 base variables: $base-font-size, $base-line-height and uses them to set some Foundation variables to fit a bit better in a baseline grid.

Most notably:

• Global styles $global-font-size, $global-lineheight, $global-margin, $global-padding, $global-menu-padding,…
• Typography styles $paragraph-lineheight, $paragraph-margin-bottom,…
• Form styles $form-spacing, $fieldset-padding, $fieldset-margin, $helptext-font-size, $form-label-font-size, $form-label-line-height, $input-font-size, $input-line-height,…

Utils

util.unitless-calc($value, $base: null) overrides Foundation’s util function to fix issues with non-pixel values. When importing mo-foundation it will be used in all consecutive files calling unitless-calc() instead of the original.

The util file includes all Foundation utils that are safe to use in settings – import them instead of the original foundation util file.

Icons

Include some common icons as inline SVG.

Predefined icons:

• Form icons: $bullet-svg (radio), $check-svg (checkbox)
• Loading icons: $oval-loader
• Payment icons:$apple-pay-card-svg, $credit-card-svg, $direct-debit-card-svg, $google-pay-card-svg, $master-card-svg, $paypal-card-svg, $sage-pay-card-svg, $sepa-card-svg, $stripe-card-svg, $visa-card-svg, $paypal-svg, $direct-debit-svg, $fr-regulator-svg, $fr-regulator-original-svg (keeps colors), $giftaid-svg, $secure-payment-svg (lock)
• Social icons: $copy-svg, $email-svg, $facebook-svg, $facebook-messenger-svg, $twitter-svg, $twitter-x-svg, $whatsapp-svg

Mixins:

• icon($svg, $color: null, $size: null): add an SVG icon inline as background image
• mo-loading(): pure CSS animated SVG loading icon
• mo-drupal-ajax-loading(): Drupal AJAX webform loading icon

Components

Mixins

See the respective SCSS partials for available configuration variables.

Extensions to Foundation mixins

Fix some styles where we don’t agree with Foundation or the original implementation hard-codes values instead of using the appropriate variable. Also provide additional variables to make configuration via settings easier.

• mo-typography
• mo-forms
  • mo-form-text
  • mo-form-label
  • mo-form-file
  • mo-form-radio
  • mo-form-checkbox
  • mo-form-helptext
  • mo-form-fieldset
  • mo-form-select
  • mo-form-error
• mo-button
• mo-button-centered
• mo-close-button
• mo-progress-bar

Custom components

• mo-form-group: visually group form elements
• mo-form-steps: form steps with dynamic widths
• mo-flex-form-steps: form steps with equal widths
• mo-loading: a CSS animated loading icon
• mo-drupal-ajax-loading: a loading icon for jquery.webform-ajax-slide.js
• mo-progress-thermometer: a vertical progress bar that looks like a thermometer
• mo-recent-supporters: basic styles for recent supporters list
• mo-share-button: share buttons for channels defined in the $share-icons map
• mo-giftaid: a fancy styling for giftaid related form fields (deprecated, use mo-form-group)
• mo-payment-icons: classes for payment icons (see Icons)
• mo-letter: class for adding a letter like background
• mo-letter-signatures: styles for a list of signatures on a letter component

Styles to use with custom plugins

• mo-cookiebar
• mo-file-upload
• mo-select-two
• sticky-button
• toggle-element
• mo-slideshow

Plugins

See the respective JS modules for configuration options.

• AdaptiveSticky: Make an element sticky in its container when the container is big enough.
• CookieBar: Display a simple cookie bar at the bottom of the page.
• FileUpload: Enable a fancier file upload interface on file inputs.
• SelectTwo: Enable select2 on select elements.
• StickyButton: Make a sticky button visible when another element scrolls out of view.
• ToggleElement: Use one element to show or hide another element on the page.
• Slideshow: Make a slideshow of several elements.

URLs

• Foundation 6 docs https://get.foundation/sites/docs/