Design
The Design module provides the building blocks for creating design systems.
It is included in the Framework shared by Tangible plugins.
For development, the module can run as a standalone plugin. In that case, it adds an admin menu Tangible -> Design, which currently shows a test page for HTML5 elements.
Features
Possible features to be implemented:
-
Design tokens
- 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
Develop
Install
Clone the Git repository, and install dependencies.
git clone [email protected]:tangibleinc/design tangible-design
cd tangible-design
npm install
Start local site
Start the server.
npm run serve
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 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 below.
Build for development
Build files, and watch for changes to rebuild
npm run dev
Press CTRL + C to stop.
Use this command if you're running a local server other than wp-now.
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