Design module

The Design module provides the building blocks for creating design systems.

It is a modular, embeddable, customizable library based on a rewrite of Bootstrap v5 to support local styles and scripts. Suitable for use with plugins, such as frontend UI or admin screen where there is already a global stylesheet. It can also be used as a full site styling solution, when loaded with no CSS class prefix.

It is a "Sass first" library, meant for importing parts as needed, using variables to customize design tokens and component styles. Prefer to use Sass variables, mixins, placeholders whose values appear in the compiled stylesheet only when used - instead of CSS variables and classes which can produce a large amount of unused styles, such as automatically generated utility classes, or all colors and their variations.

Changes

• Local styles
  • Prefix all CSS variables
  • Prefix all data- attributes
  • Prefix all classes
  • Parent selector for classes
• Local scripts
  • Wrap all components
  • Pass Base module to factory function instead of importing it, so they can be compiled and loaded individually
  • Pass optional CSS class prefix
  • Use only data- attribute interface for components, instead of jQuery plugins
• Create Reset module from style reboot
• Create Base module for shared styles and script

Features

Possible features to be implemented:

• Design tokens

  Standardized Design Tokens and CSS for a consistent, customizable, and interoperable WordPress future

  • Base Styles and Reset
  • Layout
  • Flexbox & Grid
  • Spacing
  • Sizing
  • Typography
  • Backgrounds
  • Borders
  • Effects
  • Filters
  • Tables
  • Transitions & Animation
  • Transforms
  • Interactivity

• Style primitives - Atoms, components, pallettes, themes

• Design system as a set of variables with sensible defaults, which enable the user to customize while keeping the whole consistent

• Accessible UI patterns

  ARIA Authoring Practices Guide: Patterns and example code

Develop

Prerequisites: Git and Node (minimum version 18)

Install

Clone the Git repository, and install dependencies.

git clone [email protected]:tangibleinc/design tangible-design
cd tangible-design
npm install

Develop

Start a minimal static file server.

npm run start

It serves the build directory at http://localhost:3535. It also builds files (CSS/JS), then watches for changes to rebuild and reload the site.

Press CTRL + C to stop.

Build for production

Build and minify files

npm run build

Update version

The following command runs the script version.js to update the version number in some files.

npm run version

Local WordPress site for development

For local development, the module can run as a standalone WordPress plugin. In that case, it adds an admin menu Tangible -> Design, which currently shows a test page for HTML5 elements.

Start the server.

npm run wp

It opens a browser at http://localhost:8881 and logs you in automatically. Test user is admin with password.

Press CTRL + C to stop.

This method is the easiest way to serve a local WordPress site without installing anything. It uses wp-now and WordPress Playground. You're free to use any other way to run a local server.

For convenience, this command also starts the development build script described above.