חמשת החלופות המובילות ביותר

Bootstrap נמצא בכל מקום, אך זה לא תמיד הכלי המתאים לתפקיד. הנה כמה אלטרנטיבות נהדרות!


אם אתה בודק את קוד המקור של חזית האתר באופן אקראי בימינו, סביר להניח שתמצא את Bootstrap מתחת. כולנו התרגלנו למושגים כמו מיכל-נוזל, שורה, col-sm-6 וכו ‘, שקשה לדמיין שכל סגנון אחר של פיתוח קדמי אפשרי אפילו. וכך כשאנחנו צריכים לבנות את הפרויקט הבא, אנו שולחים יד אל Bootstrap באופן לא מודע. עם זאת, הפופולריות לא הופכת את Bootstrap להתאמה טובה לכל הפרויקטים והצרכים.

למעשה, עבור חזיתות רזות באמת, טוען את כל ה- Bootstrap CSS ו- JS יכול לגרום לנפיחות גדולה.

למאמר זה שתי מטרות:

  1. ספק חלופות חיות שאינן Bootstrap דמויות Bootstrap
  2. הסבירו מדוע כדאי לכם לשקול אלטרנטיבות אלה על פני Bootstrap

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

ועם זה, נסתכל על האלטרנטיבות שיש לנו.

רשת Flexbox

חשבו על זה לרגע: הסיבה הגדולה ביותר שהתחלתם להשתמש ב- Bootstrap ועדיין אתם משתמשים בה היא מערכת הרשת שלה. בטח, לקח קצת להתרגל לשורות, col-md-6 וכו ‘, שיעורים, אבל עכשיו זה טבע שני לחשוב על פריסה מבחינת שורות, עמודות, קיזוז וכו’..

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

אם כן, אתה יכול לעשות הרבה יותר טוב עם רשת Flexbox.

רשת Flexbox, כפי שהשם מרמז, היא מערכת רשת המבוססת על CSS Flexbox נכסים. עם זאת, בניגוד לטכניקת CSS, כל המורכבות מופשטת יפה כך שתתמקדו רק בהצבת אלמנטים כמו שאתם רוצים. החלק הטוב ביותר הוא שכל שמות הקוד ושמות הכיתה מחקים את מה שאתה רוצה ב- Bootstrap 4, שמשמעותו מעבר בין שני הכלים הללו דורש אפס חיכוך נפשי. לדוגמה, כך נראה קוד “החלל מסביב” ברשת ה- Flexbox:

מסביב

מסביב

מסביב

קובץ ה- CSS המצומצם עבור מערכת רשת זו הוא 10.7 KB בלבד וחוסך לך כמה מאות KB בגודל ההורדה הסופי. בימינו רשת ה- Flexbox היא האהובה עלי ביותר מכיוון שאני לא רוצה להילחם ב- Bootstrap כדי להתאים אותה באופן מלא. אני אוהב להתחיל עם אלמנטים של וניל ולעצב אותם בעצמי, באמצעות רשת Flexbox בכל מקום שאני צריך.

למד Flexbox כאן, ברשת.

PureCSS

האם לא יהיה נחמד אם Bootstrap היה מחולק למודולים ואתה יכול לייבא רק את המודול שאתה צריך?

נו, PureCSS המשיך לעשות את זה בדיוק – מדובר במערכת מודולים המכסים אזורים פונקציונליים שונים באתר. אתה יכול לבחור להוריד אחד או כולם, ובכל זאת גודל ההורדה לא יעלה על 3.7 KB!

כן, קראת נכון.

כל המודולים כשהם מחוברים יחד ומגודרים הם 3.7 KB, אם כי בנפרד הם מסתכמים בעוד. מודול הרשת הוא רק 0.8 KB, ואילו מודול הבסיס הוא 1.0 KB. הצוות שעומד מאחורי PureCSS אומר שהוא נבנה כולו עם מחשבים ניידים בראש, וכך נבדקה בקפידה כל שורה של CSS ליעילות לפני שנכללה..

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

עם זאת, ל- PureCSS המחלקות שלו, והקוד המתקבל אינו מחקה את Bootstrap שאליו אתה רגיל מאוד:

לורם איפסום

דולור סיט אמט

מעבדה מוכחת

קונסקטור פרזנט

תבחין כי אין רשת בעלת 12 עמודות יותר. ל- PureCSS מערכת הרשת שלה שמגדירה את רוחב העמודה שצריך לקחת. אז, pure-u-lg-1-4 פירושו שאלמנט זה צריך לקחת 1/4 או 25% מהרוחב הזמין במסכים גדולים. רוחבים כמכפילים של 1/5 זמינים גם הם.

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

ל- PureCSS יש גם מחלקות משלו וסטיילינג ברירת מחדל, כך שזו אינה שונה מדי מ- Bootstrap.

צימית

ה צימית המסגרת היא סוג של איש-מוזר ברשימה זו. כן, זוהי מסגרת לבניית ממשקי ממשק משתמש, אך היא מכוונת לסוגים מסוימים של ממשק משתמש: מודלים.

יש פעמים שאתה צריך לפתח את הקצה הקדמי לצורך הצגת תפקוד המוצר. הדרך האידיאלית לעשות זאת, כמובן, תהיה לגרום למעצב / מפתח ממשק משתמש להיות מעורב וליצור את ה- mockups באחד מכלי ה- wireframing המתקדמים (Moqups, Blasmic וכו ‘, עולים בראש). הדפים יהיו מושלמים בפיקסל, ערכת הצבעים מלוטשת ונבחרה היטב והדפים יהיו פתוחים להשתתפות, ביקורות, הערות וכו ‘..

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

  • מאפשר לך לבצע קוד ב- HTML / CSS
  • הוא קל משקל
  • יש אוסף נרחב של רכיבים בסיסיים
  • בעל שפת סגנון הגונה ועקבית
  • במידת האפשר, דומה לטון “אפרפר” של עיצוב מסגרת חוט
  • קל ללמוד
  • יש כמה מעבדים מקדימים מובנים של CSS

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

נוף לעץ

פירורי לחם

כרטיסיות

יש עוד הרבה דברים טובים שאפשר לחקור. בדוק אותם כאן.

בואו נראה כיצד נראה הקוד. כך תשתמש במערכת הרשת בצימית:

4 עמודות
4 עמודות

4 עמודות
4 עמודות

“C” כאן הוא “עמודה”, כך ש” c4 “פירושו עמודה המשתרעת על ארבע יחידות (הרשת בגודל 12, בדיוק כמו זו של Bootstrap). דומה מאוד ל- Bootstrap, ומאוד אינטואיטיבי, לדעתי.

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

KickStart HTML

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

KickStart HTML מציע אלטרנטיבה.

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

להפיל

כפתורים

כרטיסיות (במרכז ועם סמלים)

התממש

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

התממשות היא לרוב ממש כמו Bootstrap – מערכת רשת עם 12 נקודות, קיזוז ורכיבים מוכרים כמו טפסים, קלפים וכו ‘. עם זאת, יש בה דברים טובים שיכולים למצוא חן בעיני רבים.

למשוך לדחוף

תכונת הדחיפה / משיכה של Materialize CSS מאפשרת לך לסדר מחדש את העמודות. זה מזכיר את תקן ה- CSS Grid החדש, בו הפריסה שונה מסדר האלמנטים.

חלוקה זו היא ברוחב 7 עמודות על דחיפה ימינה על ידי 5 עמודות.
רוחב 5 עמודים משוך שמאלה על ידי 7 עמודות.

התוצאה היא כדלקמן:

תבחין שהעמודות החליפו מקומות, וזה אולי משהו שלא ניתן להשגה ב- CSS המסורתי מבוסס Bootstrap.

טובות JavaScript

יש לא מעט תכונות ואפקטים של JavaScript הנשלחים עם חומר. טיפים לכלים, טוסטים (התראות חלשות כמו אנדרואיד), Parallex, Pushpin וכו ‘, הם חלק מהם. אפקט מדהים באמת שאהבתי הוא FeatureDiscovery, שבעצם מאפשר לך להדגיש אלמנט בעמוד באירוע כלשהו (נניח, לחיצה על לחצן) כדי להביא את תשומת ליבו של המשתמש לאותו גורם. קשה לתאר את זה במילים באופן מלא, אז עבור אל https://materializecss.com/feature-discovery.html כדי לראות למה אני מתכוון.

בסך הכל, Materialize היא אלטרנטיבה נהדרת ל- Bootstrap או למי שמעוניין לאמץ מסגרת CSS של חומר מלא..

סיכום

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map