לקחתי את תבנית בוטסטראפ (Bootstrap) לסיבוב, תרגמתי, הפכתי כיווני קריאה (RTL), ועוד כמה פרמטרים קטנים, ובסוף יצא פרוייקט מגניב 🙂
לאחרונה נדרשתי בעבודה לייצר לפרוייקט מסויים ״מיניסייט מודרני, מגניב כזה, ריספונסיבי עם פונט לא טריוויאלי״.
״מגניב. יש לך דוגמא?״ שאלתי את הבוסית.
״אתה מכיר את האינטרנט״, אמרה. ״תעצב ותפתח משהו. אבל שיהיה וואוו.״
#שיחה_אמיתית, כמעט קבועה בצורתה בין מעצב ומפתח אינטרנט (…אני) ולבין הבוסית, ביום נתון…
מ… הכל צריך להיות וואוו. וזה לגמרי נכון אחרת מה יחשבו עליי? זה המקצוע. אבל מצב שני, בד״כ הכל בנאלי, ולא דיברנו על זה שתמיד הלו״ז צפוף ולחוץ. אבל בדיוק לשם כך מישהו המציא די מזמן משהו שנקרה תבניות. ואם נהיה יותר קונקרטיים למקצוע –תבנית (או פריימוורק) Bootstrap, שאיך נאמר בעדינות? you see one you see them all…
מצד שני, כדי לייצר אתר מגניב ואינטראקטיבי, ושלא נצטרך לבנות הכל מאפס, אנחנו משתמשים בהמון בתבניות. אפילו ברמה המחשבתית… ואולי קצת חבל. אבל! וזה אבל גדול: כדי ליצור משהו חדש, לא צריך לבנות הכל מאפס וזה בדיוק מה שהתבניות עושות עבורנו: קח תבנית, תחליף צבעים, תחליף קצת צורות ואופני התנהגות (ופה אני מדבר כמובן על שינויים מינוריים בג׳אווהסקריפט, CSS ו HTML…) והנה לך משהו חדש! הופה!
טוב, אז מה יש לנו כאן?
- שימוש בתבנית Bootstrap (לינק לתבנית המקורית >> )
- תכנות מחדש של ה Bootstrap והתאמת התבנית לעברית – התאמה אבסולוטית לשפה העברית ויישור מושלם ל״ימין לשמאל״
- תבנית ריספונסיבית המותאמת למגוון גדלי המסכים
- One Page Site עם גלילה מגניבה בין אזורי הדף
- תמונות יפות אך לא קשורות לכלום שציידתי את הפרוייקט אותם קישרתי מאתר הסטוק החינמי – www.pexels.com (בואו נקווה שהלינקים לא יישתנו… גם אם כן – קצת עבודה מצידכם לקשר מחדש תמונות רצויות… מקומיות / מרוחקות כפי שעשיתי)
- קובץ yonish.css ש״דורס״ חלק מהגדרות העיצוב המקורי. (הסבר קצר: ניתן לקשר קובץ CSS בלי למחוק את ה- CSS המקורי, ובלבד שקובץ ה CSS ה״מעודכן״ יהיה אחרון ברשימת הקבצים המקושרים בתגית ה Header)
- שימוש בגוגל פונט, בטעינה ממערכת הפונטים של גוגל, פונט ״אלף״ המודרני והטרנדי (כמו כן, לא מחקתי את הפונט שהתבנית המקורית השתמשה בה, בטקסטים באנגלית – ניתן לעשות שימוש גם בפונט הזה)
זכרו:
אמנם על בסיס בוטסטראפ פריימוורק ניתן ליצור אתרים מגניבים ואינטראקטיביים ב״לחיצת כפתור״, אך את רשימת הcalssים המלאה והערכים שניתן להשתמש בהם – חייבים להכיר! לרשימת הcalssים המלאה, הערכים שלהם ודוגמאות חיות של נראות האובייקטים – ניתן למצוא באתר הרשמי של בוטסטראפ >>
אם זה מוצא חן בעיניכם והתבנית אשכרה עזרה לכם בחיים כדי ליצור אתר יפה (וכמובן אתם ממש נחמדים)
- שימו פה למטה בתגובות לינק, שכולם ייראו את העבודה 🙂
- תנו קרדיט עם קישור לפה (לא חייבים!)
לינק לדמו חי – לחצו כאן!
תגובות אחרונות