Skip to content

Paper CSS 빌드 구성 토론  #171

@kranian

Description

@kranian

이번에 Contributon 톤 행사에 참여 하고 있는 개발 자입 니다.
이슈 다루면서 불편하점이 있어 문의 드립니다.

불편한 점은 화면 UI 에 구성 되은 CSS 디자인을 한땀 한땀 만들어서 이번에 추가 했는데요
Paper에 빌드시 CSS 전처리기 툴 같이게 들어가면 좋겠습니다.

예를 들어 Stylus 같은 CSS 전처기기 툴 같은거요

  • https://www.stylus.com/
    • 간단히 소개하자면 스타일러스는 종속형 시트로 컴파일되는 동적 스타일시트 전처리기 언어입니다.

1. example stylus coding

.confirm-message
  background-color: white
  text-align: center
.message-content-layout
  max-width: 500px
  margin: 0 auto
  text-align: center
  .message-indexer
    padding: 0 0 10px 0
    font-size: 16px
  .message-indexer-holder
    height: 20px
    width: 100%

  > .message-content
    display: table
    width: 100%
    table-layout: fixed
    min-height: 100px
    padding : 0px
    > div
      display: table-cell
      vertical-align: middle
    > .center-message
      padding: 0px 50px
      color : #333
      .message-title
        padding: 0px 5px
        font-weight: bold
        > span
          padding: 10px 15px
          display: inline-block
          color : #333
        > i
          color : #333
          padding: 3px 5px
          font-size : 17px
      .center-message-content
        padding: 5px
.message-btns
  padding: 15px
.message-btns button
  cursor: pointer

2. stylus build 결과

.confirm-message {
  background-color: #fff;
  text-align: center;
}
.message-content-layout {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.message-content-layout .message-indexer {
  padding: 0 0 10px 0;
  font-size: 16px;
}
.message-content-layout .message-indexer-holder {
  height: 20px;
  width: 100%;
}
.message-content-layout > .message-content {
  display: table;
  width: 100%;
  table-layout: fixed;
  min-height: 100px;
  padding: 0px;
}
.message-content-layout > .message-content > div {
  display: table-cell;
  vertical-align: middle;
}
.message-content-layout > .message-content > .center-message {
  padding: 0px 50px;
  color: #333;
}
.message-content-layout > .message-content > .center-message .message-title {
  padding: 0px 5px;
  font-weight: bold;
}
.message-content-layout > .message-content > .center-message .message-title > span {
  padding: 10px 15px;
  display: inline-block;
  color: #333;
}
.message-content-layout > .message-content > .center-message .message-title > i {
  color: #333;
  padding: 3px 5px;
  font-size: 17px;
}
.message-content-layout > .message-content > .center-message .center-message-content {
  padding: 5px;
}
.message-btns {
  padding: 15px;
}
.message-btns button {
  cursor: pointer;
}

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions