Installing Visual Studio Code Extension

Layout includes Visual Code Extension to allow you to quickly write parsing markup and helps the autocompletion for javascript and typescript files.

npm run scripts:install:code:extension

Getting started

# via yarn
yarn add @broadwaymedia/layout

# via npm
npm install --save @broadwaymedia/layout

Usage

Layout serves as a versatile component that mimics the behavior of both HTML <div> elements in web development and React Native's <View>. It empowers developers to write code in a minimalistic notation, streamlining the development process and ensuring cross-platform compatibility.

Full Guide on Properties

import { Box } from "@broadwaymedia/layout";

ReactDOM.render(
  <Box
    width="100%"
    height="100%"
    display="flex"
    align="center"
    justify="center"
  >
    <Box
      padding={20}
      width={200}
      border="1px solid #DDDDDD"
      display="inline-flex"
      direction="column"
    >
      <b>John Doe</b>
      <small>@username</small>
    </Box>
  </Box>,
  document.getElementById("root")
);

Advanced Usage

Layout offers robust parsing capabilities, empowering you to swiftly craft common style definitions with a minimalistic syntax. It also affords the flexibility to create extensive style configurations. Below is an example illustrating how to express the CSS equivalent of align-items: center using this parsing tool.

Leveraging Direct Properties and Values

<Box parse="align-items:center" />

Streamlining with Minimalistic Notation

<Box parse="a:center" />

Ultra-Simplified Approach

<Box parse="a:c" />

This approach not only enhances developer productivity but also eliminates concerns about cross-platform compatibility.

Full Guide on Parsing

import { Box } from "@broadwaymedia/layout";

ReactDOM.render(
  <Box parse="w:100% h:100% d:f a:c j:c">
    <Box parse="pa:20 br:10 d:if fd:c w:200" border="1px solid #DDDDDD">
      <b>John Doe</b>
      <small>@username</small>
    </Box>
  </Box>,
  document.getElementById("root")
);