התממשות - חומר CSS עיצוב מסגרת

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

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

אתה יכול למצוא הרבה רכיבים שימושיים בתוך: שיח, מודאלית, תאריך בורר, לחצני חומר, parallax, כרטיסים ועוד. כמו כן, יש אפשרויות ניווט רבות ניתן לבחור, כגון הנפתחת, שקופית בתפריט כרטיסיות. התממשות משתמשת גם ב 12-רשת המערכת עם 3 שאילתות מדיה בגודל ברירת המחדל של המסך: רוחב מרבי של 600px הוא מכשיר נייד, התקן לטאבלט בגודל 992px ויותר מ- 992px נחשב להתקן שולחני.

מתחילים

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

 להתקנה להתקין 

לאחר שתקבל את המקורות, הקפד לקשר אותם כראוי לקובץ הפרוייקט או לקמפל את המקור אם אתה משתמש בגירסת Sass.

מאפיינים

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

1. תערובות סאס

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

תסתכל על מאפייני האנימציה הבאים:

 -webkit-animation: 0.5s; -Moz-animation: 0.5s; -אנימציה: 0.5s; -ms-animation: 0.5s; אנימציה: 0.5s; 

שורות אלה של קוד ניתן לשכתב עם שורה אחת של תערובת סאס כך:

 @include animation (.5s); 

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

2. זרימת טקסט

בעוד שמסגרות Frontend אחרות משתמשות בטקסט קבוע, Materialize מיישמת טקסט בעל יכולת תגובה אמיתית. גודל הטקסט וגובה השורה הם גם scaled בתגובה כדי לשמור על הקריאות. כשמדובר במסכים קטנים יותר, גובה הקו הוא גדול יותר.

כדי להשתמש בטקסט זרימה, אתה יכול פשוט להוסיף את טקסט זרימה בכיתה על הטקסט הרצוי. לדוגמה:

 
זהו טקסט זרימה.
 

צא את ההדגמה כאן בקטע 'זרימת טקסט'.

3. אפקט אדווה עם גלים

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

קטע זה נותן לך את אפקט הגלים.

 שלח 

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

 שלח 

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

4. צל

כדי לספק מערכות יחסים בין אלמנטים, חומר עיצוב ממליצים באמצעות העלאת על פני השטח. התממשות מספקת על עיקרון זה עם שלה z-depth- (מספר) מעמד. אתה יכול לקבוע את עומק הצל על ידי שינוי (מספר) מ 1 עד 5:

 
 
עומק צל 3
  
 

כל עומק הצל הם להפגין עם התמונה למטה.

5. לחצנים וסמלים

בתכנון חומרים קיימים שלושה סוגי לחצנים עיקריים: כפתור מורם, fab (לחצן פעולה צף) ו כפתור שטוח.

(1) לחצן הגדל

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

 כפתור 

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

 הורד 

בקטע למעלה אנו משתמשים קובץ MDI קובץ להורדה class עבור סמל ההורדה. יש בערך 740 סמלים שונים אתה יכול להשתמש. כדי לראות אותם מועברים לדף Sass בכרטיסייה 'סמלים'.

(2) לחצן צף

ניתן ליצור לחצן צף על ידי צירוף btn- צף בכיתה ואת הסמל הרצוי. לדוגמה:

בתכנון חומר, הלחצן השטוח משמש לעתים קרובות בתיבת הדו-שיח. כדי ליצור אותו, פשוט להוסיף btn-flat אל האלמנט שלך כך:

 ירידה 

בנוסף, לחצנים יכולים להיות מושבתים עם מושבת בכיתה ועשה שימוש גדול יותר btn גדול מעמד.

6. רשת

התממשות משתמשת בסטנדרט 12-טור רשת תגובה מערכת. ההיענות מחולקת לשלושה חלקים: קטן (ים) נייד, בינוני (מ '), עבור Tablet ו גדול (l) עבור שולחן העבודה.

כדי ליצור עמודות, השתמש ב- s, m או l כדי לציין את הגודל, ולאחר מכן את מספר הרשת. לדוגמה, כאשר אתה רוצה ליצור פריסת חצי בגודל עבור המכשיר הנייד אז אתה צריך לכלול s6 בכיתה לתוך הפריסה שלך. s6 מייצג קטן 6 כלומר 6 טור על מכשיר קטן.

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

 
 
יש לי 12-עמודות או רוחב מלא כאן
 
4-עמודות (שליש) כאן
 
4-עמודות (שליש) כאן
 
4-עמודות (שליש) כאן
 
 

הנה התוצאות:

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

 
 
רוחב שלי תמיד יש 12 עמודות בכל מקום
 
יש לי 12 עמודות בנייד, 6 בטאבלט ו- 9 במחשב שולחני
 
 

הנה איך זה נראה:

אלה הן רק כמה תכונות של התממשות. כדי ללמוד עוד על התכונות האחרות שלהם, עבור אל דף התיעוד.