Commencer

Comment utiliser

Styleguide est totalement modulaire, ce qui signifie deux choses:

  • Le contenu est séparé du code.
  • Le code est divisé en modules indépendants.

Avec ceci à l'esprit, nous vous recommendons d'apprendre à utiliser le système avant de commencer à construire la charte graphique pour votre projet.

Fichiers _data.json
  • Dans ces fichiers vous trouverez tout le contenu textuel et les configurations.
  • Il y en a un dans le dosser du guide et un dans chaque module.
Fichiers génerés
  • Dans le dossier assets/scripts un fichier sera géneré si vous voulez importer tous vos modules Javascript dans votre projet.
  • Dans le dossier assets/styles un fichier sera géneré si vous voulez importer tous vos modules de feuille de style dans votre projet.

Modules

Cliquer içi pour en apprendre plus sur les modules.

Mac

Pour les utilisateurs Mac, nous avons un programme d'installation avec toutes les dépendances nécessaire pour faire fonctionner Styleguide.

  • L'application 'Start' installe tout ce dont vous avez besoin. Vérifiez la section des problèmes connus avant de lancer l'application. Une fois finie, Styleguide s'ouvrira automatiquement dans votre navigateur. Si vous disposez déjà de toutes les dépendances installées sur votre machine, Styleguide s'ouvrira.

  • L'application 'Compile' créée une version statique de Styleguide dans un dossier 'www'.

*Dépannage? Cliquer içi.

Télécharger pour Mac

Windows/Linux

Désolé, nous ne disposons pas actuellement d'application 'magique' pour ces plateformes. Mais nous y travaillons.

Pour utiliser Styleguide, vous devez exécuter quelques ligne de commande dans le terminal.

*Visiter la section "Installation manuelle".

Télécharger pour Windows/Linux

Instalation manuelle

Ce projet a les dépendances suivantes (Cliquez pour les installer chacune d'elles):

Vous pouvez également aller au dossier styleguide/structure/_node-files et lancer dans le terminal:

npm install

Pour lancer Styleguide, aller au dossier racine et exécuter en ligne de commande:

harp server
cd styleguide/structure/_node-files && node watch.js

Patienter pendant que le navigateur s'ouvre avec Styleguide.

harp compile

Pour compiler manuellement le projet, aller au dossier racine et exécuter (en ligne de commande):

cd styleguide/structure/_node-files && node write-date-exec.js
cd ../../.. && harp compile

Un dossier nommé 'www' sera créé avec tous les fichiers compilés.

Problèmes connus

1 - Autorisez les applications non enregistrées à être exécutés afin d'utiliser le fichier Start.app. Ceci peut être effectué dans Settings > Sécurité et confidentialité

2 - La version compilée a un bug hors ligne sous Chrome car ce dernier dispose d'une politique de sécurité qui ne permet pas la communication avec les iframes sous le protocole file://. Pour ceci, les interactions qui ont besoin de ce type de communication seront annulées (essentiellement le menu latéral). Ceci uniquement pour la version compilée hors ligne.

3 - Si vous êtes sous Mac et une fois lancé Start.app vous recevez cette erreur:

npm ERR! Please try running this command again as root/Administrator.

Vous avez probablement installé Node avec sudo ou en permission root. Vérifiez les permissions du dossier .npm avec la ligne de commande suivante:

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Une fois effectué, essayez de relancer Start.app.

4 - Si vous avez XCode installé mais que vous n'avez pas accepté la license, vous recevrez cette erreur:

Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

Ouvrez XCode, acceptez la license et relancez Start.app.

5 - Si vous recevez une erreur 404 - No data received, vous pouvez avoir un conflit de port (défaut 9241). Deux solutions s'offrent à vous:

  • Changer la variable PORT dans le fichier styleguide/structure/_node-files/watch.js

  • Définir une variable d'environnement (PORT ou STYLEGUIDE_PORT):

    Si vous utilisez Styleguide manuellement, dans la dernière étape, vous pouvez faire:

      PORT=7000 node watch.js

    ou

      STYLEGUIDE_PORT=7000 node watch.js

    L'application start.app est autonome et pour des raisons de sécurité n'a pas accès à des variables externes. Si vous voulez changer le port pour Start.app, il est recommandé de changer le fichier watch.js. Vous pouvez également additionner une variable à votre fichier .bashrc pour être utilisée par Start.app:

      touch ~/.bashrc
  echo 'export PORT=1234' >> ~/.bashrc

    ou

      echo 'export STYLEGUIDE_PORT=1234' >> ~/.bashrc