simple gallery_responsive template

Modèle réactif de galle simple

Modèle de modèle d'une page de galerie réactive, conçu et codé par Maxim Orlov.

Demo: http://website-emplates.github.io/simple-gallery_responsive-template

Product Mockup créé avec http://magicmockups.com/

Contenu

• Structure de dossier
• Exigences
  • EditorConfig
• Configuration du site
• Tâches
  • Commencer
  • Dev
  • Construire
  • Reconstruire
  • Serveur
• Rechargement en direct
• Licence

Structure de dossiers et de fichiers

 ./
├── .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

Exigences:

• Node.js
• Construire un sytem: Gulp
• Éventuellement: editorconfig

EditorConfig

Ce projet a un fichier .EditorConfig sur la racine utilisée par votre éditeur de code avec le plugin EditorConfig. Il décrit le style de codestyle, le style de retrait, les espaces blancs, etc. Voir plus de détails ici

Configuration du site

Cette passe-partout utilise des modèles de carlin avec des configurations de données externes. Les paramètres principaux peuvent être trouvés dans le fichier dev/data/config.json . Et ils sont disponibles pour l'utilisation dans des modèles avec config.key-name

Tâches

Voici des groupes de tâches de gorgée avec quelques explications

Commencer

Installez les dépendances de bower et placez-les aux dossiers de développement. Gulp: gulp start

• Installez les composants de Bower
• Copier les composants Bower dans le dossier Dev
• Supprimer les fichiers gitkeets

Dev

Tâche de développement avec serveur statique. Gulp: gulp dev

• Compiler les feuilles de styles de styles
• Ajouter les préfixes des fournisseurs dans CSS
• Combiner les requêtes multimédias dans les fichiers CSS
• Compiler les modèles de carlin
• Synchroniser les aides et autres actifs
• Synchronisation des images
• Exécutez le serveur statique de BrowSersync avec un rechargement en direct en utilisant
• Surveillez les modifications et exécutez la tâche Dev

Construire

Construire la tâche. Gulp: gulp build

• Images miniflées
• Fichiers JavaScript Minif
• Minify Styleshets
• Html mini-
• Exécuter BrowSersync Static Server

Reconstruire

Régénérer et construire un projet en exécutant toutes les tâches. Gulp: gulp rebuild

• Concaténer les javascripts
• Compiler les feuilles de styles de styles
• Ajouter les préfixes des fournisseurs dans CSS
• Combiner les requêtes multimédias dans les fichiers CSS
• Compiler les modèles de carlin
• Synchroniser les aides et autres actifs
• Synchronisation des images
• Images miniflées
• Fichiers JavaScript Minif
• Minify Styleshets
• Html mini-

Serveur

Exécutez le serveur sans surveiller les modifications. Gulp: gulp server

• Exécuter BrowSersync Static Server

Rechargement en direct

Ce projet utilise BrowSersyNC comme serveur statique avec une option de recharge en direct activée et configurée.

Licence

Mit