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

새 Rails 앱 만들기

• time 명령은 rails serve 명령이 실행된 후의 실행 시간을 표시합니다. 다음 예에서는 47초의 실행 시간을 보여줍니다.

<code class="language-bash">$ rails -v
Rails 8.0.0

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

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

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

<code class="language-bash">$ cd classless-css-cdn && code .</code>

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

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

app/views/layouts/application.html.erb 파일을 다시 열고 CDN을 통해 클래스 없는 CSS 스타일을 참조하세요

더 확대…

- 후에

<code class="language-html">


</code>

• , </head> 앞에 다음을 붙여넣으세요. 이러한 스타일을 모두 사용할 필요는 없으며 다양한 옵션을 테스트할 수 있도록 추가되었습니다.

<code class="language-html">

     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %></code>

• Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
• 파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요.
• Pico CSS와 다른 스타일을 테스트하려면 스타일 CDN(예: <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>)을 설정하는 줄을 주석 처리하고 Simple CSS 줄과 같은 다른 스타일에 대한 줄의 주석 처리를 해제하세요.
• VSCode에서 줄에 주석을 달거나 주석 처리를 해제하려면 단축키 Ctrl K C를 사용할 수 있습니다.

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

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

다크 모드

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

다음 단계

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

参考资料

• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

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