דף הבית » עיצוב אתרים » בניית אתרים Superfast עם קרן 5 [מדריך]

    בניית אתרים Superfast עם קרן 5 [מדריך]

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

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

    במדריך זה אני אראה לך איך אתה יכול לבנות אתר אינטרנט superfast עם Zurb Foundation 5. אתה יכול להעיף מבט על התוצאה הסופית בדף ההדגמה.

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

    בשל אורכו של מדריך זה, להלן הקיצורים כדי להגיע אל הקטע הרצוי במהירות:

    • הורדת קרן 5
    • הבנת הרשת
      • כאשר להשתמש N-Large, בינוניים N ו- Small N- שיעורים
    • הוספת שורת התפריטים העליונים
    • מאכלסים את החלק העיקרי
      • הוספת לוח הודעות פופולריות
      • הוספת 3 הודעות נוספות על לוח פופולרי
      • Prettying את CSS
      • הוספת תוכן נוסף
      • הוספת Pagination
    • מאכלסים את הסרגל הצידי
      • טופס עלון
      • להגמיש וידאו
      • תפריט סרגל הצד
    • סיכום

    1. מוריד את קרן 5

    אתה יכול להוריד קרן 5 ב 4 צורות שונות:

    1. את הקוד המלא
    2. גרסה קלה יותר עם הקוד החיוני בלבד
    3. גרסה מותאמת אישית שבו אתה יכול להתאים אישית את מה שאתה צריך ומה לא
    4. גרסת סאס אם אתה רוצה להגדיר את המשתנים שלך mixins ב SCSS.

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

    לאחר הורדת קובץ ה- zip ופתיחתו, פתח את הקובץ index.html בדפדפן שלך ותראה משהו כזה:

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

    פתח את הקובץ index.html בעורך הקוד המועדף עליך למחוק הכל בתוך , אך לפני הסגירה

    כללי הסגנון שאנו מוסיפים ל app.css קובץ יפה את אב הטיפוס שלנו הם אלה:

     כותרת margin-bottom: 2em;  .popular-h4 נוספים font-size: 1.125em; margin-top: 0.4em;  .row .row.popular-main margin-bottom: 1.5em;

    כמו קרן 5 משתמש ביחידות יחסית, אנחנו צריכים להשתמש “em”-s or “rem”-s במקום פיקסלים כדי לשמור על הכללים. (אתה יכול לקרוא על יחידות CSS: פיקסלים לעומת ems לעומת% כאן.) השתמשתי Firebug של Firefox הרחבה כדי לקבוע היכן אני צריך לעקוף את כללי ה- CSS של קרן 5, אתה יכול להשתמש בכל הרחבות דפדפן אינטרנט אחרים פיתוח אם אתה רוצה.

    כאן בקטע CSS קצר זה, אנו נאלצים לעקוף את CSS המוגדר כברירת מחדל של הקרן פעם אחת בלבד, בכל הכלל האחרון (.row .row.popular-main). כך נראה אתר ההדגמה כעת:

    4.4 הוספת תוכן נוסף

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

    קרן 5 יש מגניב באמת מוכן מראש סגנונות ממוזערים כי נוכל לעשות שימוש בשלב זה. תמונות ממוזערות של קרן משתמשות ב בנוי מראש בכיתה CSS נקרא “ה” שעלינו להוסיף לתמונות שאנו רוצים להציג כתמונות ממוזערות באופן שבו ניתן לראות אותו בקטע הקוד להלן.

    עבור כל הודעה אחרונה אנו מוסיפים שורה חדשה מתחת ללוח הפופולרי שלנו בכיתה CSS מותאמת אישית “הפרסום האחרון”.

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

    עכשיו השתמשתי “בינוני 3 עמודות” ו “בינוני 9 עמודות” שיעורים כדי להפוך אותם לחלק את המסך לתוך 1: 3, 25% עבור התמונה ו -75% עבור טקסט בגודל בינוני.

    הכנס את קטע הקוד הבא מתחת ללוח הפופולרי שלוש פעמים (עבור שלושת ההודעות האחרונות). כאן אני פשוט כולל את הקוד של שורת הודעה אחרונה, שכן כולם משתמשים באותו סימון HTML, רק התוכן שונה.

     
      
     
    כותרת הודעה אחרונה
     
    תוכן של פוסט אחרון ...

    קובץ CSS המותאם אישית שלנו נוצר בשלב 4.3, app.css גם מקבל כמה כללי סגנון חדש כדי לשמור את המראה של הדגמה מסודר. הערה: אם אתה רוצה להוסיף CSS מותאם אישית משלך קרן, לא לשכוח לבדוק, עם כלי dev באינטרנט, שבו אתה צריך לעקוף את כללי ברירת המחדל.

    בקטע ה- CSS למטה אנו צריכים לעקוף אותם בכללים הראשונים (.row .row.latest-post). ב הכלל השני זה מספיק פשוט להשתמש בורר מותאם אישית משלו (.tatest-post h4).

     .שורה .row.latest-posts margin-bottom: 1.5em;  .latest-post h4 margin-top: 0; font-size: 1.125em;

    אב-הטיפוס שלנו נראה כך:

    4.5 הוספת עמודים

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

    להלן ההודעות האחרונות עם הקטע החדש Pagination הוסיף:

    5. מאכלסים את הסרגל הצידי

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

    עליך להכניס את כל קטעי הקוד בקטע זה בתוך

    בנה מצלמה משלך פלאש עם מובנית עבדים אופטי
    בניית דף משלך תופעות גלילה עם Roll.js
    בניית ווידג'טים עם כרטיסיות תגובה עם GridTab
    המאמר הבא
    בניית משלך אוטומטי קובץ עדכון מערכת
    המאמר הקודם
    בניית אתרי אינטרנט עם תגובה מהירה יותר עם ממשק משתמש סמנטי