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

새 Rails 앱 만들기

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

$ rails -v
Rails 8.0.0

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

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

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

$ cd classless-css-cdn && code .

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

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

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

더 확대…

- 후에

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

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

    <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> %>



     %>

• Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
• 파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요.
• Pico CSS와 다른 스타일을 테스트하려면 스타일 CDN(예: <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet">)을 설정하는 줄을 주석 처리하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!