2012-12-10 10 views
12

Po raz pierwszy używam Zurb Foundation do projektu internetowego. Nie jestem jednak pewien, czy nadpisać ich style własnymi na osobnym arkuszu stylów, czy bezpośrednio edytować foundation.css.Jak przesłonić edytować podstawowe style CSS w Zurb Foundation?

Na przykład to jest ich css nav (wewnątrz foundation.css):

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

Jeśli chcę zmienić background i margin-top, mogę bezpośrednio edytować .nav-bar z foundation.css lub stworzyć własny arkusz stylów (umieścić style.css poniżej foundation.css) i zastąpić go tak:

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

Czy to dobra praktyka? Jeśli nie, jaki byłby najlepszy sposób, aby to osiągnąć?

Odpowiedz

21

Najlepszą praktyką jest zastąpienie ich arkusza stylów przy użyciu niestandardowego pliku .css, takiego jak opisany. W ten sposób, jeśli zostanie wydana aktualizacja, , na przykład poprawka błędu, to wystarczy zastąpić plik foundation.css.

Jeśli bezpośrednio edytujesz plik foundation.css i chcesz go zaktualizować, musisz ręcznie dokonać aktualizacji samodzielnie.

+1

Zgadzam się z tym. Jest to szczególnie ważne, jeśli pobierzesz niestandardową wersję css (nie wersję Sass/Compass), ponieważ pozwoli ci użyć różnych modyfikacji podstawy podczas dodawania/usuwania funkcji lub zmieniania podstawowych kolorów używanych. – JAMESSTONEco

9

Najlepszą praktyką jest odczytanie dokumentacji na stronie internetowej Fundacji Zurb. Druga najlepsza praktyka to otwieranie 2 folderów w pobranych plikach: css i js. W ramach tego foldery znajdziesz:

app.css i app.js

Są to pliki ZURB gotowych dla Ciebie, dzięki czemu można rozpocząć nadpisanie ich style!

Nie zaleca się dotykania pliku foundation.js lub foundation.css. Nie będziesz w stanie dokonać aktualizacji na przyszłe opcje lub możesz zahamować coś, czego nie chcesz hamować. Happy Coding!

+0

Lub jeśli używasz sass, ** app.scss ** – visyoual

1

Właściwie można po prostu użyć pliku foundation.css. Jeśli utworzysz niestandardową instalację programu Foundation CSS, zamiast korzystać z domyślnej instalacji CSS, spersonalizowane ustawienia będą znajdować się w tym pliku. Jeśli Zurb miał zamiar zmienić ten plik w celu usunięcia błędów i aktualizacji, ten plik musiałby być taki sam we wszystkich instalacjach, prawda?

Dokumentacja Zurb mówi "foundation.css, to plik CSS, którego można używać na swoich stronach, jeśli nie trzeba wybierać rzeczywistego podstawowego skryptu Foundation".

1

Właściwie najlepszym sposobem na zastąpienie stylów w Fundacji (lub w jakimkolwiek głównym systemie) jest użycie ich wersji SASS i/lub Kompasu. (lub MNIEJ dla tych nieszczęśliwych, którzy próbują naśladować Bootstrapa)

Znacznie łatwiej jest przejść przez plik _settings.scss, aby zmienić kolory, wysokości i punkty przerwania, niż próbować przeszukiwać tysiące linii kodu css, aby upewnić się, że nadpisałeś wszystko, co potrzebujesz.

Tak, to trochę nauki, aby to wszystko skonfigurować, ale to zaoszczędzi ci godzin na dłuższą metę.