# Layout System

[🔰 CSS](https://lochiwei.gitbook.io/web/css) ⟩ [Layout](https://lochiwei.gitbook.io/web/css/layout) ⟩ 

{% tabs %}
{% tab title="📗 參考" %}

* [Every Layout](https://every-layout.dev/) ❤️
* web.dev ⟩ [Using CSS Module Scripts to import stylesheets](https://web.dev/css-module-scripts/) ⭐️
  {% endtab %}

{% tab title="👥 相關" %}

* [CSS import](https://lochiwei.gitbook.io/web/css/import)
* [Flexbox](https://lochiwei.gitbook.io/web/css/layout/display/flex/flex)
* [⭐️ Fav](https://lochiwei.gitbook.io/web/master/fav)
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [Dictionary App](https://lochiwei.gitbook.io/web/js/proj/dictionary-app)
  {% endtab %}

{% tab title="💾 程式" %}

* replit ⟩ [layout system](https://replit.com/@pegasusroe/layout-system#script.js)
  {% endtab %}
  {% endtabs %}

## primitives

* [VStack](https://lochiwei.gitbook.io/web/css/layout/system/vstack), [HStack](https://lochiwei.gitbook.io/web/css/layout/system/hstack), [Spacer](https://lochiwei.gitbook.io/web/css/layout/system/spacer)
* [Box](https://lochiwei.gitbook.io/web/css/layout/system/box) - 主要不是作為排版用。

## versions

{% tabs %}
{% tab title="💾 程式" %}
\*

### with custom elements

* replit ⟩ [layout (0.1.1)](https://replit.com/@pegasusroe/layout-011-lessloremgreater#layout/index.mjs)

### pure css

* replit ⟩ [layout.css (0.0.1)](https://replit.com/@pegasusroe/layoutcss-001#layout/layout.css)
  {% endtab %}

{% tab title="CSS (0.0.1)" %}

```css
/* 目前 gitbook 貼入原始碼有問題，先用隔壁頁「程式」 */
```

{% endtab %}

{% tab title="CSB" %}
{% embed url="<https://codesandbox.io/s/layout-0-1-0-refactor-ymmjz?file=/index.html>" %}
Layout (0.1.0)
{% endembed %}

{% embed url="<https://codesandbox.io/embed/layout-0-0-1-demo-96whf?fontsize=14&hidenavigation=1&theme=dark>" %}
layout 0.0.1
{% endembed %}
{% endtab %}
{% endtabs %}

## examples

{% tabs %}
{% tab title="form" %}

* [Email Form](https://lochiwei.gitbook.io/web/css/layout/examples/email-form)
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}