simple gallery_responsive template

간단한 gallery 응답 템플릿

응답 갤러리 원 페이지 템플릿 템플릿, Maxim Orlov가 설계하고 코딩했습니다.

데모 : http://website-templates.github.io/simple-gallery_responsive-template

http://magicmockups.com/으로 만든 제품 모형

내용물

• 폴더 구조
• 요구 사항
  • editorConfig
• 사이트 구성
• 작업
  • 시작
  • 데브
  • 짓다
  • 재건
  • 섬기는 사람
• 라이브 리로드
• 특허

폴더 및 파일 구조

 ./
├── .editorconfig
├── README.md
├── automation.sh
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   ├── settings.js
│   |   └── aliases.js
│   |
|   └── task.js
│
├── gulpfile.js
├── package.json
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * compiled and source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * vendor scripts
|   │
|   ├── stylus/                                * stylus preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.styl
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.styl
|   │   ├── noscript.styl
|   │   └── screen.styl
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

요구 사항 :

• node.js
• Sytem 빌드 : Gulp
• 선택적으로 : EditorConfig

editorConfig

이 프로젝트에는 editorConfig 플러그인과 함께 코드 편집기에서 사용한 루트에 .editorconfig 파일이 있습니다. Indent Style, 후행 공백 등과 같은 Codestyle을 설명합니다. 자세한 내용은 여기를 참조하십시오.

사이트 구성

이 보일러 플레이트는 외부 데이터 구성과 함께 퍼그 템플릿을 사용합니다. 기본 설정은 dev/data/config.json 파일에서 찾을 수 있습니다. config.key-name 있는 템플릿에서 사용할 수 있습니다

작업

여기에 몇 가지 설명이 포함 된 Gulp 작업 그룹이 있습니다

시작

Bower Dependencies를 설치하고 폴더를 개발하십시오. Gulp : gulp start

• Bower 구성 요소를 설치하십시오
• Bower 구성 요소를 DEV 폴더에 복사하십시오
• gitkeep 파일을 제거하십시오

데브

정적 서버를 사용한 DEV 작업. Gulp : gulp dev

• 스타일러스 스타일 시트를 컴파일합니다
• CSS에 공급 업체 접두사를 추가하십시오
• CSS 파일의 미디어 쿼리를 결합하십시오
• 퍼그 템플릿을 컴파일합니다
• 도우미 및 기타 자산을 동기화하십시오
• 이미지 동기화
• Live Reload를 사용하여 BrowserSync 정적 서버를 실행하십시오
• 변경 사항을 확인하고 개발 작업을 실행하십시오

짓다

작업을 구축하십시오. Gulp : gulp build

• 이미지를 조정하십시오
• JavaScript 파일을 조정하십시오
• 스타일 시트를 조정하십시오
• HTML을 미치십시오
• BrowserSync 정적 서버를 실행하십시오

재건

모든 작업을 실행하여 프로젝트를 재생하고 구축하십시오. Gulp : gulp rebuild

• 자바 스크립트를 연결합니다
• 스타일러스 스타일 시트를 컴파일합니다
• CSS에 공급 업체 접두사를 추가하십시오
• CSS 파일의 미디어 쿼리를 결합하십시오
• 퍼그 템플릿을 컴파일합니다
• 도우미 및 기타 자산을 동기화하십시오
• 이미지 동기화
• 이미지를 조정하십시오
• JavaScript 파일을 조정하십시오
• 스타일 시트를 조정하십시오
• HTML을 미치십시오

섬기는 사람

변경 사항을 보지 않고 서버를 실행하십시오. Gulp : gulp server

• BrowserSync 정적 서버를 실행하십시오

라이브 리로드

이 프로젝트는 활성화되고 구성된 라이브 재 장전 옵션을 사용하여 BrowserSync를 정적 서버로 사용합니다.

특허

MIT