Awesome-Elmenets Layout

An awesome way to simplify web layout.

Demo

Installation

From NPM

npm i @awesome-elements/layout

From UNPKG

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

Usage

• Flex
• Grid
• Ratio Box
• View Break
• Wrap

Importing

Using <script> tag

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

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

If you grab it from NPM, then you might need adjust the src attribute. The code should be located at node_modules/@awesome-elements/layout/dist/awesome-elements/awesome-elmenets.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-elements/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

First, install using NPM.
Then include CUSTOM_ELEMENTS_SCHEMA in any module that uses the components. For example, in AppModule

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  // add this
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

After that, in main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// add this
import { applyPolyfills, defineCustomElements } from '@awesome-elements/layout/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

// add this, the applyPolyfills() is optional
applyPolyfills().then(() => {
  defineCustomElements()
});

React

We suggest to use our React wrapper package @awesome-elements/layout-react.
However, if you still want to use the web component directly, you can follow the below instruction:
First install using NPM.
Then in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// add this
import { applyPolyfills, defineCustomElements } from '@awesome-elements/layout/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

// add this, the applyPolyfills() is optional
applyPolyfills().then(() => {
  defineCustomElements();
});

Vue

First install using NPM. Then in main.js

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from '@awesome-elements/layout/loader';

Vue.config.productionTip = false;

// add this
Vue.config.ignoredElements = [/awesome-\w*/];

// add this, the applyPolyfills() is optional
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');

Note: This is an example for Vue 2.