יצירת פריסות מודרניות בקלות עם Gridlex CSS רשת מערכת
פיתוח Frontend השתפר באופן קיצוני עם הקדמה של CSS. זה עושה את זה הרבה יותר קל ליצור רשתות & עמודות זה משתנה באופן טבעי עבור פריסות תגובה.
במקום קידוד רשת Flexbox משלך, זה הרבה יותר קל להשתמש בכלי כגון גרידקס. זה קוד פתוח בחינם סופר קל מאוד קל להתאמה אישית.
כל מה שאתה עושה זה הוסף את גיליון הסגנונות Gridlex אל דף האינטרנט שלך לעבוד עם כיתות הרשת שלה. עמודות פנימיות לוקחות שיעור .קול ואתה לעטוף את כל אלה בתוך .רשת מיכל. זה מגדיר כל עמודה באותו רוחב ויוצרת ממשק אחיד.
ברירת מחדל זו ניתן לדרוס על ידי הוספה גודל לכל עמודה. בדרך זו תוכל לקבל עמודה אחת ברוחב 70% ועמודה אחרת ברוחב 30% (למשל תוכן / סרגל צדדי).
תמצא טונות של דגימות רשת על דף הבית Gridlex עם הדגמות חיות ו קטעי קוד להעתיק / להדביק לתוך האתר שלך. זה ספרייה ענקית עם כל כך הרבה כיתות אופציונליות כדי לעזור לך לבנות את הרשתות הפשוטות ביותר עבור כל אתר.
כל רשתות להוסיף עד a סה"כ 12 מיני עמודות, כך שתוכל להגדיר כמה שטח צריך לעמוד בכל עמודה. זה אולי נראה מבלבל אבל זה הגיוני כאשר אתה רואה את ההדגמה החזותית.
הנה קוד לדוגמה המשמש לרשת גדולה יותר עם רוחב משתנה:
.........
שים לב כי .רשת הכיתה מכילה את הכל ואת העמודות מנסה מחולקים ל -12 חלקים (בדוגמה זו יהיה רוחב for עבור כל). עם זאת, עמודות קבוע span 2 ו 6 cols בהתאמה, כך בעמודה הראשונה מאוד משתמש ברוחב אוטומטי על סמך מה שנשאר.
באמצעות שני העמודות האחרות, ניתן להסיק כי נשארו 4 עמודות (12-6-2) פגע בסך הכל 12. זה כל מתמטיקה פשוטה מאוד אבל שמות הכיתה יכול להיות מבלבל. ברגע שאתה מתחיל לשחק עם Gridlex על הפרויקט, תוכל להרים את מערכת מתן שמות במהירות.
Gridlex כרגע בגירסה 2.x וזה כל הזמן מתעדכן על גייתוב. ככל שתמיכה בדפדפן תגדל, אבטיח יותר תשומת לב ל- Flexbox, כאשר אתרים נוספים יאמצו מודל זה עבור רשתות דפים.
אתה יכול אפילו למצוא גלריה מלאה של אתרי אינטרנט הפועלים Gridlex כדי לראות איך זה נראה כאשר מיושם על אתרי אינטרנט חיים.
אם מעולם לא השתמשת Flexbox לפני Gridlex אז יכול להיות ספריה כיף לשחק עם. אבל אני גם ממליץ להתאמן הראשון באמצעות כיף משחקים Flexbox לבדוק את הידע שלך ולעזור לך להבין את היסודות.
Gridlex הוא זמין בחינם ב ריפו GitHub או שאתה יכול למשוך אותו באמצעות npm או קשתות. זה מציע תיעוד מלא באתר הראשי, כולל הדגמות עבור עמודות משתנות ושאילתות מדיה.
יש לך שליטה מלאה על עיצוב Flexbox וזה רק לוקח כמה שיעורים CSS לגרום לזה לקרות! ואם אי פעם יש לך שאלה מהירה או רוצה לשתף אתר שבנית באמצעות Gridlex אתה יכול הודעה היוצר בטוויטר @webdevlint.
