This package has been deprecated

Author message:

The package is moved to @awesome-elements/layout

Awesome-Layout

An awesome way to do layout.

Demo

Installation

From NPM

npm i awesome-layout

From CDN

<script type="module" src="https://unpkg.com/awesome-layout"></script>

Usage

• Flex
• Ratio Box
• Wrap

Importing

Using <script> tag

You can either grab the code using CDN or using NPM.
If you grab it from the CDN, then you just need to directly put the below code into your HTML file.

<script type="module" src="https://unpkg.com/awesome-layout"></script>

If you grab it from NPM, then you might need ajust the src. The code should be located at node_modules/awesome-layout/dist/awesome-layout/awesome-layout.esm.js.
Note that type="module" is an ES6 syntax and only works in modern browsers. It is required to use type="module" and we do not provide the ES5 version.

Using loader

If you need to import inside JavaScript code, using the loader is the suggested way. Basically, you want to call defineCustomElements() from the loader. Optionally, you can call applyPolyfills() first. For different project types, please check below sections for more details.

Vanilla JS

First, install using NPM.
Then put below code in your JS file.

import { defineCustomElements } from "node_modules/awesome-layout/loader";
defineCustomElements();

And make sure you import this JS file using type="module" like below.

<script type="module" src="path/to/the/js/file"></script>

Note that type="module" is an ES6 syntax and only works in modern browsers.
You can check here for more details for Vanilla JS importing.

Angular

Please check here for details. Just make sure you import defineCustomElements() from node_modules/awesome-layout/loader instead.

React

We suggest to use our React wrapper package awesome-layout-react.
However, if you still want to use the web component directly, please check here for details. Just make sure you import defineCustomElements() from node_modules/awesome-layout/loader instead.

Vue

Please check here for details. Just make sure you import defineCustomElements() from node_modules/awesome-layout/loader instead. In addition, when you ignore elements, you should ignore all elements starting with awesome-.