דף הבית » עיצוב אתרים » קרן 6 - 10 תכונות חדשות מדהים

    קרן 6 - 10 תכונות חדשות מדהים

    מפתחי הקרן חזית מסגרת לא ישבו רק על זרי הדפנה שלהם בזמן צוות Bootstrap כבר עובד על שחרור מרשים חדש שלהם. בשנה שעברה הם הלכו על סיור עולמי מדהים לחלוק את הידע שלהם עם המשתמשים שלהם ולשאול אותם על איך הם היו באמצעות קרן בעבודה שלהם בחיים האמיתיים.

    לאחר שחזרו לשולחנותיהם, הם צברו את הצרכים והמשאלות של המשתמשים שלהם, והחלו לתכנן את המהדורה החדשה החדשה של המסגרת: Foundation 6.

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

    1. זרימת עבודה יעילה

    בהתבסס על חוויות המשתמשים שלהם, פיתח צוות הקרן סיסמא חדשה, דהיינו “אב טיפוס לייצור”, עבור קרן 6. משמעות הדבר היא זרימת עבודה חדשה ויעילה שתאפשר למעצבים ולמפתחים לעשות זאת ללכת ישר אב טיפוס לייצור.

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

    2. תהליך ההתקנה פשוטה עבור גרסת סאס

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

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

    3. ערימת התקנה חדשה ומרוכזת עבור מקסמליסטים

    מלבד גרסת סאס הרגילה, קרן 6 תבוא עם מרק גרסת סאס שתספק מפתחים עם אפשרויות התאמה אישית חזקה.

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

    כך שבאופן בסיסי נוכל להפעיל את סביבת הפיתוח אותה משתמש ZURB באופן פנימי.

    4. ירידה זמן טעינת הדף

    צוות הקרן נאלץ להתמודד עם כמה ביקורת בונה שטענה כי ברוב הפרויקטים הקרן, על 90% של קוד ה- CSS הולך יוצא דופן. זה לא היה נכון רק עבור הקרן, אלא גם עבור מסגרות גדולות אחרות CSS כגון Bootstrap ו TopCoat. כחלק מהתשובה שלהם, החליטה Zurb לחתוך באופן משמעותי את גודל הקובץ של CSS פלט על ידי יישום של כ 40-50% קוד הפחתה.

    IMAGE: Freepik.com

    מעניין לציין כי הם מנסים להבדיל את עצמם מ Bootstrap ידי הקביעה "הקרן היא לא מסגרת כי יהיה שולי מעמדות סגנוניים ריפוד או סביב רדיוס"(לקבלת מידע ראה את כלי השירות החדשים של Bootstrap 4 בפוסט הקודם שלנו).

    5. סגנונות בסיס מתנהג כמו Wireframes

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

    IMAGE: Freepik.com

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

    6. ייבוא ​​סלקטיבי להקל

    קרן 5 מאפשרת למפתחים לבחור רק את הרכיבים שהם רוצים להשתמש בהם. קרן 6 ייקח מאמץ זה לשלב הבא על ידי הזזת תכונת הייבוא ​​הסלקטיבית לקובץ Sass _settings.scss.

    IMAGE: Zurb.com

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

    7. Leaner ו מנקה סאס

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

    IMAGE: Zurb.com

    בקרן 6 אנחנו יכולים לצפות ירידה קינון וספציפיות, שאילתות מדיה יעילה (הם מיזגו קוד חוזר), ו סלים בחזרה mixings רכיב. האחרון אומר כי יהיו פחות mixins רכיב, ואת הנותרים יהיו פחות פרמטרים, אשר יוביל קוד פשוט, יותר הגיוני

    אם אתה אוהב mixins, אל דאגה, כל רכיב עדיין יש להם אותם, זה רק שהם יעוצבו מחדש כדי להיות יעילים ושימושיים יותר ממה שהם כרגע.

    8. משופר Grid Mixins

    בעוד חיתוך בחזרה mixins רכיב, קרן 6 יבוא עם רשת משופרת mixins זה יאפשר לנו ליצור רשת מותאמת אישית יותר.

    IMAGE: Foundation.zurb.com

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

    9. אינטגרציה חלקה של יישומי JavaScript מותאמים אישית

    קרן 5 כיום יש רכיבים רבים JavaScript כגון דיאלוגים מודלי מגניב, tooltips, סרגל ניווט דביק, lightboxes, ורבים אחרים כי האתר המודרני צריך, אבל המהדורה הגדולה הקרובה תאפשר לנו לכתוב יישומי JavaScript מותאמים אישית שלנו תוך ניצול הליבה של הקרן. זה צעד ענק קדימה בשניהם ידידותיות למשתמש וביצועים.

    IMAGE: Foundation.zurb.com

    בעתיד נוכל לעשות זאת לגשת לשיטות האתחול המובנות, toggle מעורר ו נקודות, ולעשות שימוש בכל התכונות האחרות של JavaScript העולמי של הקרן.

    10. נגישות מלאה

    כנראה התכונה המדהימה ביותר של הקרן החדשה 6 היא שזה יהיה נגיש באופן מלא. כל רכיב וקטע קוד יבואו עם תכונות ה- WAI-ARIA המתאימות ותפקידים חשובים. מפתחים יתר על כן יהיה אפילו מסופק עם מדריך למשתמש על אודות כיצד להשתמש בתקני אינטרנט a11y.

    תמונה: מחלקת העבודה של ארה"ב

    אז אם אנחנו רוצים לספק ללקוח שלנו עם אתר נגיש באופן מלא, אנחנו לא צריכים לעשות שום דבר אחר מאשר לבנות את העיצוב שלנו עם קרן 6. שים לב שאנחנו עדיין צריכים הוסף את כללי ARIA המתאימים לדפי HTML שלנו בעצמנו, למרות ZURA הקרובים a11y מדריך למשתמש יהיה ללא ספק להקל על תהליך הלמידה.