Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@universelabs/meta
Advanced tools
@universelabs/meta - npm Package Compare versions
Comparing version 1.5.2 to 1.5.3
| { | ||
| "name": "@universelabs/meta", | ||
| "version": "1.5.2", | ||
| "version": "1.5.3", | ||
| "description": "A blockchain enhhanced front-end framework based off Bootstrap for developing decentralized apps.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
141
README.md
| <div align="center"> | ||
| <h3 align="center">Meta</h3> | ||
| <p align="center"> | ||
| Meta is an open source blockchain UI framework. | ||
| Meta is an open source Web3 frontend UI framework. | ||
| <br/> | ||
@@ -44,6 +44,9 @@ <a href="https://universe.engineering"> | ||
| - [Overview](#overview) | ||
| - [Quick Start](#quick-start) | ||
| - [Status](#status) | ||
| - [What's included](#whats-included) | ||
| - [Meta UI](#meta-ui) | ||
| - [Getting started](#getting-started) | ||
| - [Features and benefits](#features-and-benefits) | ||
| - [Meta Sketch Resource Library](#meta-sketch-resource-library) | ||
| - [Documentation](#documentation) | ||
@@ -56,2 +59,7 @@ - [Contributing](#contributing) | ||
| ## 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 | ||
@@ -61,5 +69,5 @@ | ||
| - [Download the latest release.](https://github.com/universelabs/meta/releases/tag/1.1.20). | ||
| - [Download the latest release.](https://github.com/universelabs/meta/releases). | ||
| - Clone the repo: `git@github.com:universelabs/meta.git`. | ||
| - Install with [npm](https://www.npmjs.com/): `npm install @universelabs/meta`. | ||
| - Install with [npm](https://www.npmjs.com/): `npm i @universelabs/meta`. | ||
| - Install with [yarn](https://yarnpkg.com/): `yarn add @universelabs/meta`. | ||
@@ -78,46 +86,101 @@ | ||
| 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. | ||
| 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: | ||
| #### Full-spectrum Color System | ||
| Meta contains a Full-spectrum Color System. Inspired by [Palx](https://github.com/jxnblk/palx) and [Open Color](https://yeun.github.io/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. | ||
| ```text | ||
| @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 | ||
| ``` | ||
| #### 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: | ||
| 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. | ||
| 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. | ||
| #### 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. | ||
| ## Getting started | ||
| ```text | ||
| @universelabs/meta/ | ||
| └── scss/ | ||
| └── meta.scss | ||
| Quickly start by using the one line [NPM](https://www.npmjs.com/package/@universelabs/meta) install. | ||
| ``` | ||
| npm i @universelabs/meta | ||
| ``` | ||
| 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). | ||
| ## Meta UI | ||
| ``` | ||
| @import "node_modules/@universelabs/meta/scss/meta.scss"; | ||
| ``` | ||
| **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. | ||
| Most classname convention is dirived from the [Bootstrap](https://getbootstrap.com/) framework so you should feel right at home. | ||
| For detailed instructions on how to add Meta UI to your Sketch Libraries, visit [Meta UI](https://github.com/universelabs/meta/blob/master/META-UI.md). | ||
| ## Features and benefits | ||
| ## Documentation | ||
| - 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](https://www.npmjs.com/package/@universelabs/meta). | ||
| Meta is currently an extension of the [Bootstrap](https://getbootstrap.com/) framework. An easy to use Sass file that gets compiled with [Bootstrap Theming](https://getbootstrap.com/docs/4.1/getting-started/theming/). | ||
| ### Color | ||
| - Full-spectrum Color System | ||
| - Color theming. | ||
| - WCAG accessibility compliant. | ||
| - Wide gamut color range. | ||
| - Scalable. | ||
| - Over 200 color hues. | ||
| - Non-breakable. | ||
| - Inspired by [Palx](https://github.com/jxnblk/palx) and [Open Color](https://yeun.github.io/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. | ||
| Follow the instructions below to get your version of the `Meta Documentation` up and running. | ||
| Full color list coming soon... | ||
| ### Running Meta Documentation locally | ||
| 1. Quickly start by cloning the repository to your local machine `git clone git@github.com:universelabs/meta.git`. | ||
| 2. Ensure you have [`npm`](https://www.npmjs.com/get-npm) installed. `npm` comes bundled with [Node.js](https://nodejs.org/en/download/package-manager/). `brew install node`. | ||
| 3. Add dependencies `npm install`. | ||
| 4. 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`. | ||
| ### 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. | ||
| - 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 Sketch Resource Library | ||
| **Meta Sketch Resource Library** 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 Sketch Resource Library to your Sketch Libraries, visit [Meta Sketch Resource Library](https://github.com/universelabs/meta/blob/master/META-SKETCH-RESOURCE-LIBRARY.md). | ||
| For detailed instructions on how to add Meta UI to your Sketch Libraries, visit [META SKETCH RESOURCE LIBRARY](https://github.com/universelabs/meta/blob/master/META-SKETCH-RESOURCE-LIBRARY.md) | ||
| ## Documentation | ||
| For detailed instructions on how to customize Meta and the Meta Documentation, visit [Documentation](https://github.com/universelabs/meta/blob/master/DOCUMENTATION.md). | ||
@@ -128,6 +191,6 @@ | ||
| Please read through our [contributing guidelines](CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. | ||
| Please read through our [contributing guidelines](https://github.com/universelabs/universe/blob/master/CONTRIBUTING.md). 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](CONTRIBUTING.md#code-guidelines). | ||
| must include relevant unit tests. All code should conform to the [Code Guidelines](https://github.com/universelabs/universe/blob/master/CONTRIBUTING.md#code-guidelines). | ||
@@ -137,10 +200,10 @@ | ||
| Get updates on Meta's development and chat with the project maintainers and community members. | ||
| Get updates on Universe's development and chat with the project maintainers and community members. | ||
| - Follow [@universelabs on Twitter](https://twitter.com/universelabs). | ||
| - Join the official [Universe Slack](https://join.slack.com/t/universelabs/shared_invite/enQtNDQ0MjY3NDI5MTkwLTIzMWQ4M2U3MGQ3ZDY5MzM5MGQ5ZDM1MDZjNTgwNGI5NDdiNDY4ZDQyNWI2NjEzZmU3NzVmOTYwYzEzYzc1ZDE) chat room. | ||
| - Subscribe to the [Universe Newsletter](http://universe.engineering/subscribe) | ||
| - [Star this repo](https://github.com/universelabs/universe/stargazers) | ||
| - Follow [@universelabs](https://twitter.com/universelabs) on Twitter. | ||
| - Join the official Universe [Slack](https://join.slack.com/t/universelabs/shared_invite/enQtNDQ0MjY3NDI5MTkwLTIzMWQ4M2U3MGQ3ZDY5MzM5MGQ5ZDM1MDZjNTgwNGI5NDdiNDY4ZDQyNWI2NjEzZmU3NzVmOTYwYzEzYzc1ZDE). | ||
| For more details on how to get involved in the Universe Community visit the [Universe Community page](https://github.com/universelabs/universe/blob/master/COMMUNITY.md) and learn more about events, roadmap, weekly & daily scrum, past weekly community scrum calls, and more... | ||
| ## Maintainers | ||
@@ -147,0 +210,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.04%
67491
- Number of lines in readme file
- increased by39.62%
222
No dependency changes