sprucecss root admin template

이 저장소에는 Root라는 Laravel 관리자의 정적 템플릿이 포함되어 있습니다.

템플릿은 건전하고 간편한 관리를 위해 Eleventy로 제작되었습니다. Nunjucks 템플릿 파일이나 컴파일된 dist 폴더에서 콘텐츠를 가져올 수 있습니다.

템플릿은 Laravel 패키지 개발로 인해 향후 정기적으로 변경될 것입니다.

당신이 얻는 것

JS 코드를 처리하기 위해 Alpine.js를 사용했습니다. 꽤 완전한 JS 동작이 있지만 이 템플릿은 여전히 ​​정적 HTML/CSS이므로 대화형 부분을 수행해야 합니다.

지금 당장 다음 보기나 레이아웃을 얻을 수 있습니다.

• 계기반
• 제품 목록
• 주문 목록
• 고객 목록
• 카테고리 목록
• 아이템 편집
• 아이템 보기
• 설정
• 로그인
• 가입
• 비밀번호 재설정

관리자 관련 구성 요소가 많이 있습니다.

• 사용자 정의가 포함된 모달 창.
• 검색 및 필터를 지원하는 데이터 테이블 블록입니다.
• 단순 검색.
• 다양한 드롭다운 메뉴.
• 위젯 카드.
• 미디어 핸들러 모달.
• 콤보박스.

시작 및 실행

우리는 eleventy --serve 사용하고 npm 스크립트를 사용하여 sass-cli로 Sass를 컴파일합니다.

1. 저장소를 복제합니다.

2. 종속성을 설치합니다.

   package.json 파일에서 다음 명령을 사용하여 설치하는 데 필요한 모든 종속성(및 스크립트)을 찾을 수 있습니다.

   npm install

3. 개발 모드 실행

   개발 모드를 실행하려면 npm script 사용하세요. 이 스크립트는 변경 사항도 감시합니다.

   npm start

4. 프로덕션 모드 실행

   라이브로 전환하기 전에 프로덕션 스크립트를 사용하여 Sass 파일을 압축해야 합니다.

   npm run prod

SCSS

프로젝트는 ./src/scss 폴더의 SCSS 파일을 ./src/css 폴더로 컴파일합니다. 이 프로젝트에는 일부 Spruce UI 구성요소로 스타일을 제공하는 Spruce CSS가 포함되어 있습니다.

기타 스크립트

• sass:lint/sass:lint:fix npm run sass:lint 명령을 사용하여 Stylelint 및 stylelint-config-sass-guidelines가 미리 설정된 SCSS 파일을 린트할 수 있습니다. 자동 수정을 원하면 npm run sass:lint:fix 명령을 사용하세요.

• js:lint/js:lint:fix Sass처럼 JS를 린트할 수도 있습니다. 규칙으로는 Airbnb 사전 설정을 사용합니다.

특허

코드는 MIT에 따라 라이센스가 부여됩니다.