0.0.1 • Published 2 years ago

@broadwaymedia/layout v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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")
);
0.0.1

2 years ago