@shinobi5/layout-componentdeprecated

Web component for CSS layout with zero dependencies

Usage no npm install needed!

<script type="module">
  import shinobi5LayoutComponent from 'https://cdn.skypack.dev/@shinobi5/layout-component';
</script>

README

:spider_web: Layout Component

Web component for CSS layout with zero dependencies.

License MIT

Usage

  <head>
    <script 
      src="https://unpkg.com/@shinobi5/layout-component@0.1.1/lib/layout-component.js" 
      defer 
    ></script>
  </head>
  <body>
    <main>
      <layout-component 
        breakpoints="400px, 800px, 1200px"
        space="5px, 10px, 20px, 40px" 
        cols="1, 2, 3, 4" 
        col="1fr, 1fr 2fr, 2fr"
        rowsrange="auto, 200px"
        align="center"
        justify="start-end"
      >
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
        <div>item 4</div>
      </layout-component>
    </main>  
  </body>

API

As this component is still a v0 version there's a good chance this API will change as I start to use the component and discover improvements that are needed. Consider this API unstable at this stage

Options are set via attributes on the <layout-component>. HTML attributes can only accept a single type: String.

Note: for attributes that accept a list of values applied at each breakpoint, the first value in the list is the initial value (the value applied before the first breakpoint)

Option Type Description
align String Value is passed to align-items and align-content
breakpoints String A list of comma separated breakpoint values (breakpoint values are applied tomin-width media queries)
cols String A comma separated list of columns at each breakpoint
col String A comma separated list of column settings at each breakpoint
justify String Value is passed to justify-items and justify-content
rowsrange String A comma separated list of values passed to minmax for grid-auto-columns
space String A comma separated list of gap values at each breakpoint

Browser support

Layout component uses the shadowDOM to encapsulate the styles and CSS Grid Layout for the container properties. This means no support for IE11.


Development

Project requires deno and velociraptor to be installed

Start server at localhost:1234

vr start

Compile component

vr build