Ruby on Rails 프런트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light - Sem CDN

이 문서는 동일한 주제를 다루는 이전 문서와 의도적으로 매우 유사하지만 CSS 프레임워크에 CDN을 사용했습니다. 그러나 이 문서에서는 프로젝트 폴더에 복사된 CSS 파일을 로컬에서 사용합니다.

웹 개발을 시작하고 프런트엔드 전문 분야가 아닌 경우 가장 어려울 수 있는 장벽 중 하나는 보기 흉한 HTML의 스타일을 쉽게 지정할 수 있다는 것입니다.

처음 접촉한 사람들에게 HTML에 스타일을 적용하기 위해 미리 정의된 유틸리티 클래스가 있는 일련의 문자와 숫자가 있는 HTML을 이해하려고 시도하는 것은 신비스럽고 신비롭고 초자연적인 일입니다. 예를 들면 다음과 같습니다.

<summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
</summary>

유틸리티 클래스를 사용하는 CSS 프레임워크는 훌륭하고 다용도이며 반응성이 뛰어나고 우아하며 다른 많은 특성을 갖고 있지만 Tailwind CSS가 유일한 솔루션은 아닙니다. 빠르고 간단한 것이 필요한 경우 클래스가 없거나 클래스가 가벼운 CSS 프레임워크를 사용하는 것이 더 나은 솔루션이 될 것입니다.

클래스 없는 CSS 프레임워크는 클래스 없이 HTML 요소의 스타일을 직접 지정합니다. 클래스 라이트 프레임워크는 사용자 정의를 위한 일부 선택적 유틸리티 클래스와 자동 스타일을 결합하여 사용의 다양성을 높입니다.

클래스리스 또는 클래스 라이트 접근 방식을 사용하면 한 줄, 두 줄 또는 세 줄로 HTML 스타일을 빠르게 해결할 수 있습니다.

우리는 아래를 볼 것입니다 :

• Propshaft 및 Importmap과 함께 버전 8의 Ruby on Rails 프레임워크 사용
• HTML 페이지의 표준 레이아웃으로 파일 알아보기
• CSS를 사용한 스타일 테스트를 위해 4개의 HTML 페이지에 콘텐츠 생성 및 추가
• 페이지용으로 생성된 경로에 대한 간략한 언급
• 생성된 페이지에 대한 링크를 포함하도록 기본 레이아웃을 변경하세요.
• 파일을 프로젝트에 복사하여 12개의 CSS 프레임워크를 추가하세요.
• CSS 프레임워크에 기본적으로 밝은 모드와 어두운 모드가 구성되어 있는지 확인하는 방법을 알아보세요.
• 다음 단계에 대한 제안;

새로운 Rails 애플리케이션 시작

• rails 명령 이전 시간은 명령 실행 종료 시 실행 시간을 표시하는 데 사용됩니다. 아래 예에서는 47초가 걸렸습니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8은 No Build 철학에 따라 기본적으로 Propshaft를 자산 파이프라인 라이브러리로 사용하고 Importmap을 JavaScript 라이브러리로 사용합니다. Importmap은 어떤 유형의 JavaScript 처리도 수행하지 않습니다.

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

$ cd classless-css-local && code .

 

기본 Rails 레이아웃 app/views/layouts/application.html.erb를 알고 있습니다.

더보기…

• CoC(Convention over Configuration)에 따라 Rails는 application.html.erb를 기본 레이아웃으로 사용하여 모든 페이지를 렌더링합니다.
• Rails 8의 원본 파일에는 아래 복사된 파일과 동일하거나 유사한 내용이 있어야 합니다.

<summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
</summary>

• … 페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
• 페이지의 주요 콘텐츠는 , ERB 태그 를 통해. 이 태그는 Rails가 동적으로 렌더링한 뷰의 콘텐츠를 포함하는 통합 지점 역할을 합니다.

 

컨트롤러 페이지와 html_test_1, html_test_2, html_test_3 및 html_test_4 작업을 사용하여 테스트 페이지를 생성합니다.

더보기…

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• 위의 컨트롤러 및 작업을 생성하는 동안 경로도 추가되어 링크에서 생성된 모든 작업에 액세스할 수 있습니다.
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

 

VSCode에서 config/routes.rb 파일을 엽니다.

• 페이지 루트를 이전에 생성된 컨트롤러 페이지와 html_test_1 작업으로 연결하려면 파일 끝에 아래 줄을 포함하세요. 따라서 웹 사이트나 시스템에 액세스할 때 표시되는 첫 번째 페이지는 컨트롤러 페이지의 html_test_1 페이지가 됩니다. 그렇지 않으면 기본 레일 페이지가 표시됩니다.

$ cd classless-css-local && code .

• 컨트롤러를 생성할 때 --skip-routes 매개변수를 전달했다면 생성된 작업에 경로 추가를 무시했을 수 있습니다. 전체 명령은 Rails g Controller Pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes가 됩니다.

 

Rails 경로 표시

더보기…

터미널을 사용하면 예를 들어 컨트롤러 페이지에서 컨트롤러를 지정하여(-c 사용) 경로를 표시할 수 있습니다

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

또는 다음을 사용하여 모든 경로를 표시할 수도 있습니다

<summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
</summary>

• 주소 http://127.0.0.1:3000/rails/info/routes를 사용하여 브라우저를 통해 경로에 액세스할 수도 있습니다. bin/dev를 사용하여 개발 서버를 시작하거나 프로젝트 루트 디렉터리에서 레일 서버를 사용하여 표준 레일 서버를 시작하는 것을 잊지 마십시오. 개발 서버는 사용자가 사용할 수 있도록 필요한 처리를 수행하기 위해 자바스크립트 파일 및 CSS 파일의 변경 사항을 "수신"하고 있습니다.
• 이러한 파일을 변경하고 브라우저에서 즉시 보려면 Rails Livre Reload와 같은 gem을 설치해야 합니다.

CSS 스타일을 테스트하기 위해 HTML 콘텐츠가 포함된 4개의 페이지를 만들어 보겠습니다.

Ruby on Rails는 기본적으로 MVC(Model-View-Controller) 아키텍처를 사용하여 프로젝트 구성을 시작합니다. 대부분의 코드는 다음 폴더에 구성되어 있습니다.

• 코드가 도메인/비즈니스 로직 및 데이터와 관련된 경우 app/models 폴더에 보관하세요.
• 뷰와 관련된 코드(HTML, JSON, XML 등...)는 앱/뷰에 있습니다.
• 요청 수명 주기와 관련된 코드는 앱/컨트롤러에 있습니다.

 

html_test_1 페이지의 내용을 삽입하세요.

더보기…

• https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 링크에 접속하여 아래와 같이 기본 태그의 모든 내용을 복사합니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 서버를 시작하고 보기 흉한 일반 HTML을 보시겠습니까?

더보기…

• bin/dev로 Rails 개발 서버를 시작하거나 Rails 서버로 표준 서버를 시작하고 127.0.0.1:3000에서 브라우저를 엽니다.

$ cd classless-css-local && code .

• 페이지를 열면 상단에 이전에 생성한 html_test_1, html_test_2, html_test_3 및 html_test_4 페이지에 추가한 4개의 링크가 표시됩니다.
• 지금까지 일이 너무 많았습니다. 각각을 열면 HTML이 아직 CSS로 스타일이 지정되지 않았음을 알 수 있습니다. 다음 작업을 수행하겠습니다.

CSS 파일을 프로젝트에 복사하고 app/assets/stylesheets/에 붙여넣습니다.

더보기…

CSS 파일에 대한 Rails 문서를 참조하면 CSS 파일을 복사하여 웹 애플리케이션의 스타일을 지정하려면 몇 가지 단계를 따라야 한다는 것을 알 수 있습니다.

• 파일을 app/assets/stylesheets/ 폴더 또는 그 안에 있는 하위 폴더(예: app/assets/stylesheets/classless)에 복사합니다.
• application.html.css 파일에서 올바른 태그를 사용하여 기본 Rails 레이아웃을 설정하여 이 파일을 참조하세요. 예:
  • CSS 파일이 app/assets/stylesheets/mystylesheet.css에 있는 경우 태그를 추가해야 합니다. 확장자 .css가 없습니다.
  • CSS 파일이 app/assets/stylesheets/classless/mystylesheet.css에 있는 경우 태그를 추가해야 합니다. 확장자 .css가 없습니다.

app/assets/stylesheets 내에 클래스 없는 하위 폴더를 만들어 아래 링크에서 다운로드한 CSS 파일을 복사해 보겠습니다.

• CSS 정규화: https://necolas.github.io/normalize.css/latest/normalize.css
• Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
• MVP CSS: https://andybrewer.github.io/mvp/mvp.css
• Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
• 간단한 CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
• 클래스 없는 CSS: https://classless.de/classless.css
• 콘크리트 CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
• 아몬드 CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
• 피크닉 CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
• YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
• 사쿠라 CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css

• 대나무 CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css

• Bamboo CSS에는 축소된 파일만 있습니다. CSS Beautifier & Minifie와 같은 서비스를 사용하여 이해하기 쉽도록 형식을 지정할 수 있습니다. 왼쪽에 코드를 붙여넣고 오른쪽에 형식화된 파일을 가져옵니다. 파일 이름을 Bamboo.css로 바꿉니다.

• 바닐라 SCSS를 바닐라 CSS로 변환:
  

<summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
</summary>

• 파일을 app/assets/stylesheets/classless/vanilla-framework/build/css/build.css 폴더에 복사하고 코드를 더 읽기 쉽게 만들려면 CSS Beautifier & Minifie 웹사이트 서비스를 사용하세요. 왼쪽에 코드를 붙여넣고 오른쪽에 형식화된 파일을 가져옵니다. 파일 이름을 바닐라.css로 바꾸고 app/assets/stylesheets/classless 폴더로 잘라냅니다.
• app/assets/stylesheets/classless/vanilla-framework/ 폴더 삭제

app/views/layouts/application.html.erb 페이지를 다시 열어 프로젝트에 복사된 클래스 없는 CSS 스타일을 추가하세요.

더보기…

• 행을 주석 처리합니다. Rails가 모든 스타일을 한 번에 로드하지 않도록

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

$ cd classless-css-local && code .

• 아래 내용 뒤에 댓글 달린 줄과 함께

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

• 앞에 다음 내용을 붙여넣으세요. 이러한 스타일이 모두 필요한 것은 아니며 다양한 옵션을 테스트할 수 있도록 삽입되었습니다.

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
• 파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요
• Pico CSS가 아닌 다른 스타일을 테스트하려면 로컬 스타일을 설정하는 줄을 주석 처리하세요. 이 경우에는 Simple CSS 줄과 같은 다른 스타일의 줄 주석을 제거하세요.
• ERB 태그에 댓글을 달려면

네, 세련된 HTML이요?

위의 스타일시트를 저장하고 Rails 서버를 시작하면 선택한 CSS 프레임워크로 HTML 스타일이 지정된 것을 볼 수 있습니다.

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 확인하려면 색상 사용자 정의 옵션에서 컴퓨터 테마를 변경하세요. Windows에서 앱에 대해 어두운 모드 켜기를 검색하고 어두운 모드 또는 밝은 모드 간에 전환합니다. 운영 체제를 변경하면 HTML 페이지가 자동으로 변경되어 밝은 모드와 어두운 모드를 지원함을 나타냅니다.

다음 단계

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

참고자료

• 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

위 내용은 Ruby on Rails 프런트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light - Sem CDN의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!