ZURB Foundation: מסגרת CSS של ממשק משתמש לחזית רספונסיבית

בשנת 2010 יצרה סוכנות העיצוב ZURB מסגרת CSS במטרה להתחיל שירות עבור להקל על יצירת אבות טיפוס e לקצר את זמני הפיתוח. לשם כך נבחרו הקטעים, הדפוסים והתבניות הטובים ביותר שירכזו אותם ב-Foundation, המסגרת שפורסמה כפרויקט קוד פתוח ב-2011 ומאז ממשיכה להיות חופשית לציבור.

Foundation היא מסגרת קצה רספונסיבית, המורכבת מרכיבי HTML ו-CSS יעילים עבור תצורת ממשק המשתמש (ממשק משתמש), קטעי טקסט ותבניות שונות, אך גם תוספי JavaScript אופציונליים רבים. למסגרת האינטרנט יש א מבנה המודול והוא תוכנן להגדרת פרויקטים הנגישים ממכשירים שונים; מופץ עם רישיון MIT וניתן להוריד משניהם דף הבית הרשמי להיות על GitHub. מגרסה 4.0 של הקרן חלה הנחת העבודה "הנייד תחילה", אז מאז אנחנו עובדים בעזרת מספר מודולים חדשים כדי לייעל את הביצועים ולהקל על גודל הקבצים בתוך המסגרת. בנוסף לגרסה הסטנדרטית של Foundation, ZURB פרסמה גם גרסאות אחרות לפיתוח עלוני דואר אלקטרוני (הקרן למיילים) ואתרי דף אחד (קרן לאפליקציות).

Foundation, מסגרת האינטרנט הרספונסיבית המאופיינת במבנה המודולרי שלה, נהנית מעל הכל בגמישות. יש לך את האפשרות להחליט לפני ההורדה אילו רכיבים לבחור ואילו לא: בדרך זו אתה יכול להרכיב גרסה משלך של אוסף קודי האינטרנט מבלי להיאלץ להוריד מודולים שאינך צריך. ואם קורה שאתם מבינים שאתם צריכים רכיב שלא בחרתם בזמן ההורדה, תוכלו להוסיף אותו בקלות למסגרת מאוחר יותר. באותו אופן ניתן גם להסיר מודולים שאינם שימושיים יותר עבורך: כך מובטחת לך תמיד האפשרות לקבל רק את הפונקציות שאתה מחשיב באמת נחוצות עבור מימוש פרויקט האינטרנט שלך.

עבור Foundation 6.0 יש לך אפשרות לבחור יותר 40 רכיבים השייכים לשבעת המגזרים הבאים:

• רֶשֶׁת: המרכיב המכריע בעיצוב אתרים רספונסיבי הוא הפריסה הגמישה של ה-Grid, עם רוחב תואם סטנדרטי של 1200 פיקסלים. ניתן גם לבטל את הבחירה במודול זה, אולם המערכת מהווה את הבסיס לעיצוב פרויקט אינטרנט הנגיש ממכשירים שונים ותואם בקנה מידה שונה של רזולוציה. בנוסף לכך, החל מגרסה 6.0 ישנה גם אפשרות לבחור במודול "Flex Grid", המאפשר מיקום גמיש עוד יותר של האלמנטים על ידי הפעלה על בסיס דגם CSS flexbox (כגון אופקי או אנכי ארגון החפצים).

• כללי: בין המודולים הכלליים (שרשמית גם Grid הוא חלק מהם) יש בראש ובראשונה את השיעורים לצוף e ראות, שבזכותו אתה יכול defiלהגדיר כללי התנהגות לגבי מיקום ונראות של אלמנטים בודדים; בנוסף, באזור זה תמצאו גם רכיב ליצירת טפסים וכן את מודול בית הדפוס המכיל את הפורמטים הבסיסיים לכתיבה ולטקסט.

• שליטה: כל האלמנטים האינטראקטיביים החיוניים ביותר של פרויקט האינטרנט שלך כלולים כאן. לדוגמה, אלו הם כפתורים שמנחים את המשתמש למקום אחר בלחיצה או שסוגרים אלמנטים נבחרים. ישנם גם מודולים שאיתם ניתן לשלב סליידרים ו כפתורים עם מצב הפעלה/כיבוי.

• ניווט: בתצורה של הקצה הקדמי, רכיבי ניווט בהחלט לא יכולים לפספס, כך שגם כדי שהפרויקט שלך יתבצע עם ZURB Foundation יש לך מגוון גדול של מודולים שאפשר להגדיר איתם שורת תפריטים ותפריטים (תפריט נפתח, רשימה נפתחת, פירוט), הוסף נתיבי ניווט (פירורי לחם) או הוסף את המספר לדפים.

• מכולה: מיכלים הם הזדמנות נפלאה לכלול אלמנטים שונים כגון טקסט, תמונות או סרטונים בחלל משותף. כאן תמצאו סגנונות עבור ווידג'טים של תוכן קלאסיים כגון תפריטים נפתחים, כרטיסיות, סקטורים מדורגים או דיאלוגים מודאליים.

• מדיה: בתוך הקטע "מדיה" תמצאו את מודולי המסגרת שיהיו שימושיים לשילוב אלמנטים מולטימדיה. רכיב "Flex Video", למשל, תומך בכםהכנסת סרטונים ומקפידה על התאמה של התוכן לגדלי תצוגה וסוגי רזולוציה שונים. בנוסף, ישנם גם רכיבים לתצוגה מקדימה של תמונות וכן עצות שימושיות לשימוש בכלים.

• חיבור: לבסוף אתה יכול לבחור כמה הרחבות שימושיות מאוד עבור ZURB Foundation שמקלים עליך לעבוד עם מסגרת האינטרנט. עם ספריית "Motion UI", למשל, יש לך אפשרות להוריד ספרייה שימושית מאוד, גם אם זמינה רק עבור גרסת Sass, מה שהופך את היצירה של קטעי ממשק משתמש ואנימציות לפשוטה.

כמו כן, לפני ההורדה, אתה יכול לבחור אם defiלסיים כמה הגדרות סטנדרטיות למסגרת. אלה כוללים אפשרויות לשינוי מספר או עובי העמודות והרוחב המרבי של מערכת ה-Grid, וכן הגדרות צבע שונות וקביעת כיוון הטקסט (משמאל לימין או מימין לשמאל). אם אתה רוצה קודם כל לבדוק את המסגרת מבלי ללמוד את תפקוד המודולים הבודדים, אתה יכול גם להוריד את Foundation כגרסה מלאה (להשלים) או לחילופין כגרסה בסיסית קלה יותר (חִיוּנִי).

אם אתה מרוצה מההזדמנויות שמציע CSS ואז פשוט מתמלל את הסגנונות בקובץ ה-CSS שהורדת, בוודאי קיבלת את ההחלטה הנכונה. עם זאת, למסגרת הקרן יש עוד תכונה מיוחדת אחת: הבסיס של קוד ה-CSS כתוב בשפת גיליון הסגנונות של Sass (גיליונות סגנונות מדהימים מבחינה תחבירית), שהוא מה שנקרא מעבד קדם עבור CSS. Sass מאפשר לך לעבוד על גיליונות סגנונות .scss אשר לאחר מכן ניתן להידור או לתמלל לקבצי .css פופולריים ולאחר מכן נקראים ומתפרשים על ידי דפדפנים.

אם אתה משתמש בגרסה של Sass של מסגרת ZURB, תיהנה מהיתרונות הבאים:

• תחביר פשוט (Sass או CSS), מה שמקל על כתיבת גיליונות סגנונות

• האפשרות של defiאח של דגמים (מיקסינים) לשמירת פורמטים חוזרים באופן מרכזי ושילובם כרצונם

• שילוב פשוט של גיליונות סגנונות שונים כדי למזער בקשות HTTP

• באמצעות משתנים ופונקציות להחליף צבעים, מרחקים, גופנים וכן הלאה, במרכז

• הקוד יכול להיות פשוט מובנה בזכות קינון בסדר היררכי, מה שמאפשר לך לעבוד בצורה נקייה יותר בלי יותר מדי מחרוזות קוד

מהדר Sass נכתב במקור ברובי. עם זאת, אם אינך משתמש בשפת תכנות זו, אינך נאלץ להתקין אותה עבור Sass כי עם LibSass תהיה לך חלופה כתובה ב-C. LibSass עובד עם כל מערכות ההפעלה בשימוש וניתן להתקין אותה בקלות על Node.js זרימת עבודה, כלומר לבצע שינויים בקוד ב-Sass ולתרגם אותם אוטומטית ל-CSS.

עם המעבר מגרסה 5 ל-Foundation 6.0, ZURB שוב הקטינה את גודל הקובץ של המסגרת כולה: עם 60 KB של CSS ו-84 KB של JavaScript, Foundation נהנית מהמוניטין של אחת מפלטפורמות הפיתוח היעילות ביותר ולקרוא שיש. הודות למבנה המודולרי שהוזכר לעיל וחופש מסוים של התאמה אישית, אתה אפילו יכול להקטין עוד יותר את גודל המסגרת. בשילוב עם ה-Grid הגמיש והשונה תכונותאריה (לדוגמה עבור טרנספוזיציה של ניווט יעיל במקלדת) המיושם על ידי ZURB, התנאים הבסיסיים, הכרחיים למימוש פרויקט אינטרנט התואם בפלטפורמות ומכשירים שונים, יכולים להיחשב מרוצים לחלוטין. תכונות ARIA מתועדות בצורה הטובה ביותר וזמינות במקום שבו אתה מתכוון לייעל באופן משמעותי את הנגישות של האתר שלך.

אם אתה עובד עם גרסת ה-Sass של המסגרת, וודא שאתה מרחיב את האפשרויות שלך להגדרת רכיבי העיצוב והפריסות שאתה מוסיף. השימוש בגיליונות הסגנונות המיוחדים הללו אינו קל בשום אופן לטירונים ודורש תקופה מסוימת של למידה, מה שנכון בדרך כלל גם לפלטפורמה. גם אני'אינטגרציה של רכיבים חיצוניים, כמו גם מודולים ופרויקטים של קרן במסגרת אחרת או ב-CMS זה מאוד מסובך. החולשות הקטנות שמציגה ZURB Foundation בהשוואה למסגרות CSS אחרות, כמו Twitter Bootstrap, הן המגוון המצומצם של תבניות וחוסר התמיכה בגרסאות ישנות יותר של Internet Explorer.

קרן ZURB מלווה מפתחים מהאב-טיפוס הראשון ועד לאתר המוכן לשימוש ומאופיינת בעיקר בעצמה. יעיל. אם אתה מגלה שחלק מהרכיבים מיותרים, יש לך אפשרות לבטל את הבחירה בהם מבלי להשפיע על הפונקציונליות של אלמנטים אחרים. לסיכום, מסגרת ה-CSS מאופיינת בקוד דק במיוחד המדגיש את הלייטמוטיב שנבחר על ידי ZURB "Mobile First". ביחד עם מערכת רשת גמישה במיוחד, שאתה יכול להתאים באופן אופציונלי עם Sass, המסגרת אידיאלית לפיתוח קצה קדמי רספונסיבי שיש להם יתרון בעלות מהירות גבוהה בטעינת נתונים ונגישות רבה, כמו גם התאמה לגדלי מסך שונים.

ניתן גם להשתמש במסגרת ZURB ליצירת פרויקטי אינטרנט מותאמים ואולי יותר מורכבים, אולם הדבר קשור לעומס ניכר של אנרגיה ודורש הבנה טובה של הקטעים.