ההבדל הגדול בין ספריית Zurb Foundation ל Bootstrap הוא יכולת השילוב וההתאמה האישית של הספריה (נכון לגירסא 5 של Foundation ו 3 של Bootstrap). להלן מספר דוגמאות ורעיונות להתאמות שניתן לבצע בקלות ב Foundation.

1. בנו לעצמכם Foundation

לפני שנתחיל צריך לזכור ש Foundation כתוב ב Sass ולכן כל התאמה אישית של הספריה תדרוש שינוי של קבצי ה Sass שלה ובניה מחדש של קבצי ה CSS. אתם יכולים להוריד את קבצי המקור ב github על המכונה שלכם או להיעזר במכונה שכבר הכנתי מבעוד מועד:

בצד שמאל אתם רואים את עץ הקבצים של התיקייה. אפשר להכנס לתיקיית scss שם ולשנות את קבצי המקור. לאחר מכן הכנסו לטאב Terminal והקלידו:

grunt sass

כדי לבנות את קבצי ה CSS של הספריה. התוצאה זמינה בתיקיית dist/assets/css.

2. התאמת הגדרות הספריה

כל הגדרות הבניה של Foundation נשמרות בקובץ _settings.scss שנמצא בתיקיית scss/foundation. פתחו קובץ זה לעריכה באמצעות פתיחת התיקייה בעץ התיקיות ולחיצה כפולה על שם הקובץ.
Sass מאפשר הגדרת משתנים כדי לייצג ערכים חוזרים או ערכים נגזרים ב CSS. כל המשתנים של Foundation ניתנים להתאמה דרך קובץ ההגדרות. שינוי כאן יוביל לשינוי גלובלי בעיצוב. כך למשל נוכל לבחור שברשת יהיו 16 תאים במקום 12, להגדיר טיפוגרפיה שונה או לשנות כללי עיצוב לכל אחד מהמודולים.

לצורך הדוגמא בואו נבנה ספריית Foundation עם צבע רקע כתום. הוציאו מהערה את שורה 127 ושנו את הערך בהתאם.

3. בניית רכיבים משלנו המשלבים קוד מ Foundation

בלי ספק היתרון הגדול של Sass הוא היכולת לשלוף חלקים מתוך הספריה ולשלב אותם בקוד שלנו. הקלאס inline של label ב Foundation מגדיר שוליים תחתונים וגובה שורה כך שהתווית נמצאת באותה השורה עם תיבת הטקסט שלה.

נגדיר קלאס חדש בשם inline-medium-up שבהפעלתו על תווית היא תתנהג כמו inline label במסכים בינוניים אך כתווית רגילה במסכים קטנים (שם אין לה מקום להופיע כ inline). לצורך כך נגדיר קובץ scss משלנו: בתיקיית scss הוסיפו תיקיה חדשה למשל בשם my ובתוכה את הקובץ _my.scss. הקובץ מתחיל בסימן _ כדי שלא ייבנה בנפרד אלא יהפוך לחלק מהבניה של foundation. באופן זה לא נקבל כללי CSS כפולים.

בתוך הקובץ יכולים לרשום את הקוד הבא:

@import '../foundation/components/global';
@import '../foundation/components/forms';

@media #{$medium-up} {
  .inline-medium-up {
    @include form-label(inline, false);
  }
}

ולאחר מכן נוסיף לקובץ foundation.scss את המודול החדש שלנו באמצעות הוספת שורת import לסוף הקובץ:

@import 'my/my';

בבניה הבאה נקבל קובץ foundation.css שיכלול גם את הקלאס החדש שהגדרנו.

יכולת ההרחבה של Foundation היא היתרון הגדול שלה. השימוש במשתנים ובמיקסינים של Foundation מאפשר לנו להרחיב את הספריה בלי לחשוש שבגירסא הבאה דברים יישברו ובלי לשכפל קוד.