Table of contents
Quick start
Several quick start options are available:
- Download the latest release..
- Clone the repo:
git@github.com:universelabs/meta.git
. - Install with npm:
npm install @universelabs/meta
. - Install with yarn:
yarn add @universelabs/meta
.
Status
![npm version](https://img.shields.io/npm/v/@universelabs/meta.svg?colorA=%23212121&colorB=%23007BFF)
What's included
Meta allows developers to quickly design and build quality user interfaces with little effort. With minimal adjustment, developers are able to create unique interfaces in less time. Think of the Meta as your design assistant.
Full-spectrum Color System
Meta contains a Full-spectrum Color System. 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.
Duo Type Functionality
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. No need to adjust font-size, line-height, margins, spacing. There are two types of typography in Meta:
- Regular Typography for interface design and layout within graphical
user interfaces. ie. List of songs, play button, settings.
- Editorial Typography for lengthier content sets of copy that are for
written communications. ie. promotional pages, blog posts, documentation, etc.
Responsive Ratio Type Scaling
Functional typography that implements complex type scaling with responsive & ratio scaling for greater readability out of the box. Meta provides complex typography and layout. For those looking for greater flexibility, Meta is easily adjustable. With only a few values, developers can quickly test and deploy dramatic changes to their application.
Sketch Shared Library
Meta now comes with "Meta UI", a FREE Sketch Shared Library including Style Guide and Symbol resources. The library allows developers to add Meta UI to their Sketch App for in app access to Meta styles, colors, type, components, and more. Once added, the Meta UI library syncs directly to Sketch Cloud. Sketch will notify users of any additions or updates.
@universelabs/meta/
└── scss/
└── meta.scss
Meta UI
Meta UI is a FREE Sketch Shared Library including Style Guide and Symbol resources for rapid prototyping in Sketch. The library allows developers to add Meta UI to their Sketch App for in app access to Meta styles, colors, type, components, and more. Once added, the Meta UI 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
Meta is currently an extension of the Bootstrap framework. An easy to use Sass file that gets compiled with Bootstrap Theming.
Follow the instructions below to get your version of the Meta Documentation
up and running.
Running Meta Documentation locally
- Quickly start by cloning the repository to your local machine
git clone git@github.com:universelabs/meta.git
. - Ensure you have
npm
installed. npm
comes bundled with Node.js. brew install node
. - Add dependencies
npm install
. - Start the local client side server and run the app. The app will automatically open your web browser and navigate to http://localhost:3000/ for you
npm start
.
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.
Get updates on Meta's development and chat with the project maintainers and community members.
For more details on how to get involved in the Universe Community visit the Universe Community page and learn more about events, roadmap, weekly & daily scrum, past weekly community scrum calls, and more...
Maintainers
Guy Lepage
License
By contributing your code, you agree to license your contribution under the
MIT License.
This project was bootstrapped with Create React App v2
and uses the UI framework Bootstrap as it's foundational base.