Advertisement
  1. Web Design
  2. HTML/CSS

Foundation برای تازه کار ها : شروع کار

Scroll to top
Read Time: 5 min
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Grid System

() translation by (you can also view the original English article)

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

با نگاه به خواسته ها و نیاز های هر برنامه نویسی می توان دریافت که این افراد به ابزاری نیاز دارند که متن باز،پایدار و قابل اعتماد بوده و مهم تر از همه دارای راهنمای کاملی باشد. با توجه به نیاز های پروژه ممکن است که یک سیستم جدول بندی برپایه CSS کافی باشد اما آیا استفاده از ابزاری که به شما آزادی عمل بیشتری می دهد بهتر نیست؟ ما قصد داریم که در این سری مقالات نگاهی به چارچوبی قابل تغییر (front-end framework) به نام Foundation داشته باشیم.

آموزش استفاده از ابزاری مانند Foundation باید با دقت و با ذکر نکات جزیی صورت گیرد، به همین دلیل در این سری مقالات به کندوکاو همه ی بخش های این ابزار خواهیم پرداخت و مهم تر از آن خواهیم فهمید که استفاده از این ابزار چه تاثیر مثبتی در پروژه های آینده خواهد داشت.

foundation-1-handfoundation-1-handfoundation-1-hand

Foundation چیست؟

Foundation یک چارجوب (front-end framework) می باشد که دارای ابزاری مناسب برای طراحی و ساخت سایت های متناسب با گوشی های موبایل و صفحه های نمایش با اندازه های مختلف است (responsive). ساختار این چارچوب برپایه ی HTML ، CSS و jQuery بوده و با این که از تکنولوژی های پیشرفته استفاده می کند اما با براوزر های قدیمی چون IE8 نیز مشکلی ندارد. با این که استفاده اصلی از این چارچوب توسط برنامه نویسان HTML و CSS است اما شما می توانید از آن در پروژه های مبتنی بر Sass و Rails نیز استفاده نمایید.

foundation-1-2foundation-1-2foundation-1-2

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

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

چرا از Foundation استفاده کنیم؟

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

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

foundation-1-mobilefoundation-1-mobilefoundation-1-mobile

کاربرانی که از نسخه 3 (نسخه پیشین) این چارچوب استفاده می کنند نیز می توانند با استفاده از راهنمای به روزرسانی استفاده کنند یا اگر مایل هستند می تواندد به استفاده از نسخه سوم ادامه دهند چون ZURB هنوز از نسخه ی پیشین پشتیبانی می کند.

دانلود نسخه سفارشی

در وب سایت ZURB بخشی قرار دارد که به شما این اجازه را می دهد تا با انجام تغییراتی نسخه ای سفارشی از این چارچوب را که متناسب با نیاز های شماست در اختیار داشته باشید برای مثال اگر فقط به جدول بندی CSS نیاز دارید همه ی گزینه های دیگر را غیر فعال کنید یا اگر فقط به ابزارهایی مانند دکمه نیاز دارید فقط گزینه ی دکمه را انتخاب کنید تا در سریعترین زمان یک نسخه سفارشی در اختیار داشته باشید. علاوه بر این شما می توانید تمام قابلیت های این چارچوب را در یک صفحه (که سازندگان به آن ظرفشویی آشپزخانه می گویند) مشاهده کنید و با تمام قابلیت های آن آشنا شوید.

foundation-1-customfoundation-1-customfoundation-1-custom

با این که این یک قابلیت بسیار کاربردی است اما شخصا اعتقاد دارم که می تواند بسیار بهتر شود برای مثال با این که نسخه 4 این چارچوب از واحد em برای اندازه های استفاده می کند وem بر اساس اندازه فونت است، بودن قابلیتی برای تبدیل px به em بسیار ضروری می باشد.

با رفتن به http://foundation.zurb.com و انتخاب دکمه ی بزرگ دانلود شما با فرمی جهت سفارشی کردن چارچوب مواجه می شوشد و تنها کاری که باید انجام دهید آن است که ابزاری که نیاز دارید را انتخاب و آن هایی را که نیاز ندارید غیرفعال بکنید.

foundation-1-homepagefoundation-1-homepagefoundation-1-homepage

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

در آینده خواهیم دید

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

لینک ها...

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.