v. 1705

Download Sources

Amorce est un starter kit pour l'intégration de site internet.
Il se veut style-agnostic, léger et modulaire (utilisez uniquement le nécessaire).

Il propose :

• Un Framework CSS (reset, typo, forms, utils, grids, etc) découpé en modules.
• Une documentation qu'il suffit de faire évoluer en style guide pour chaque projet.
• Une convention de nommage claire.
• Le langage de templating nunjucks pour modulariser vos pages HTML et faciliter la communication avec les développeurs.
• La génération automatique d'une font icons à partir des images SVG présents dans le dossier img/icons
• La possibilité d'utiliser les fonctions CSS du future en cours de normalisation (custom-properties, custom media queries, customs selectors, color(), etc) grâce à cssnext (un plugin pour PostCSS)
• Le préfixage automatique des propriétés CSS (PostCSS auto-prefixer)
• Une série de tasks Grunt pour une compilation & un rafraichissement automatique (live refresh) du navigateur.

Requirements

• Le projet utilise le task runner GRUNT.
• Grunt et les plugins utilisés nécessitent nodeJS >= 4.4.3.

Pour plus de détails pour l'installation sur votre machine : Grunt getting started

Getting started

Téléchargez la dernière version stable de Amorce. Depuis un shell/terminal (placé à la racine de votre projet), installer les paquets nodeJS requis avec la commande :

• npm install

Puis compilez une première fois les fichiers sources avec la commande

• grunt init ou grunt build

Compilation à la volée

grunt

La commande grunt est paramétrée pour lancer un watcher sur les fichiers sources. Ainsi, à chaque modification d'un fichier source html ou css, les fichiers seront compilés automatiquement.

De plus un serveur browsersync est également lancé permettant de rafraichir automatiquement votre browser à chaque modification.

Commandes de compilation manuelles

• grunt buildcss : compile les fichiers CSS à l'aide de cssnext.
• grunt buildicons : compile les fichiers .svg présents dans src/static/img/icons/`: optimisations des images et génération d'une font icons.
• grunt buildhtml : compile les fichiers sources .njk qui utilise le system de templating _nunjucks_ en templates html.
• grunt modernizr : inspecte les fichiers CSS et JS du projet et compile un fichier modernizr-custom.js.
• grunt builddocs : Compile les fichiers sources njk pour générer la documentation au format html.

Pour plus de précision, vous pouvez inspecter les fichiers package.json et gruntfile.js.