Bootstrap: תבניות עיצוב לווב

לא לכל פרויקט יש מעצב גרפי. למי מכם (מתכנתים) שיצא ליצור אתר/אפליקצית ווב מ scratch, בוודאי יודע שידע ב CSS ובאפקטים - פשוט לא מספיק כדי לייצר אתר יפה:

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

בכלל, ברירת המחדל של HTML איננה ממש אסתטית: טקסט שחור על רקע לבן עם מרווחים לא הגיוניים וללא צבע, הפקדים נראים כמו פקדים בסיסיים של מערכת ההפעלה... - זו לא התחלה טובה לאתר "החלומות" שלנו.
האם HTML5 boilerplate ישפר את המצב? Plug-Ins של jQuery לאפקטים הם הדרך? לא, לא, ולא.

בשנים האחרונות צצה ספרייה שעושה הבדל משמעותי ביכולת לייצר אתרים יפים. יש לספרייה זו גם כמה אלמנטים חדשניים ברמת המימוש, ששווה לדבר עליהם.
הספריה הזו היא הפרויקט הפופולרי ביותר ב github (יותר מ jQuery, RoR ואחרים) ואחרי שתעבדו בה מעט, תזהו אלמנטים שלה בהרבה אתרי האינטרנט שתבקרו בהם.

בפוסט זה אציג כמה מהרעיונות העיקריים של ספריית Bootstrap מבית Twitter.

על Bootstrap

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

• Layout מסוים של הדף.
• Navigation Menu - המאפשר לעבור מדף לדף באתר.
• Side Bar - אם מידע שימושי שאינו משתנה, או משתנה מעט ע"פ התוכן המוצג במרכז הדף
• וכו'.

הנה 3 אתרים לדוגמה שמציגים את תבניות הללו (לחצו על התמונות כדי להגדיל):

 

יש עוד כמה תבניות נפוצות אחרות, למשל כמו grid (קרוי גם: cards):

Bootstrap מנסה לתת התחלה של עיצוב אלגנטי לאתר. רק מעצם ההוספה של ספריית bootstrap לדף HTML פשוט - הוא כבר נראה קצת טוב יותר:

טקסט HTML פשוט, בלי ועם Bootstrap שנטענה.
וידוי: הוספתי על אלמנט ה body תכונת class עם הערך container, בכדי לקבל את המרכוז.

Responsive Web Design

משפחה חשובה נוספת של תבניות עיצוב-אתרים שהופכת לפופולרית בשנים האחרונות היא משפחת התבניות של Responsive Web Design (בקיצור RWD): כיצד מתאימים אתר למחשב שולחני, טאבלט וסמארפון - מבלי לכתוב את האתר 2 או 3 פעמים (= תוספת עלות משמעותית לפיתוח!)

אם עד לא מזמן כל המשתמשים היו משתמשי desktop עם רזולוציית מינימום מסוימת (נאמר 1024x768), כיום יש פיזור משמעותי בין סוגי המכשירים השונים. אמנם טאבלטים יש מעט פחות, אך ע"פ נתונים, ממכשירי טאבלט גולשים יותר מאשר ממכשירי סמארטפון. המגמה הולכת ועולה ובעתיד הקרוב, דווקא המחשב השולחני יהיה החשוב פחות מבין השלישייה.

למרות הבאזז הרב מסביב ל"תחכום" שב RWD, ניתן למצוא מספר של תבניות פתרונות עיצוב שחוזרים על עצמם:

• "קיפול" תפריטים (toolbar) ל drop-down menu
• צמצום מספר עמודות של desktop/tablet ל "מחסנית" (stack) - בסמארטפון
• תמונות ברזולוציות שונות למכשירים שונים
• התמודדות עם touch events
• וכו'

יש גם כמה פתרונות טכניים, שחוזרים על עצמם, להתמודדות עם RWD.
שימוש ב Media Queries (שיושבים בתחתית ה CSS כדי שיוכלו לדרוס חוקים אחרים) - הם שלב ההתחלה. ניתן לעתים להתרשם שזה כל העניין ב RWD - אך זה ממש לא כך.

גישה נפוצה היא מה שנקרא "גישה מצמצמת" (subtractive approach) בה כדי שאתר יתאים ל Smartphone, למשל, מוסיפים לקוד ה Desktop קטעי קוד ש"יבטלו" פונקציונליות מסוימת / פחות חשובה שאין לה מקום במסך ה Smartphone.
המשמעות היא שכל הקוד של ה Desktop ירוץ על המכשיר הכי חלש (סמארטפון [ב]), ויש פה חוסר יעילות משמעותית.

הגישה העדיפה בד"כ היא מה שנקרא Progressive Enhancement (חלק מ"Mobile First") - לטעון את הבסיס למכשיר הסמארטפון, ולטעון עוד קוד / קבצים למכשירים ה"חזקים" יותר - קוד שמוסיף את הפונקציונליות הנוספת של המכשירים הללו.

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


הערה: במרכז Bootstrap גרסה 3 (החדשה, יחסית) עמד הנושא של Responsive Design ו Mobile First (בגלל ההבנה שזה שמובייל הופך להיות מרכז השוק). Bootstrap 3 הציגה שינויים לא תואמים-לאחור ל Bootstrap 2, ורבות מהתכונות / פתרונות שאתאר בפוסט זה, המתבסס על Bootstrap 3, לא יהיו נכונים / מדויקים לגרסאות ישנות יותר.

הערה נוספת: Bootstrap היא לא יחידה במינה. ישנן עוד כמה ספריות אחרות עם עקרונות דומים מאוד ל Bootstrap, ספריות כמו Pure, Neat, Foundation או SemanticUI. יש טענות שספריות חדשות, כמו Neat, Pure או SemanticUI הן הצעד הבא של Bootstrap, אך בחרתי להתמקד ב Bootstrap כי היא כיום האופציה הפופולרית ביותר.

עיצוב ברירת-המחדל של Bootstrap

כמה נקודות מעניינות על Bootstrap

• Bootstrap פותחה בחברת Twitter על להתמודדות עם חוסר-קונסיסטנטיות של ה UI שפותח במחלקות שונות בחברה. עובדים בחברות גדולות בוודאי מכירים את האתגר.
• Bootstrap שוחררה כ Open Source באוגוסט 2011.
• כבר בפברואר 2012 (!!!) היא הפכה להיות הספריה הפופולרית ביותר ב Github. סקר הראה שכ 1% מאתרי האינטרנט בעולם בנויים בעזרת Bootstrap (רוב אתרי האינטרנט נבנו לפני ש Bootstrap בכלל הופיעה).
• Bootstrap מתבססת בעיקר על CSS ורק מעט JavaScript - הדבר מתאפשר בעקבות היכולות המקדמות של CSS3. כשיצאה - זו הייתה גישה חדשנית ביותר, היום ניתן למצוא משחק מחשב (פשוט למדי, שלא לומר מעאפן) שכתוב ב CSS ללא ג'אווהסקריפט.
• Bootstrap מתבססת על LESS (בזמן "קומפילציה"), בניגוד למתחרתה החשובה Foundation שמבוסס על SASS.
• Bootstrap נפוצה בעיקר בקרב אתרים קטנים, בהם מנסים לחסוך בעלויות פיתוח האתר, אך עדיין ניתן למצוא לא מעט אתרים "בעלי תקציב" המשתמשים ב Bootstrap, למשל: AngularJs, viber.com, SugarSync או האתר של Fender (לחובבי הגיטרות).
• טיעון נפוץ נגד Bootstrap הוא: "אתם לא רוצים שהאתר שלכם יראה כמו כולם".
• מקור המונח "Bootstrap" הוא מאגדה גרמנית על הברון מינכהאוזן, שהצליח על פי האגדה לחלץ את עצמו מביצה טובענית על ידי משיכה בשערו שלו. בגרסה מאוחרת יותר מסופר כי השתמש באוזן הנעל (באנגלית: Boot strap) כדי לחלץ עצמו מים גואה. בתרגום לעברית ניתן לומר ש Bootstrap הוא "אתחול" - לרוב תהליך שאחראי לאתחל את כל התוכנה. בהקבלה, ספריית Bootstrap מספקת התחלה קלה / מהירה יותר לפיתוח אתרי ווב שנראים טוב.
• Bootstrap היא מודולרית: ניתן לבחור באלו חלקים אתם משתמשים וליצור custom build קטן יותר מהספרייה המלאה. בנוסף, תוכלו להגדיר ערכים לפרמטרים (צבעים, פונטים, גדלים וכו') שאתם רוצים לשנות, והם "יקומפלו" (בעזרת LESS compiler) לתוך העותק הפרטי שלכם של bootstrap.
• Bootstrap כוללת סט אייקונים מתאימה (חשוב למי שאין לו מעצב גרפי צמוד).
• אפשר למצוא כמה אינטגרציות ל Bootstrap עם ספריות UI אחרות, למשל jQuery Bootstrap או Bootstrap Angular directives (עדיין לא עודכן לתמוך בגרסה 3).

ה Grid-System

בוטסטראפ לא המציאה את ה Grid System, אך יש לה Grid System בוגר, responsive ושבשימוש ניכר - אז כנראה שניתן ללמוד ממנו משהו.

בוטסטראפ מחלקת את המסך ל 12 עמודות וירטואליות. כל אלמנט על המסך מגדיר מה הרוחב שלו ב"עמודות", למשל 2 עמודות זה שישית מסך ו 6 עמודות הן חצי מסך. הגובה נקבע, כמובן, ע"פ התוכן של האלמנט. זה לא טבעי ב HTML לנסות לקבוע 2 מימדים של אלמנט (אלא במקרים בהם מוכנים לעבוד עם scrollbar).

למה בעצם לא לעבוד באחוזים? גם הם סוג של "responsive"?

• מסך צר יחסית כדאי למלא, אבל על מסך רחב מאוד, לפעמים אתר נראה טוב יותר עם שוליים בצדדים. כלומר במסכים גדולים בוטסארטפ יוצרת ריווח בצדדים ומחלקת רק חלק מהמסך ל 12 עמודות.
• כאשר עובדים עם עמודות - קל יותר לקבוע ריווחים (margin) קבועים בין העמודות. עם אחוזים לא מקבלים את האפקט הזה.
• 12 כמספר חלוקה הוא "מספר קסם" עיצובי: הוא מתחלק ב 2, 3 ו 4 - מה שמאפשר חלוקה הרמונית של אלמנטים בין דפים שונים. היכולת להגדיר אלמנט בדף אחד כ 50% ובדף שני כ 55% - הוא לא "בריא" עיצובית.
• 12 הוא מספר קטן מספיק כדי שהיה קל למתכנת לעשות חישובים בראש. "6 זה חצי, 5 זה כמעט חצי". לרוב מקובל לעבוד עם מערכות צרות (12 או 16) או רחבות (960 או 976) - המדמות עמודה ל"בערך פיקסל, תלוי במסך" - מערכות שלמפתח יהיה קל לעבוד איתן.

ה grid system הוא fluid, כך שאם "טעינו" בחישוב, או אולי זה חישוב דינאמי בעת ריצה, ואלמנט חורג מ 12 העמודות - הוא "קופץ" לשורה הבאה, מה שנקרא Wrapping.

ניתן ליצור nesting של grid בתוך grid. אלמנט ברוחב 4 עמודות (שליש) בתוך אלמנט ברוחב 4 עמודות יצור אלמנט ברוחב תשיעית מרוחב התוכן במסך.

כפי שאמרנו, בוטסטראפ מגדירה שיטה לכתיבת אתרים responsive. עד גרסה 3 מערכת ה grid הייתה תקפה לכל מכשיר ורוחב מסך. זה עבד לפעמים יותר טוב - ולפעמים פחות טוב. בוטסטארפ 3 מגדירה 4 מערכות grid ל 4 גדלים של מכשירים:

• lg, למסכים ברוחב 1200 פיקסלים או יותר (מכוון למחשב שולחני או laptop)
• md, למסכים של 992 עד 1200 פיקסלים (מכוון לטאבלט בהעמדת landscape)
• sm, למסכים של 768 עד 992 פיקסלים (מכוון לטאבלט בהעמדת portrait)
• xs, למסכים קטנים יותר (מכוון לסמארטפונים)

מאיפה נבחרו המספרים? מהניסיון של טוויטר. אתם יכולים לשנות אותם.

ארבעת מערכות הגריד מאפשרות לבצע התאמות למכשירים מסוימים. למשל: לומר לאלמנט "אתה ברוחב 6 ב lg, אבל ברוחב 12 ב sm" - זאת על מנת לעשות התאמה קלה למכשירים אחרים.

האם זה אומר שאני צריך להגדיר רוחב של כל אלמנט 4 פעמים??? - לא. לרוב תגדירו רוחב אחד בלבד (עדיף שבאותה מערכת צירים) - ובוטסטראפ ידע לתרגם בצורה יפה את רצונכם לשאר הרזולוציות. פה ושם צריך לעשות תיקונים ולעתים תאלצו באמת להגדיר רוחב של אלמנט בכל ארבעת מערכות ה grid.

איך קובעים רוחב של אלמנט? פשוט מוסיפים לו class של CSS בשם col-xx-yy, כאשר xx הוא lg עד xs ו yy הוא מספר מ 1 עד 12. למשל: col-sm-3 או col-md-9.

אם רוצים לחייב שאלמנטים יהיו ביחד (ולא יקפצו שורה) או שאלמנטים אחרים לא ייכנסו איתם לשורה, פשוט עוטפים אותם בתגית כלשהי ומסמנים עליה class בשם row. למשל:

<div class="row"> <img ... class="col-lg-2"><p ... class="col-lg-3"></div>

כלי נוסף ב grid system הוא היכולת ליצור ריווח בעזרת offset. למשל:

<div class="col-md-4 col-md-offset-4">

יציב אלמנט ברוחב 4 ובמרחק 4 מהאלמנט הקודם באותה השורה.

בואו נראה דוגמה לעיצוב של אתר ע"פ מערכת 12 העמודות:

פרמטר אחרון מעניין הוא הצמד visible ו hidden. אם אלמנט מסוים פשוט לא מתאים לסוג רזולוציה מסוים, נניח לסמארטפון, אפשר להעלים אותו ע"י הוספת class בשם "hidden-xs". הפרמטר visible יגרום לאלמנט לא להופיע בכל הרזולוציות שלא צוין, לדוגמה "visible-md" יציג את האלמנט רק בטאבלט בהעמדת landscape.

Components

לבוטסטראפ כולל סט של פקדים סטנדרטיים שאפשר להשתמש בהם ללא כתיבת ג'אווהסקריפט.
כיצד? ע"י annotations של CSS, כמובן!

בואו נראה כמה פקדים נפוצים:

ראשית כדאי להכיר את סכמת הצבעים שחוזרת על עצמה לאורך פקדים רבים:

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

הנה כפתורים:

או טבלאות מעוצבות:

כשפקדים צריכים נתונים, הם פשוט לוקחים אותם מתוך ה HTML (ואתם יכולים לשתול אותם שם ב js או עוד מהשרת):

זהו!
אני מרגיש שמיציתי את ההעתקה של התיעוד הרשמי של bootstrap. אם אתם רוצים לקרוא עוד בנושא - פשוט לכו לשם.

Plug-ins

אינני רוצה לחזור על תיעוד רשמי מצוין, אז אקצר בפסקה אחת את נושא ה Plug-Ins.

עם כל הכבוד (ויש!) ליצירת סט פקדים עשיר ויפה על בסיס CSS בלבד, ישנם כמה דברים שלא אפשרי (או לא נכון) לבצע רק בעזרת CSS וצריך קצת קוד javaScript. 

ב Bootstrap אלו נקראים Plugins (כי הם בעצם jQuery plugins, אם משתמשים בהם יש לטעון את jQuery לפני bootstrap.js) ומגיעים 13 כאלו עם ספריית ה bootstrap כדי ליצור כפתורים דינמיים, tooltips, טאבים, dialogs וכו'. כשג'אווהסקריפט מעורב, לרוב יש שימוש ב attributes בצורה *-data ולא רק עוד classes על האלמנט.

אעתיק בכל זאת עוד דוגמה בודדת של שימוש ב plugin מתוך התיעוד (הוא פשוט מוצלח, ולא אצור דוגמאות טובות ממנו):

תיעוד ה plug-ins נמצא כאן.

סיכום

הכרנו את Bootstrap, ספרייה סופר-פופולרית שברגע שמתרגלים לעבודה בה - ניתן לפתח בעזרתה אתרים שנראים טוב, ובמהירות. יש ל Bootstrap לא-מעט Controls ויכולות, אבל כמובן שהיא מוגבלת לסוג מסוים של עיצובים. אל תפחדו להוסיף עליה CSS Styles ו Controls חיצוניים בכדי להעשיר את החוויה - זה מה שהרבה משתמשים שלה עושים. האתרים הגדולים יותר ("בעלי התקציב") לרוב לא בוחלים באמצעים ומשתמשים בספריות מורכבות יותר, המאפשרות גם גמישויות רבות יותר. כרגע, Bootstrap פופולארית בעיקר בקרב אתרים קטנים, אך גם שמעתי פרשנות שהיא עשוייה לפרוץ את הגבולות הללו ולתפוס את מקומה של jQuery Mobile בתור ספרייה מובילה לפיתוח אפליקציות ווב למובייל בזכות היכולות הרספונסיביות שלה (הגריד ועוד כמה שלא כיסיתי בפוסט) והמשקל הקל שלה.

גם אם אתם לא מתכוונים להשתמש ב Bootstrap, שווה לשים בצד כ Reference את הרעיונות העיצובים שלה - רעיונות בהחלט חדשניים שאתם יכולים לקחת למערכת הווב שלכם.

שיהיה בהצלחה!

---

לינקים מעניינים נוספים:

"למה Bootstrap היא ממש חשובה":
https://medium.com/what-i-learned-building/99fdd6e46586

סיכום ודוגמאות של שימוש ב Bootstrap:
http://www.designyourway.net/drb/the-popular-twitter-bootstrap-opinions-and-usage-inspiration/

רשימת שאלות ב Quora על Bootstrap:
http://www.quora.com/search?q=twitter+bootstrap

רשימה של כמעט מיליון (כלומר 319) אתרים שעוסקים ב Bootstrap:
http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

----

[א] מופע נוסף של הבעיה ניתן לראות באתרים כמו Wix.
Wix מספקים עורך WYSIWYG קל מאוד לשימוש לעריכת אתרי HTML. בכל זאת, זה לא מספק - כי למרות הכלים הנוחים, האתרים לא יוצאים יפים מספיק.
Wix תוקפים את הבעיה בעזרת יצירת המון templates מעוצבים מוכנים מראש שהמשתמש רק עורך בהם התאמות קלות. פתרון אחר: שוק של מעצבים שזמין לעזור למשתמשים (בתשלום, כמובן).

[ב] למרות שטאבלטים מצויידים כיום באותם מעבדים של הסמארטפונים, לעתים יש להם תדר שעון גבוה יותר (לדוגמה iPad Air ו iPhone 5S, כנראה בגלל הסוללה הגדולה יותר בטאבלט) ו bus רחב יותר של זכרון (כנראה בכלל ה GPU והצורך לצייר על מרחב גדול יותר), שמשפר את כלל ביצועי המכשיר.