Layout

Follows MDN doc CSS Layout.

Components 📦

Elvis Layout mainly contains Flex and Grid, btw, Elvis offerrs two basic components Container and SizedBox for simple usages.

Container

/* Container */
import { Page, Elvis, Alignments, Color } from "calling-elvis";
const { SizedBox, Text } = Elvis;

// Generate a `Container`
let myContainer = Container(
  Text("Where is my AJ-1?"), {
    alignments: Alignments.Center,
    height: 42,
    margin: 10,
    padding: 10,
    width: 42,
    color: Colors.Black,
    backgroundColor: Colors.Red,
});

Page(mySizedBox).render();

The Alignments enum is from Flex, to be honest, Container component is a part of Flex family, but he is too brilliant to stay in Flex family, Layout calls him.

List

/* List */
import { Page, Elvis } from "calling-elvis";
const { List, Text } = Elvis;

// Generate a `List`
let myList = List(
  Text("poor-orphan-1"),
  Text("poor-orphan-2"),
  Text("poor-orphan-3"),
);

Page(myList).render();

(Sorry about that), List is a set of poor orphan children, they don't have any style, just blowing in the wind.

SizedBox

/* SizedBox */
import { Page, Elvis } from "calling-elvis";
const { SizedBox, Text } = Elvis;

// Generate a `SizedBox`
let mySizedBox = SizedBox(
  Text("My SizedBox"), {
    height: 42,
    width: 42,
});

Page(mySizedBox).render();

SizedBox just has width and height two arguments, we use this component to take some white space usually.