پایه یکی از دو فریمورک معروف HTML/CSS/JS برای توسعه دهندگان فرانت اند است. این اتفاق تصادفی نیفتاد. امروز، ما اینجا هستیم تا همه چیز را در مورد علت آن به شما بگوییم شما باید از آن استفاده کند حالا اول، برای کسانی که ممکن است HTML خود را بنویسند، اما قبلا هرگز با یک فریم ورک کار نکرده‌اند، در اینجا توضیحی وجود دارد: چارچوب‌ها اساساً دسته‌های بزرگی از کدهای از پیش نوشته شده هستند که به شما در شروع کار کمک می‌کنند. روی پروژه های شما سریعتر در مورد کدهای فرانت‌اند مانند HTML و CSS، این بدان معناست که چیزهایی مانند شبکه‌های طرح‌بندی، سبک‌های دکمه اصلی و عناصر رابط معمولی را پیدا خواهید کرد. فریمورک های بزرگتر ممکن است شامل پلاگین های جی کوئری نیز باشند. آنها در نظر گرفته نشده اند که مانند قالب ها یا تم های وب سایت کامل استفاده شوند، بلکه به عنوان مجموعه ای از بلوک های سازنده در نظر گرفته شده اند. شما آنچه را که نیاز دارید می گیرید، آن را مطابق با پروژه تغییر می دهید و به طور کلی دریافت می کنید روی با کار شما (و احتمالاً زندگی شما). آنها به منظور سفارشی سازی، و سرهم بندی شده اند. این می تواند در ابتدا یک کار دلهره آور باشد، زیرا چارچوب هایی مانند Foundation و رقیب اصلی آن، بوت استرپ، بزرگ شده اند هر کدام شامل هزاران خط CSS هستند. قبل از اینکه متعهد شوید از هر چارچوبی برای هر پروژه استفاده کنید، باید مزایای بالقوه آن را در مقابل هزینه زمانی ارزیابی کنید. گفتنی است، هنگامی که به یک چارچوب عادت کردید، می تواند زمان صرف شده برای نوشتن نشانه گذاری و CSS را به میزان قابل توجهی کاهش دهد.

مقداری تاریخ

بنیاد زندگی خود را به عنوان چیزی بیش از یک راهنمای سبک کلی و برخی کدهای رایج آغاز کرد. بچه ها در ZURB تصمیم گرفتند تا نمونه سازی خود را سرعت بخشند process با گرفتن برخی از HTML و سبک هایی که آنها تمایل به استفاده مجدد از آنها داشتند و یک چارچوب از آن ایجاد کردند. خودشه. واقعاً بیشتر چیزهای خوب اینگونه ساخته می شوند. کسی به آن نیاز داشت، بنابراین آنها آن را ساختند. با گذشت زمان، آن‌ها به این نتیجه رسیدند که آنچه ساخته‌اند آنقدر خوب است که نمی‌توان آن‌ها را برای خود نگه داشت، بنابراین نسخه 2.0.0 را در جهان منتشر کردند. آنها همه چیز را پاسخگو کردند، آن را صیقل دادند و برای همه ما منبع باز کردند. اکنون طراحان و توسعه دهندگان در سراسر جهان از کد ZURB استفاده می کنند تا محصولات خود را سریعتر و شاید به جرات بگویم بهتر کنند. از زمان انتشار آن روی 18 اکتبر 2011، دارای مجوز MIT چارچوب تبدیل به یکی از “دو بزرگ”، و استفاده دیده می شود روی هزاران وب سایت محبوبیت آن نشان دهنده کاربرد و تطبیق پذیری آن است. اگر تصمیم بگیرید که بنیاد برای شما مناسب است، شما را ناامید نخواهد کرد.

امکانات

این بنیاد نزدیک به سه سال است که در حال توسعه فعال است. پس جای تعجب نیست که لیست ویژگی ها گسترده است. در هسته خود، این چارچوب از فایل‌های CSS (تولید شده از فایل‌های SASS، که برای دانلود نیز موجود است) و چندین پلاگین jQuery تشکیل شده است. هیچ HTML در دانلود اصلی موجود نیست (به جز یک نسخه آزمایشی بسیار ابتدایی page، می توانید آن را خودتان بنویسید. گفته می شود، مستندات دقیقی در مورد هر جزء وجود دارد. هر بخش از مستندات با HTML مثالی همراه است تا بتوانید در صورت نیاز از آن استفاده کرده و سفارشی کنید. اگر می خواهید مستقیما شیرجه بزنید، این را بررسی کنید مستندات.

اگر می خواهید چارچوب را از ابتدا سفارشی کنید، دو کار وجود دارد که می توانید انجام دهید:

انتخاب 1

شما می توانید انتخاب کنید که فقط مؤلفه هایی را که به درستی می خواهید بارگیری کنید روی را دانلود اصلی page. اگر تنها چیزی که می خواهید شبکه، CSS ناوبری و یک یا دو افزونه jQuery است، به اندازه کافی آسان است. فقط علامت همه مواردی را که نمی‌خواهید اضافه کنید، بردارید و بروید! این “فریمورک مولد” همچنین شامل گزینه هایی برای سفارشی کردن شبکه، رنگ های اصلی شما و چند گزینه دیگر است. این گزینه ای است که من برای مثال، نمونه سازی یا توسعه یک برنامه داخلی شرکت انتخاب می کنم. سبک‌های ارائه پیش‌فرض عمدتاً برای این موارد به اندازه کافی خوب هستند، پس چرا در حالی که مجبور نیستید بروید و آنها را تغییر دهید؟

گزینه 2

اکنون این برای افرادی است که از چارچوب برای پروژه های عمومی استفاده می کنند. شما نمی خواهید از سبک های ارائه پیش فرض استفاده کنید، زیرا به احتمال زیاد با برند شما مطابقت ندارند. برای سفارشی سازی عمیق، باید به منبع بروید. و منظور من از منبع فایل های Sass است. با آن‌ها، می‌توانید وارد شوید و هر متغیری را مطابق میل خود سفارشی کنید و چارچوب را واقعاً مال خود کنید. (یک یادداشت روی فایل های Sass: باز هم برای کسانی که ممکن است با این اصطلاح آشنا نباشند، ساس یک پیش پردازنده CSS است که چیزهایی مانند متغیرها، میکسین ها و سایر ویژگی های برنامه نویسی را به CSS معمولی معرفی می کند. چیزی مانند «کامپایلر Sass برای (سیستم عامل شما در اینجا)» را در گوگل جستجو کنید، آنچه را که نیاز دارید پیدا خواهید کرد. من شخصاً نمی‌توانم کراس پلتفرم را توصیه کنم اپلیکیشن کوالا کافی است.) هنگامی که فایل‌های Sass شما در یک فایل CSS معمولی کامپایل شدند، مانند هر فایل CSS دیگری به آن در بخش خود پیوند دهید. به عنوان مثال، برنامه Koala، هر بار که فایل‌های Sass را ذخیره می‌کنید، به‌طور خودکار آنها را جمع‌آوری می‌کند، بنابراین مرورگر شما همیشه آخرین تغییرات را مشاهده می‌کند.

ساختار

شبکه

من نمی توانم به طور قطع بگویم که همه فریم ورک های HTML دارای یک سیستم شبکه ای برای چیدمان هستند، اما اکثر آنها چنین هستند. شبکه بنیاد، بدون هیچ گونه سفارشی سازی، دوازده ستونی کلاسیک، تودرتو، و پاسخگو است. نشانه گذاری و کلاس ها ساده هستند، از جمله کلاس هایی برای سفارشی کردن چیدمان بر اساس اندازه صفحه. اگر قبلاً با سیستم‌های شبکه‌ای کار کرده‌اید، مانند سیستم شبکه 960، تسلط بر شبکه بنیاد دشوار نخواهد بود. توجه: این برای رویکرد اول موبایل کدگذاری شده است، بنابراین هنگام طرح‌بندی سایت خود باید آن را در نظر داشته باشید.

شبکه بلوک

به این به عنوان یک شبکه کوچک فکر کنید. این طراحی شده است تا تعداد مجموعه ای از آیتم ها را بدون توجه به اندازه صفحه نمایش در اندازه و فاصله یکسان نگه دارد. مثال: شما سه عنصر با اندازه یکسان دارید که می‌خواهید در همه دستگاه‌ها در کنار هم قرار گیرند. برای انجام این کار، از این مثال شبکه بلاک استفاده کنید که من بی شرمانه درست از مستندات سرقت کردم:

توجه داشته باشید که اگر بخواهید، شما می توان تعداد ستون های متفاوتی را برای اندازه های مختلف صفحه مشخص کنید. عناصر اندازه برابر خود را حفظ خواهند کرد. این جزء برای مواردی مانند گالری عکس مناسب است.

چیزهای پاسخگو

پرسش‌های رسانه‌ای ساده نگه داشته می‌شوند، اما به گونه‌ای طراحی شده‌اند که تعدادی از اندازه‌های صفحه نمایش، از تلفن‌های هوشمند گرفته تا صفحه‌نمایش‌های مضحک بزرگ iMac را در خود جای دهند. طراحی از ابتدا برای موبایل اول شروعی عالی است. بنیاد با گنجاندن مولفه‌های خاص برای کمک به شما در اصلاح بیشتر بخش‌های واکنش‌گرای سایت‌ها، یک قدم فراتر می‌رود. اول، کلاس‌های معمولی برای پنهان کردن یا نمایش عناصر مختلف در اندازه‌های دید متفاوت وجود دارد. سپس، چیزهای کمی پیشرفته تری دریافت می کنید، مانند تبادل

Interchange یک کتابخانه JS است که بسته به محتوای مختلف به صورت پویا بارگذاری می شود روی داستان های رسانه. شما می توانید از این کتابخانه برای تصمیم گیری در مورد بارگیری، به عنوان مثال، یک تصویر JPG از یک نقشه یا جاسازی نقشه های گوگل استفاده کنید. یا یک تصویر معمولی به جای یک تصویر به اندازه صفحه نمایش شبکیه. با استفاده از این کتابخانه، می توانید اطلاعات کاربران خود را ذخیره کنید و مقداری رم فقط مطمئن شوید که برای آن دسته از کاربرانی که جاوا اسکریپت غیر فعال دارند، یک بازگشت به عقب اجرا کنید.

جهت یابی

گزینه های پیمایش در پایه فراوان هستند، از نوار پیمایش همه منظوره (کامل با منوهای کشویی)، تا نوارهای نماد، ناوبری خرده نان، صفحه بندی، نوارهای کناری و موارد دیگر. با این حال، دو مؤلفه ناوبری وجود دارد که بنیاد را از سایر چارچوب ها متمایز می کند.

ماژلان

اولین مورد است ماژلان استیکی ناو. این نوار ناوبری را در هر جایی که دوست دارید قرار دهید روی را pageو هنگامی که از محل شروع آن عبور کردید، شما را به پایین دنبال می کند. اگر از آن برای پیوند دادن به بخش در جریان فعلی استفاده می کنید page، می تواند هر یک را (در خود نوار) ​​در حین اسکرول کردن به پایین برجسته کند.

خارج از بوم

دوم این است خارج از بوم، که یک نوار ناوبری عمودی است که به طور پیش فرض پنهان است. دکمه منو را فشار دهید، و منو روی آن اسلاید می شود page برای لذت مرور شما به خاطر داشته باشید که مانند همه مؤلفه های Foundation، اینها را می توان با حداقل مقدار نشانه گذاری پیاده سازی کرد. بچه‌های ZURB تلاش زیادی برای پیاده‌سازی این عناصر رابط کاربری نسبتاً پیشرفته انجام داده‌اند، و این نشان می‌دهد.

رسانه ها

اجزای مرتبط با رسانه‌های هر چارچوب اغلب جایی هستند که سازندگان چارچوب تمایل دارند کمی خودنمایی کنند، و بنیاد نیز از این قاعده مستثنی نیست. به عنوان مثال، به طور پیش فرض گنجانده شده است پاک کردن لایت باکس این یک گالری تصاویر لایت باکس مرده و ساده است، واقعا. کافی است چند تصویر کوچک وارد کنید، کلاس های مربوطه را در آن قرار دهید، و یک گالری عکس با قابلیت لمس دارید که تصاویر با ارتفاع متغیر را بدون هیچ مشکلی مدیریت می کند. دیگری است فلکس ویدئو، که در تئوری می تواند تقریباً برای هر شیء قابل جاسازی استفاده شود. فقط یک div را با آن بپیچید فلکس-ویدیو در اطراف ویدیوی یوتیوب، iframe، جاسازی یا عنصر شیء خود کلاس کنید، و شما آماده هستید. این اشیاء به طور خودکار با اندازه مرورگر مقیاس نمی شوند. در نهایت، سبک هایی برای ریز عکسها وجود دارد. هیچ چیز فانتزی یا خاصی برای دیدن اینجا وجود ندارد… داشتن آنها فقط خوب است.

اما Orbit چطور؟

افرادی که از Foundation قبل از نسخه 5 استفاده کرده اند ممکن است در مورد افزونه Orbit ZURB تعجب کنند. این یک چرخ فلک است، که گاهی اوقات نمایش اسلاید نیز نامیده می شود، مؤلفه ای است که پاسخگو است، ویژگی بارگذاری می شود و به خوبی کار می کند. با این حال، در حالی که هنوز در چارچوب است، دیگر توسط ZURB پشتیبانی نمی‌شود و در حال توسعه فعال نیست. سازندگان بنیاد خود توصیه می کنند به دنبال جایگزین هایی مانند چرخ فلک جغد، یا نرم.

تشکیل می دهد

البته سبک های اولیه برای فرم ها فراموش نشده است. در واقع، آنها در طول سال ها به آثاری با زیبایی فوق العاده کم رنگ تبدیل شده اند. ممکن است فکر کنید که دارم اغراق می کنم، اما فکر نمی کنم اینطور باشم. سال‌ها تجربه به سبک‌های اصلی تبدیل شده است که به اعتقاد من می‌توان آن را تقریباً در هر پروژه‌ای با حداقل تغییرات اعمال کرد. این مهارت نیاز دارد تا چیزی به اندازه فرم ها خسته کننده به نظر برسد و در آن واحد هم کلی و هم زیبا به نظر برسد. جای تعجب نیست که بسیاری از چارچوب هایی که من امتحان کرده ام از سبک بنیاد تقلید کرده اند. گفته می شود، همه قسمت های متنی و دکمه های رادیویی خسته کننده نیستند. می دانید که آنها مجبور بودند چیزهایی را خودشان بسازند. برای مثال، مؤلفه لغزنده را در نظر بگیرید: می‌توانید لغزنده‌های محدوده را با HTML5 پیاده‌سازی کنید، اما آنها خسته‌کننده هستند و از ظاهر پیش‌فرض هر سیستم‌عاملی که استفاده می‌کنید استفاده کنید. پایه، روی از سوی دیگر، شامل لغزنده‌هایی است که می‌توان با CSS برای لذت سفارشی‌سازی استایل‌سازی کرد. همچنین شامل یک کتابخانه تأیید فرم (جاوا اسکریپت بیشتر در اینجا…) است که به شما امکان می دهد مطمئن شوید که کاربران شما داده های مناسب را وارد می کنند. هنگامی که آنها چیزی را اشتباه وارد می کنند، به عنوان مثال، یک آدرس ایمیل نامعتبر، یک اعلان ظاهر می شود و به آنها می گوید.

دکمه ها

نمی‌توان چارچوبی بدون چند سبک دکمه پیش‌فرض داشت. منظورم این است که شما می توانید، اما به نوعی درست نیست. دکمه های بنیادی پیش فرض تفاوت زیادی با سایر فریم ورک ها ندارند. یعنی با حداقل نشانه‌گذاری پیاده‌سازی می‌شوند و دارای کلاس‌های مختلف با اندازه و رنگ هستند. با این حال، می توانید آنها را به گروه بندی کنید گروه های دکمه ای برای مرتب سازی اقدامات مرتبط با هم. این گروه‌های دکمه (به هر حال، گروه‌های افقی) طوری طراحی شده‌اند که کاملاً با شبکه کار کنند. آنها همچنین کلاس های اضافی برای اندازه، رنگ، و گوشه های گرد دارند… همه چیزهای معمولی. نشانه گذاری را کمی بیشتر تغییر دهید، و Foundation نیز می تواند به شما بدهد دکمه های کشویی، و آنها دکمه های تقسیم. آیا می دانید، منوی کشویی عمدتا دکمه ای، قسمتی است؟ این دو جزء آخر از افزونه کشویی داخلی Foundation استفاده می کنند. این بدان معناست که از جمله موارد دیگر، آنها به جاوا اسکریپت وابسته هستند. با این حال، اجرای آنها ساده است. همه چیز مربوط به کلاس هاست.

تایپوگرافی

Foundation از یک تنظیم تایپوگرافی بسیار ساده و بدون سری برای شروع استفاده می کند. این ساده است، به راحتی می توان آن را با برخی از متغیرهای اصلی Sass سفارشی کرد، و همه آن نسبتاً اندازه هستند. درست است، بنیاد استفاده می کند رم. از آنجایی که سازندگان بنیاد به قابلیت استفاده اعتقاد دارند، همه چیز به اندازه کافی بزرگ است که به راحتی قابل خواندن باشد روی صفحه نمایش های کوچک خواندن در فاصله متوسط روی صفحه نمایش معمولی لپ تاپ/رومیزی هم برای من مشکلی ایجاد نمی کند. ویژگی های اضافی چاپی عبارتند از:

لیست های درون خطی

یک لیست افقی مبتنی بر متن می خواهید؟ می دانید، نوعی که ممکن است در فوتر وب سایت قرار دهید؟ شما تحت پوشش هستید. به گفته سازندگان، شما باید:

زمانی که می خواهید کنترل بیشتری نسبت به فاصله بین لینک ها داشته باشید از آن استفاده کنید.

درست می گویند.   برای کنترل فضایی بد است

برچسب ها

اینها در اصل تکه های کوچکی از متن با پس زمینه های رنگی هستند. برای چه چیزی ممکن است از آنها استفاده کنید؟ برچسب ها و سایر متا داده ها، یا همانطور که از نام آنها پیداست، ممکن است از آنها برای برچسب گذاری چیزها استفاده کنید، به عنوان مثال. فیلدها را تشکیل دهید شامل برچسب های معمولی، برچسب های هشدار، برچسب های هشدار دهنده است. این فقط یکی دیگر از آن چیزهای کوچک و مفیدی است که من در مورد Foundation دوست دارم. همچنین ببینید: ضربه زدن به کلید

پیام‌ها و درخواست‌ها

گاهی روی یک وب سایت، و اغلب در یک برنامه کاربردی، به روش هایی برای جلب توجه کاربر نیاز دارید. شما این کار را انجام می دهید تا اطلاعات لازم را به آنها ارائه دهید، چشم آنها را به یک فیلد یا عملکرد ناقص فرم جلب کنید، یا روش استفاده از یک برنامه کاربردی را به آنها آموزش دهید. اگر شیطان هستید، ممکن است این کار را برای پخش تبلیغات با صدا انجام دهید. شما می توانید این کار را با یک پنجره مودال انجام دهید. فونداسیون دارای پنجره‌های مدال عالی با گزینه‌های رفتاری گسترده، گزینه‌های اندازه‌گیری، اتصالات رویداد… حتی گزینه‌ای برای حذف پس‌زمینه است. سپس، هشدارها وجود دارد. این جعبه‌های هشدار بزرگ و رنگارنگ به‌صورت ایستا قرار گرفته‌اند و تا عرض خود کشیده می‌شوند container. با این حال، همیشه می توانید آنها را به یک موقعیت ثابت برای هشدارهای سراسر سایت تبدیل کنید. آیا هنوز به رنگ، گوشه های گرد و سایر کلاس های ارائه اشاره کرده ام؟ من می خواهم متوقف شود، زیرا آنها این کار را برای یک مقدار زیادی از چیزها سپس ما نکات ابزار را داریم. اینها را می توان تقریباً برای هر عنصری اعمال کرد و روی فقط نشان دادن تنظیم کرد روی صفحه نمایش های بزرگ یا همه صفحه ها. (در دستگاه های تلفن همراه، برای مشاهده راهنمای ابزار، باید روی عنصر مورد نظر ضربه بزنید.) آنها همچنین می توانند در موقعیت قرار گیرند. روی هر طرف عنصر

جویراید نکات ابزار را به سطح بعدی می برد. این افزونه ای است که از نکات ابزار (و چیزهای دیگر) استفاده می کند تا کاربران را به بازدید از وب سایت یا برنامه شما برساند. برای کاربرانی که اولین بار هستند عالی است، اگر رابط لزوما پیچیده باشد.

محتوا

چارچوب های اولیه HTML/CSS راهی برای سازماندهی محتوای خود به شما می دهد روی آ page، و کمی به آن حالت دهید. اگرچه این یکی از چارچوب های بزرگ است که به معنای اجزای اضافی حتی برای محتوا است. اول از همه، ما جداول قیمت گذاری داریم: بچه های ZURB مخاطبان خود را به خوبی می شناسند. بسیاری از مردم به دنبال راه های آسان برای نمایش اطلاعات قیمت محصولات و خدمات مختلف خود هستند. بنیاد آن را در قالبی نسبتاً استاندارد به آنها می دهد. بعد، نوارهای پیشرفت. من قصد ندارم توضیح بیشتری بدهم روی اینها. آنها دقیقا همان چیزی هستند که شما انتظار دارید. Foundation همچنین شامل پلاگین پایه آکاردئون و افزونه محتوای تبدار مورد انتظار است. من فکر می کنم جالب است که توجه داشته باشید که می توانید محتوای تب دار را در قسمت آکاردئون قرار دهید. در نهایت، این چیزی است که من در چند فریمورک دیگر دیده‌ام و آن را فوق‌العاده جالب می‌دانم: یک جزء با ارتفاع ستون برابر. آنها به آن می گویند اکولایزر، نامی که فقط نیمی از عملکردش بدتر است. البته این به جاوا اسکریپت نیاز دارد، اما این یک راه بسیار ساده است که تمام ستون‌ها در یک بخش معین ارتفاع مساوی را به شکلی پاسخگو حفظ کنند. فقط چند ویژگی داده را اضافه کنید، و شما آماده هستید. وقتی با جزء جدول قیمت گذاری ترکیب می شود، در اینجا به نظر می رسد:

چه طور باید شروع کرد

بنابراین اکنون فهرست گسترده ویژگی‌ها را مرور کرده‌اید و می‌خواهید ویژگی‌های آن‌ها را داشته باشید! درست؟ خوب، اگر من واقعاً درست می گویم، در اینجا روش شروع شما آمده است. ما قصد داریم یک الگوی زیبا، ساده و ابتدایی در Foundation برای تمرین ایجاد کنیم. می‌توانید در ویرایشگر متن خود دنبال کنید، کد را کپی و جای‌گذاری کنید، یا فقط قالبی را که من در دسترس قرار داده‌ام دانلود کنید، زیرا شما یک کلاهبردار هستید. بعد از این بخش، تعدادی آموزش عالی و منابع آموزشی دیگر را برای کمک فهرست خواهم کرد روی سفر شما برای تبدیل شدن به یک استاد بنیاد برو بسته پیش فرض را دانلود کن روی را دانلود page، و بیایید شروع کنیم.

فایل های پایه را در پروژه خود قرار دهید

اکنون، زمانی که بسته را دانلود می کنید، ساختار فایل داخل آن چیزی شبیه به این خواهد بود:

project-folder
 index.html (Demo file.)
 humans.txt (Like a readme file.)
 robots.txt (Just leave this alone.)
 /css
 foundation.css
 foundation.min.css *
 normalize.css *
 /img (Note: Empty)
 /js
 foundation.min.js *
 /foundation
 foundation.abide.js
 foundation.accordion.js
 foundation.alert.js
 (Etc. Huge list here.
 You can keep these files to see/play
 with the source, but you don't actually
 need them to use the framework.)
 /vendor
 fastclick.js
 jquery.cookie.js
 jquery.js *
 modernizr.js
 placeholder.js

متوجه خواهید شد که من بعد از برخی از این فایل ها یک ستاره قرار داده ام. اینها تنها فایل هایی هستند که واقعاً به آنها نیاز دارید تا فریم ورک کار خود را انجام دهد. بقیه فایل‌های منبع یا ابزارهای مفید اضافی هستند. این ابزارها مطمئناً می توانند به شما در انجام کارهای عالی کمک کنند، اما کاملاً ضروری نیستند. مثلا، placeholder.js را اجرا می کند نگهدارنده مکان ویژگی فرم های HTML5 برای مرورگرهایی که از آن پشتیبانی نمی کنند. فایل‌هایی که علامت‌گذاری کردم تنها فایل‌هایی هستند که باید در بخش وب خود به آنها پیوند دهید page/کاربرد. برای اهداف این آموزش، من قصد دارم بیشتر این فایل‌ها را حذف کنم و فقط آن‌هایی را که ضروری هستند نگه دارم. من همچنین از ابتدا با یک جای خالی شروع خواهم کرد index.html. برای شروع، “خانه ما page” چیزی شبیه به این خواهد بود:

 Foundation Tutorial Demo

ممکن است متوجه یک فایل CSS اضافی در آن شده باشید. ما به آن برای سبک های سفارشی نیاز داریم.

یک طرح ساده ایجاد کنید

بنابراین، از آنجایی که اینجا یک خانه است page، بیایید مفهوم را جلوتر ببریم. ما آن را به یک فرود استثنایی عمومی تبدیل خواهیم کرد page برای برخی از مشاغل یا موارد دیگر بدون طرح دو ستونی برای این آموزش! اینها خیلی از مد افتاده اند. توجه داشته باشید که در این مثال از مواردی مانند نوار پیمایش یا فراخوانی برای اقدام صرف نظر می کنم. اینها کاملاً کارهایی هستند که باید در پروژه های واقعی انجام دهید.

سربرگ

طبق قوانین فعلی گرایش های طراحی، ما باید یک هدر بزرگ با نام شرکت، یک شعار و یک تصویر پس زمینه عظیم بسازیم (در این آموزش گنجانده نشده است). HTML برای این به اندازه کافی ساده است:

را ردیف کلاس نه تنها محدودیت های بیرونی شبکه ما را تعریف می کند، بلکه آن را برای ما متمرکز می کند. را سرتیتر عنصر هم به دلایل معنایی و هم برای ارائه یک مکان برای افزودن تصویر پس زمینه بعداً وجود دارد. ما می خواهیم ستون شبکه سرصفحه ما بدون توجه به اندازه صفحه تا صد درصد کشیده شود، بنابراین فقط باید از کوچک-12 کلاس صفحه نمایش های با اندازه متوسط ​​و بزرگ این سبک ها را به ارث می برند مگر اینکه موارد دیگری مشخص شده باشد. ما سربرگ و متن مرکزی خود را داریم. با این حال، این هدر بلندی را که می‌خواهیم به ما نمی‌دهد. برای این کار، به چند سبک سفارشی نیاز داریم:

/* HEADER STYLES */

header#page-header {
 height: 500px;
 background: #cecece;
}

 header#page-header > div.row {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 }

همانطور که می بینید، من ما را داده ام سرتیتر یک رنگ پس زمینه به جای یک تصویر واقعی، و به صورت عمودی محتوای هدر ما را در مرکز قرار می دهد. خیلی تمیز، ها؟ در اینجا روش ما است page تا اینجا به نظر می رسد:

معرفی و خدمات

بنابراین شما به جرأت خود را با هدر خود اعلام کرده اید. وقت آن است که به کاربر خود بگویید که هستید و چه می کنید. توضیح مختصری در مورد هر خدمت یا محصول… در این عصر مدرن اینگونه است. بیا شروع کنیم.

خوب، همانطور که می بینید، تمام کاری که من انجام داده ام این است که چند ردیف و ستون دیگر با محتوا اضافه کنم. من کلاس‌های مناسبی را برای ایجاد مقیاس ستون‌ها در دستگاهی که در حال مشاهده هستند، اعمال کرده‌ام روی. در #معرفی بخش، من فقط ستون مرکزی را با عرض کامل درست نکردم. در عوض، برای اینکه مطمئن شوم پاراگراف مقدمه قابل خواندن است، آن را کوچکتر کردم و مناسب آن را دادم. انحراف کلاس ها برای هر اندازه صفحه نمایش فاصله عمودی بخش‌های محتوا کاری است که باید برای خود در هر چارچوبی انجام دهید، بنابراین دوباره، من به مقداری CSS سفارشی نیاز داشتم:

section#page-content, section#page-content > #services {
 padding-top: 3em;
}

 section#page-content {
 padding-bottom: 3em;
 }

هیچ چیز خاصی اونجا نیست از آنجایی که تقریباً همه چیز، از جمله شبکه، با ems فاصله دارد، من از آنها برای لایه‌بندی استفاده کردم تا چیزها از نظر بصری سازگار باشند. فاصله عناصر مبتنی بر em را به عنوان یک شبکه پایه داخلی در نظر بگیرید که می توانید به راحتی از آن بهره ببرید. در اینجا کل ماجرا اکنون چگونه به نظر می رسد:

پاورقی

بیایید به خودمان یک پاورقی ساده بدهیم، با چند لینک پیمایش، و یک اعلامیه حق چاپ، چرا که نه؟

در اینجا، من یک لیست درون خطی (نگاه کنید به بالا) را برای پیوندهای پاورقی، و دو ستون که در اندازه تلفن عمودی هستند، گنجانده ام. در اینجا CSS مورد استفاده من آمده است:

footer#page-footer {
 padding-top: 3em;
 padding-bottom: 3em;
 border-top: 1px solid #cecece;
}

و voilà! فرود بدون استخوان page تا بتوانید آن را به دلخواه خود سفارشی کنید. در اینجا کل چیز به نظر می رسد:

اگر دوست دارید فایل فشرده را بردارید و با کدی که از قبل موجود است بازی کنید. از صفر شروع کنید و به منبع نگاه کنید. یا فقط می توانید نگاهی به مطالب آموزشی که دیگران ساخته اند بیندازید…

آموزش و آموزش

مواد آموزشی توسط ZURB

همانطور که ممکن است انتظار داشته باشید، بچه های ZURB با ارائه برخی از مطالب آموزشی خود به ما فراتر از مستندات عمل کرده اند. اینها به شکل دوره مقدماتی، و دوره پیشرفته پایه. این مطالب آموزشی برای دانلود و مشاهده محلی طراحی شده است. ZURB همچنین کلاس های آموزشی پولی را ارائه می دهد که می توانند به صورت آنلاین برگزار شوند. می توانید اطلاعات بیشتری در این مورد پیدا کنید روی وب سایت آنها.

اسکرین‌کست‌های Webdesigner Depot

درست است! ما چند فیلم آموزشی از خودمان با تمرکز ویژه ساخته ایم روی پایه 5. آنها را بررسی کنید روی یوتیوب: پایه 5 مقدمه، و استفاده از ویژگی های پیشرفته بنیاد

شروع به کار با ZURB Foundation 5 Grid

این مجموعه ای از نمایشگرها توسط جیمز استون تمام اصول اولیه را پوشش می دهد. موضوعات عبارتند از: راه‌اندازی پروژه، شروع با شبکه دسک‌تاپ، شبکه‌های دسکتاپ تودرتو، افزودن تصاویر مکان‌نما، ایجاد تجربه موبایل، و اصلاح تجربه تبلت.

آموزش چارچوب ZURB Foundation 5

بچه ها در ieatcss.com رفت و یک کتاب الکترونیکی کامل درباره Foundation 5 نوشت. می توانید آموزش های مبتدی آنها را پیدا کنید اینجا. اگر چیز پیشرفته‌تری می‌خواهید، می‌توانید کتاب الکترونیکی آنها را با قیمت 29 دلار دانلود کنید. چرا آن را پرداخت می کنید؟ زیرا به جای اینکه فقط به شما بگویند چگونه از چارچوب استفاده کنید، روش استفاده را توضیح می دهند همه چیز آثار. و منظور من همه چیز است، از جمله پلاگین های جاوا اسکریپت.

مسترینگ بنیاد زور. آموزش از A تا Z

این یکی دیگر است مجموعه ای از آموزش ها، به دنبال آن یک کتاب الکترونیکی اختیاری. اینها توسط MonsterPost، وبلاگ TemplateMonster.

سبک های متهور بنیاد توضیح داده شده است

اگر هوس کرده اید یک آموزش کمی پیشرفته تر و عمیق تر داشته باشید، بفرمایید! در این پست دوستان ما در Tuts+ روش سفارشی سازی Foundation از فایل های Sass را با جزئیات کامل شرح دهید. اگر قبلاً با فایل‌های Sass کار نکرده‌اید، از اینجا شروع کنید.

روش ایجاد جداول ریسپانسیو در Foundation

در نهایت، افراد باهوش در Sitepoint به ما نشان می‌دهند که چگونه ایجاد کنیم جداول پاسخگو. توجه داشته باشید، این راه حلی است که Foundation به طور پیش فرض پیاده سازی می کند. در این آموزش، می توانید یاد بگیرید که چگونه یک جزء خاص از Foundation را بگیرید و آن را در پروژه دیگری ادغام کنید. (اگر در زمینه طراحی وب تازه کار هستید، ممکن است چیزی در مورد “شیطان” بودن جداول شنیده باشید. خوب، اگر از آنها برای چیدمان وب سایت خود استفاده می کنید، کاملاً درست است. با این حال، گاهی اوقات داده ها به بهترین شکل در قالب جدول نمایش داده می شوند. بنابراین خوب است که یاد بگیرید چگونه جداول را خوانا کنید روی دستگاه های تلفن همراه.)

چنگال

گامبی – یک چنگال پایه

یک چیز زیبا در مورد فریم ورک های منبع باز مانند Foundation این است که مجوزهای آنها به افراد اجازه می دهد آنها را بگیرند، تغییر دهند و حتی آنها را متعلق به خود بنامند. طراحان و توسعه دهندگان در جراحان دیجیتال همین کار را کرد آن‌ها بخش‌های ساختاری Foundation را حفظ کردند و سپس برخی از اجزای رابط کاربری جدید جالب و پلاگین‌های جی کوئری را در خود گنجاندند. نتیجه نامگذاری شد گامبی، و در نوع خود یک چارچوب فوق العاده است. جایی که Foundation به گونه ای طراحی شده است که انعطاف پذیر باشد و برای هر دو وب سایت محتوا محور مناسب باشد و برنامه های وب، Gumby تخصصی تر است. متمرکز است روی یک چیز: وب سایت های محتوا محور و ایجاد آسان آن ها.

رابط کاربری تقریبا مسطح

تغییرات بنیاد در این چنگال آنقدر ظریف هستند که مطمئن نیستم آن را یک چنگال یا یک تم بنامم. این در اصل، بنیاد 5.2.2 است که تنها با چند تغییر زیباشناختی کوچک همراه است. چیزی که آن را برای من جالب می کند این است که این تغییرات روند “طراحی مسطح” را به روش های بسیار کوچک کاهش می دهد. به نظر می رسد دلیل پشت آن این است که برخی از عناصر رابط کاربری، مانند دکمه ها، باید ارجاع ظریف به بعد سوم را حفظ کنید. این طراحی کمی اسکومورفیک است، و من فکر می کنم که در واقع می تواند قابلیت استفاده را بهبود بخشد. خوب، برای برخی از کاربران، به هر حال.

منابع و ابزارهای متفرقه

در اینجا چند ابزار و چیزهای جالب مرتبط با بنیاد وجود دارد که در هیچ دسته دیگری قرار نمی گیرند:

بلوک های ساختمانی توسط ZURB

را بلوک های ساختمان تکه‌هایی از کد هستند که با و/یا برای Foundation ساخته شده‌اند. اینها شامل اجزای رابط کاربری جدید، طرح‌بندی محتوای قابل استفاده مجدد و موارد دیگر است.

تکه های متن عالی

متن عالی یک ویرایشگر متن فوق العاده است که توسط برنامه نویسان در سراسر جهان استفاده می شود. این تکه ها (تکه‌های کد برای درج آسان در هر فایلی) اساساً به این منظور است که طرح‌بندی‌های ساختمان با Foundation را بسیار سریع‌تر انجام دهند. آنها با هر دو Sublime Text 2 و 3 سازگار هستند.

ژنراتور شبکه تجربی

آیا شبکه پیش فرض دوازده ستونی مورد پسند شما نیست یا برای پروژه شما مناسب نیست؟ سپس یک جدید بسازید! فقط به این سر بزنید ژنراتور شبکه، مقادیر خود را وارد کنید و CSS خود را بگیرید. توجه داشته باشید، به نظر می رسد که CSS مبتنی است روی یک نسخه قدیمی از Foundation، بنابراین ممکن است لازم باشد آن را با نام کلاس های جدیدتر و کلاس های پاسخگو تطبیق دهید. با این حال، تمام محاسبات سخت را برای شما انجام می دهد.

بوک مارکلت ها

بوکمارکلت ها ابزارهای کوچکی هستند که معمولاً با جاوا اسکریپت ساخته می شوند و می توانند در نوار نشانک های شما قرار گیرند. وقتی آنها را فعال کردید، می توانند جریان را به اشتراک بگذارند page، اطلاعات مفید را در یک روکش نمایش دهید و بسیاری چیزهای کوچک مفید دیگر. را نشانگر شبکه نمایشگر توسط Antoine Lefeuvre می توان برای پوشاندن یک شبکه بصری استفاده کرد روی بالای هر چیزی page داری کار میکنی روی درحال حاضر. شبکه قابل تنظیم است، اما می توانید آن را به راحتی روی پیش فرض های بنیاد تنظیم کنید. را نشانک شبکه ریتم عمودی توسط کوین آلتمن تقریباً همان کاری که Grid Displayer انجام می دهد. تفاوت این است که به جای خطوط عمودی، شما یک دسته از خطوط افقی دریافت می کنید تا به شما در مدیریت فضای عمودی بین عناصر کمک کند. (Bookmarklet Design Responsive) توسط Victor Coulon جریان را دوباره بارگیری می کند page شما هستید روی درون ابزاری که به شما امکان می دهد به سرعت طرح های خود را با وضوح های مختلف پیش نمایش کنید.

نگاهی به آنچه در راه است

بهتر است باور کنید که ZURB یک جا نشسته نیست. در کنار تمام کارهای دیگری که انجام می دهند، سخت مشغول کار هستند. آنها چیزهای جالبی دارند، مانند:

بنیاد برای برنامه ها

ZURB در حال ایجاد یک نسخه کاملاً جدید از Foundation است که جایگزین Foundation 5 نمی شود، اما در کنار آن کار می کند. این شامل ویژگی های خاص برای طراحی، نمونه سازی، و ساخت برنامه های کاربردی وب خواهد بود. ویژگی ها شامل یک شبکه جدید، ادغام با Angular.js، ویژگی های جدید طراحی شده به طور خاص برای نمونه سازی و موارد دیگر خواهد بود. برای مطالعه بیشتر در مورد کاری که آنها انجام می دهند، ببینید آنها برای خودتان چه می گویند: بنیاد بعدی.

Motion UI

از نظر فنی، Motion UI بخشی از این نسخه جدید و برنامه محور Foundation خواهد بود، اما تصور می‌کنم به عنوان یک مؤلفه جداگانه برای استفاده در هر مکانی در دسترس خواهد بود. (این یک حدس آموزشی است، نه چیز دیگر…) چیست؟ این یک کتابخانه انیمیشن است. برنامه های مدرن نه تنها برای تحت تاثیر قرار دادن کاربران، بلکه برای بهبود قابلیت استفاده از انیمیشن به شدت استفاده می کنند. Motion UI به گونه‌ای طراحی شده است که این کار را برای ما که رابط‌های پیچیده می‌سازیم آسان‌تر کند. به گفته خود بچه های ZURB:

ZURB 16 سال است که عاشق آپارتمان است. ما همه چیز را از Foundation گرفته تا برنامه‌هایمان و شکممان را صاف کرده‌ایم (کاش – کار می‌کردیم روی آی تی). اما مسطح شدن وب دارای معایبی بوده است. به حداقل رساندن بیشتر شیب ها، سایه ها و عناصر اسکئومورفیک، خلأ در دنیای طراحی برای تمایز محتوا ایجاد کرده است. حرکت به ما کمک می کند آن را بازگردانیم.

و در حالی که من فکر می کنم که حذف عمدی و کامل اسکئومورفیسم ممکن است در وهله اول یک واکنش جزئی بیش از حد بوده باشد (به آنچه قبلاً در مورد “تقریباً مسطح UI” گفتم را نگاه کنید)، خوشحالم که در حال ارائه جایگزین هایی هستیم. . ما به روش‌های جدیدی نیاز داریم تا به کاربران خود بگوییم چگونه از محصولات ما بیشترین بهره را ببرند، و انیمیشن راهی عالی برای مدیریت آن است.

نتیجه

بنیاد همان چیزی است که از نامش پیداست. این یک نقطه شروع است و در آن نقطه بسیار خوبی است. این تنها فریمورک عالی نیست، اما برای هرکسی که می‌خواهد سریع‌تر محصولات زیبا بسازد، یک انتخاب محکم است. آیا برای شما و پروژه هایتان مناسب است؟ نگاهی به داخل بیندازید و متوجه شوید.