클래스 없는 CSS 프레임워크로 제로 CSS를 사용하는 Ruby on Rails 빠른 프런트엔드

이 기사는 이 시리즈의 이전 기사와 매우 유사하지만 이번에는 "빌드 없음" 프로젝트 또는 "빌드"가 필요한 Ruby on Rails 애플리케이션에 사용할 수 있는 새로 생성된 우수한 CSS 프레임워크 CSS Zero를 사용할 것입니다. .

CSS Zero 프레임워크는 완전히 클래스가 없거나 가벼운 클래스 없는 프레임워크를 목표로 하지 않는다는 점에 유의해야 합니다. 이 문서에서 제안된 수정 사항은 테스트 목적으로만 사용되며 클래스를 추가하지 않고 이 튜토리얼의 HTML 페이지에 있는 모든 요소의 스타일을 지정하도록 설계되었습니다.

결과적으로 일부 HTML 요소의 형식은 CSS Zero 프레임워크에서 권장하는 스타일, 디자인, 레이아웃 및 동작과 일치하지 않을 수 있습니다. CSS Zero 프레임워크에서 기대할 수 있는 사항을 보려면 CSS Zero 룩북([여기에 룩북 링크 추가])을 방문하세요. 클래스 없는 프레임워크로 작동하는 모습을 보려면 아래 단계를 따르세요.

새 Rails 앱 만들기

• rails new 명령 앞의 time은 명령 실행의 총 시간을 표시하는 데 사용됩니다. 다음 예에서는 47초가 걸렸습니다.

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8은 "빌드가 필요하지 않음" 철학을 기반으로 기본적으로 Propshaft를 리소스 파이프라인 라이브러리로 사용하고 Importmap을 JavaScript 라이브러리로 사용합니다. Importmap은 JavaScript 처리를 수행하지 않습니다.

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다

<code>$ cd classless-css-zero && code .</code>

HTML 요소의 스타일을 볼 수 있는 페이지 만들기

이 페이지는 이 시리즈 첫 번째 기사의 '일반 단계' 섹션에 있습니다.

프로젝트에 CSS Zero 추가

확장…

프로젝트에 CSS Zero를 추가하려면 다음 단계를 따르세요.

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

사용 가능한 구성요소를 보려면 다음 명령을 실행하세요.

<code>$ bin/rails generate css_zero:add --help</code>

모든 구성 요소를 추가하려면 다음 명령을 실행하세요.

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

다른 구성요소를 추가하거나 일부 구성요소를 제거하면 위 명령이 작동하지 않으니 주의하세요.

1부 - app/assets/stylesheets/base.css 파일 수정

확장…

제목 링크를 보면 `

`이 있는 요소에 많은 스타일링 요소를 포함해야 함을 알 수 있습니다.

<code><div>
  ...
</div></code>

<div>을 사용하지 않고 이러한 HTML 요소의 스타일을 지정하기 위해 다음과 같이 수정합니다. <pre class="brush:php;toolbar:false">&lt;code&gt;body { background-color: var(--color-bg); color: var(--color-text); font-synthesis-weight: none; text-rendering: optimizeLegibility; /* 无类配置测试 */ font-size: var(--text-fluid-base); /* max-inline-size: 65ch; */ /* 抗锯齿字体 */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; } }&lt;/code&gt;</pre> <p><code>app/assets/stylesheets/base.css 파일을 열고 body { 줄을 찾아 text-rendering: optimizeLegibility; 뒤에 복사한 내용을 붙여넣습니다. 붙여넣은 후 max-inline-size: 65ch; 줄을 삭제하거나 주석 처리하세요. body의 내용은 위 예시와 동일해야 합니다.

다음으로 app/assets/stylesheets/prose.css 파일을 열고 다음 내용이 포함된 섹션을 복사하세요.

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

위 를 app/assets/stylesheets/base.css파일 끝에 붙여넣으세요.

2부 - app/assets/stylesheets/button.css 파일 수정

확장…

모든 HTML 버튼 요소가 자동으로 이 스타일을 사용하도록 `.btn` CSS 클래스를 수정합니다.

할 것입니다:

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

다음으로 변경됨:

<code>$ cd classless-css-zero && code .</code>

3부 - app/assets/stylesheets/input.css 파일 수정

확장…

모든 HTML 입력 요소가 자동으로 이 스타일을 사용하도록 `.input` CSS 클래스를 수정합니다. 마찬가지로 `.checkbox`, `.radio`, `.range` 선택기를 수정하여 해당하는 모든 HTML 태그에 적용되도록 합니다. 구체적인 수정 방법은 두 번째 부분과 유사합니다. 두 번째 부분의 수정 방법을 참조하세요.

app/views/layouts/application.html.erb 파일 조정

확장…

`application.html.erb`에서 테스트 HTML 파일에 대한 참조를 배치하는 위치에 따라 링크가 다르게 나타납니다. 데모가 튜토리얼과 동일하게 보이도록 하려면 해당 섹션을 수정하세요.

이제 CSS Zero를 클래스 없는 프레임워크로 사용하여 HTML 스타일을 지정하시겠습니까?

CSS Zero를 구성하고 위의 사용자 정의를 수행한 후 Rails 서버를 시작하면 스타일이 지정된 HTML이 표시됩니다.

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 이를 확인하려면 컴퓨터의 색상 개인 설정에서 테마를 변경하세요. Windows에서 "앱에 대해 어두운 모드 활성화"를 검색하고 어두운 모드와 밝은 모드 간에 전환합니다. 운영 체제 설정을 변경한 후 HTML 페이지는 라이트 모드와 다크 모드를 지원함을 나타내기 위해 자동으로 변경되어야 합니다.

다음 단계

[x] 원하는 대로 스타일을 구성하세요. [x] CDN 대신 스타일링을 위해 프로젝트에서 CSS 파일을 사용합니다. [x] Tailwind를 사용하여 클래스 없는 CSS 프레임워크의 기능을 복제합니다. [-] Rails Live Reload를 사용하여 브라우저에서 프로젝트의 변경 사항을 동적으로 업데이트합니다. [-] 프런트 엔드에 더 많은 시간을 투자하고 싶다면 좋아하는 스타일에 대한 사용자 정의 옵션을 확인하세요.

참고자료

• https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
• https://guides.rubyonrails.org/layouts_and_rendering.html
• https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
• https://prismic.io/blog/best-css-frameworks
• https://saeedesmaili.com/notes/classless-css-libraries/
• https://dev.to/logrocket/comparing-classless-css-frameworks-3267
• https://github.com/dbohdan/classless-css
• https://github.com/troxler/awesome-css-frameworks