[m3]

m3. Advanced typography framework.

m3-one.vercel.app · Report bug · Request feature · Twitter · Medium · npm

Documentation

Table of contents

• Overview
• Quick Start
• Status
• What's included
• Getting started
• Features and benefits
• Documentation
• m3 Palette
• Contributing
• Community
• Maintainers
• License

Overview

m3 (v2.0.0) currently focuses on making typography easier for developers to layout content effectively. It also comes with a guided type system to take away the pain of choosing type layout.

Quick start

Several quick start options are available:

• Download the latest release..
• Clone the repo: git@github.com:guylepage3/m3.git.
• Install with npm: npm i m3-one.
• Install with yarn: yarn add m3-one.

Status

What's included

Within the download you'll find the following directories and files. m3's Scss variables and mixins are all imported to m3.scss. You'll see something like this:

m3/
└── scss/
    ├── _m3-color.scss
    ├── _m3-mixins.scss
    ├── _m3-spacing.scss
    ├── _m3-type-scaling.scss
    ├── _m3-type.scss
    ├── _m3-reboot.scss
    ├── _variables.scss
    ├── m3.scss
    └── mixins/
        └── _lists.scss

This simple structure allows you to simply import the m3.scss file directly into any project after your other UI framework imports and/or before your project's custom styling.

Getting started

Quickly start by using the one line NPM install.

npm i m3-one

@import "node_modules/m3-one/scss/m3.scss";

alternatively, you can import css directly

@import "node_modules/m3-one/css/m3.css";

Import the m3.scss file directly into any project after other front-end framework imports and/or before your project's custom styling.

Features and benefits

• m3 computes and scales type and spacing, making it much easier to layout content.
• m3 can easily be added in addition to any other frontend framework such as Boostrap, Tailwind CSS, Material UI, etc.
• m3 allows developers to quickly design and build quality user interfaces with little effort.
• Both Web3 compatible.
• Easy install and update via NPM and PNPM.

Typography

• m3 adds functional typography that implements complex type scaling with responsive & ratio scaling for superior readability.
• Duo type functionality
  • There are two types of typography in m3:
    1. Regular Typography for interface design and layout within graphical user interfaces. ie. List of songs, play button, settings.
    2. Editorial Typography for lengthier content sets of copy that are for written communications. ie. promotional pages, blog posts, documentation, etc.
• Although m3 is primarily used as an interface framework, developers can use the advanced type options and simply apply a *-editorial suffix to type classes to get highly functional editorial typography. Learn more.
• Responsive Ratio Type Scaling
• Customizable ratioing
• Comes with the following default ratios to choose from;
  • minor-second (1.067)
  • major-second (1.125)
  • minor-third (1.2)
  • mid-third (1.215)
  • major-third (1.25)
  • perfect-fourth (1.333)
  • augmented-fourth (1.414)
  • perfect-fifth (1.5)
  • golden-ratio (1.618)
• Responsive type scaling for extra small, small and large devices.
• No need to adjust font-size, line-height, margins, spacing.

Spacing

• Vertical Rhythm Spacing
• Easy to implement.
  • margin m-*
  • padding p-*
• Apply spacing to typography and anywhere else needed.

m3 Palette

m3 Palette (Coming soon!) is an open source Figma template including Style Guide and Symbol resources for rapid prototyping in Figma. The library provides access to m3 advanced typography, scaling, spacing, styling, components, and more.

Documentation

View the Documentation for detailed instructions on how to use and customize m3.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All code should conform to the Code Guidelines.

Community

Get updates on development and chat with the project maintainers and community members.

• Star this repo
• Follow @guylepage3 on Twitter.

Maintainers

Guy Lepage

• https://twitter.com/guylepage3
• https://github.com/guylepage3

License

By contributing your code, you agree to license your contribution under the MIT License.