@universelabs/meta

Meta

Meta is an open source UI framework for both web2 & web3 applications.
universe.engineering

Report bug · Request feature · Twitter · Medium · Slack · npm

·

Documentation · Meta UI (Sketch Library)

Table of contents

• Overview
• Quick Start
• Status
• What's included
• Getting started
• Features and benefits
• Documentation
• Meta UI – Sketch Library Resource
• Contributing
• Community
• Maintainers
• License

Overview

Currently Meta focuses on simplifying and making typography easier for developers to design effective content. It also comes with a broad range color system to take away the pain of choosing colors.

Quick start

Several quick start options are available:

• Download the latest release..
• Clone the repo: [e-mail]:universelabs/meta.git.
• Install with npm: npm i @universelabs/meta.
• Install with yarn: yarn add @universelabs/meta.

Status

What's included

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

@universelabs/meta/
└── scss/
    ├── _meta-color.scss
    ├── _meta-mixins.scss
    ├── _meta-spacing.scss
    ├── _meta-type-scaling.scss
    ├── _meta-type.scss
    ├── _meta-reboot.scss
    ├── _variables.scss
    ├── meta.scss
    └── mixins/
        └── _lists.scss

This simple structure allows you to simply import the meta.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 @universelabs/meta

@import "node_modules/@universelabs/meta/scss/meta.scss";

alternatively, you can import css directly

@import "node_modules/@universelabs/meta/css/meta.css";

Import the meta.scss file directly into any project after your other UI framework imports and/or before your project's custom styling. (The following is an example of how to import via React.js).

Most classname convention is dirived from the Bootstrap framework so you should feel right at home.

Features and benefits

• Meta is framework and language agnostic.
• Meta can easily be added in addition to any other frontend framework such as Boostrap, Material UI, etc.
• Meta allows developers to quickly design and build quality user interfaces with little effort.
• Unlike a lot of UI frameworks, Meta's wide scope of typographic and color variables, empower the creation of unique interfaces.
• Web3 compatible.
• Easy install and update via NPM.

Color

• Full-spectrum Color System
• Color theming.
• WCAG accessibility compliant.
• Wide gamut color range.
• Scalable.
• Over 200 color hues.
• Non-breakable.
• Inspired by Palx and Open Color, Meta's Color System guides developers through fool proof color theming while providing them with a wide gamut of colors to choose from.
• No additional color tools necessary.

Full color list coming soon...

Type

• Meta 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 Meta:
    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 Meta 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.

Meta UI

Meta UI is an open source Sketch Shared Library including Style Guide and Symbol resources for rapid prototyping in Sketch. The library allows developers to add the Meta Sketch Resource Library to their local Sketch Application. The library provides access to Meta styles, colors, type, components, and more. Once added, the Meta Sketch Resource Library syncs directly to Sketch Cloud. Sketch will notify users of any additions or updates.

For detailed instructions on how to add Meta UI to your Sketch Libraries, visit Meta UI.

Documentation

For detailed instructions on how to customize Meta and the Meta Documentation, visit Documentation.

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 Universe's development and chat with the project maintainers and community members.

• Subscribe to the Universe Newsletter
• Star this repo
• Follow @universelabs on Twitter.
• Join the official Universe Slack.

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.