CSS Grid Layout Generatr에서 레이아웃용 CSS 생성

이것은 최근에 만든 물건의 소개다.거의 다 된 것 같아서 공개하겠습니다.

이것은 무엇이냐

작업 흐름에 따라 CSS를 쓸 때 가장 먼저 결정되는 것은 대략적인 레이아웃 구성이다.
그렇다면 최근 구성요소를 지향하는 ReactComponent를 쓰면 CSS Grid Layout은 각 분야에서 어떤 디자인을 차지하는지에 대해 편리하다.대개 그렇다.
카페 제1회 Grid Layout Module 개요
CSS Grid 하면 뭐라고 할까, 아무렇게나 플라스틱을 뱉어도 기계적으로 더러워지지 않는다는 것.이렇게 하는 거야.
레이아웃 디자인은 매번 게을러요. 저처럼 CSS를 별로 쓰고 싶지 않은 엔지니어가 GUI에 Pochi Po점을 만들어서 그런 느낌의 CSS를 토해냈으면 좋겠다고 생각해요.
다만, 제가 이걸 만들면서 Grid Layout에 익숙해졌는데...

사용법

+- 버튼을 사용하여 행과 열을 추가합니다.기본 길이는 1fr입니다.소위fr의 단위는 고정폭을 제외하고는 전체 범위 내에서 차지하는 비례이다.
셀 이름을 클릭하여 편집합니다.같은 이름으로 연결되면 연결됩니다.아무튼 푹신푹신한 거야.

Cels와 Panes 두 가지 편집 모드가 있습니다.결합 상태에서 Pane 모드를 편집할 수 있습니다.

output 출력은 현재 상태의 css/}를 표시합니다.이런 느낌이에요.

// CSS
.container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 120px 4fr 1fr;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas: 'header header header' 'left content right' 'footer footer footer';
}

.area-header {
    grid-area: header;
}

.area-left {
    grid-area: left;
}

.area-content {
    grid-area: content;
}

.area-right {
    grid-area: right;
}

.area-footer {
    grid-area: footer;
}

// HTML
<div class='container'>
  <div class='area-header'></div>
  <div class='area-left'></div>
  <div class='area-content'></div>
  <div class='area-right'></div>
  <div class='area-footer'></div>
</div>

React에서 플라스틱 편집을 편리하게 하기 위해 스타일드-components 버전을 준비했습니다.최근 스타일드-components를 사용해 편리함을 느껴 이 전제의 API를 만들었다.

// Generated by CSS Grid Editor
import styled from 'styled-components'

export default styled.div`
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 120px 4fr 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas: 'header header header' 'left content right' 'footer footer footer';
`

export const header = styled.div`grid-area: header`


export const left = styled.div`grid-area: left`


export const content = styled.div`grid-area: content`


export const right = styled.div`grid-area: right`


export const footer = styled.div`grid-area: footer`

이것을 복사해서 이런 느낌으로 import에서 사용할 수 있습니다.(예: npm install styled-components)

import Layout, * as Area from './layouts/Layout'

export default () => {
  <Layout>
    <Area.header>
       <Header/> // children に要素を与えると展開される
    </Area.header>

    <Area.left/>
    <Area.content/>
    <Area.right/>
    <Area.footer/>
  </Layout>
}

CSS in JS가 아니라면 CSS 모델즈에 사용됐을 텐데 그렇게 내선화를 노력할 필요는 없겠죠...

주의점

IE11은 CSS Grid Layout의 대응이 충분하지 않기 때문에postcss/autooprefixer를 통과해야 한다.

panes 모드에서 인접할 수 없는 이름을 선택하면 표시되지 않습니다.CSS Grid Layout의 사양입니다.cells 모드로 원상태로 회복하세요.

TODO: styled-components를 사용할 때 autooprefixer를 통과하는 방법을 조사합니다.