Comment remplacer \ edit les styles CSS de la base de Zurb Foundation?

C'est ma première fois à l'aide de Zurb Foundation pour un projet web. Cependant, je ne suis pas sûr que ce soit de remplacer leurs styles avec mon propre sur une autre feuille de style ou de modifier directement foundation.css.

Par exemple c'est leur valeur liquidative css (à l'intérieur de foundation.css):

.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}

Si je veux changer le background et margin-topdois-je modifier directement .nav-bar de foundation.css ou créer ma propre feuille de style (mettre un style.css ci-dessous foundation.css) et de la remplacer comme suit:

.nav-bar {
    background: #999;
    margin-top: 0;
}

Est-ce une bonne pratique? Si non, quelle serait la meilleure façon d'aller à ce sujet?

source d'informationauteur catandmouse

  1. 21

    La meilleure pratique consiste à substituer leur feuille de style en utilisant une coutume .fichier css comme vous l'avez décrit. De cette façon, si une mise à jour est publiée, par exemple une correction de bugalors que vous venez de remplacer la fondation.fichier css.

    Si vous modifiez la fondation.fichier css directement et souhaitez mettre à jour le cadre, puis vous devez effectuer manuellement les mises à jour vous-même.

  2. 9

    La meilleure pratique est de lire documentation sur le site web de la Fondation Zurb. Deuxième meilleure pratique est d'ouvrir les 2 dossiers au sein de votre téléchargement: css et js. Dans ce dossiers, vous trouverez:

    app.css et app.js

    Ce sont les fichiers de Zurb pré-faites pour vous, alors vous pouvez commencer primordial leurs styles!

    Il est recommandé de ne pas toucher foundation.js ou de la fondation.css . Vous ne serez pas en mesure de mettre à niveau pour les futures options ou vous pouvez frein à quelque chose que vous ne voulez pas de frein. Amusez-Vous Bien!

  3. 1

    En fait, vous pouvez utiliser seulement à la fondation.fichier css. Si vous créez une coutume de la Fondation CSS installer, plutôt que d'utiliser le CSS par défaut installer, les personnalisations que vous indiquez résider dans ce fichier. Si Zurb allait changer ce fichier à l'adresse de bugs et des mises à jour, ce fichier devrait être le même sur tous les installe, ne serait-il pas?

    Zurb documentation dit "de la fondation.css est un fichier CSS que vous pouvez utiliser dans vos pages si vous n'avez pas besoin de chercher en dehors du sous-jacent de la Fondation CSS."

  4. 1

    En fait le meilleur moyen de surcharger les styles sur la Fondation (ou toutes les grandes cadre) est d'utiliser leur SASS et/ou de la Boussole version. (ou du MOINS pour ceux qui ont le malheur d'être en essayant de style Bootstrap)

    Il est beaucoup plus facile de passer par le _settings.scss fichier pour changer les couleurs, les hauteurs et les points d'arrêt plutôt que d'essayer de piocher à travers des milliers de lignes de code css pour assurez-vous que vous avez remplacé tout ce dont vous avez besoin.

    Oui c'est un peu d'une courbe d'apprentissage pour obtenir tout mis en place, mais il vous fera économiser des heures dans le long terme.