آموزش فریم‌ورک Foundation-بخش۱-معرفی و مقدمه

آموزش فریم‌ورک Foundation-بخش۱-معرفی و مقدمه

بخش اول (معرفی و مقدمه و دانلود فریم ورک فاندیشن)

آموزش فریم‌ورک فاندیشن (Foundation Framework)

 

معرفی فریم‌ورک فاندیشن Foundation و نحوه دانلود آن

 

مقدمه فریم ورک فاندیشن:

طراحی رابط کاربری یا User Interface (UI) یکی از مواردی است که در هنگام تولید و توسعه یک وب سایت و یا اپلیکیشن و یا نرم افزار، می تواند چالش انگیز باشد. اگر بخواهید برای هر پروژه از ابتدا رابط کاربری را طراحی کنید، مسلما وقت گیر می باشد. طراحان حرفه ای رابط کاربری (UI کارها) ممکن است به این نتیجه برسند که خودشان یک چارچوب (Framework) برای رابط کاربری پروژه های خود طراحی کنند. اما در نظر داشتن تمام نکات ریز، آپدیت کردن مداوم فریم ورک، نگهداری و توسعه (Maintenance and Development) آن می تواند بسیار مشکل باشد.

نیاز و خواسته اکثر برنامه نویسان (programmer) و توسعه دهندگان (developers) اینست که رابط کاربری که برای محصولشان مورد استفاده قرار می دهند، کدباز (Open Source)، منعطف (Flexible) و از همه مهمتر دارای داکیومنت خوبی (Well-Documented) باشد. بسیار خب. با این تفاسیر، اگر یک فریم ورکی با این مشخصات وجود داشته باشد و رایگان نیز باشد! برای برنامه نویسان و طراحان قالب، می تواند گزینه خوبی می تواند باشد. در این مقاله می خواهیم فریم ورک فاندیشن (Foundation) را معرفی کنیم.

 

فریم ورک فاندیشن (Foundation Framework) چیست؟

فریم ورک فاندیشن از ابزار و امکانات زیادی برای طراحی ریسپانسیو و قابل مشاهده در موبایل (Mobile First) بهره می برد. این فریم ورک توسط HTML و CSS و JQUERY طراحی شده است و از مدرن ترین تکنولوژی های طراحی در آن استفاده شده است. فریم ورک FOUNDATION در تمام مرورگرها بدرستی کار می کند. تنها مرورگری که با FOUNDATION مشکل دارد (یا به بیان صحیح تر ، FOUNDATION با آنها مشکل دارد!) نسخه های ۸ به قبل مرورگر اینترنت اکسپلورر (IE) می باشد. به جدول زیر دقت کنید:

 

فریم ورک فاندیشن (Foundation Framework) چیست

 

ویژگی‌های اختصاصی فریم‌ورک فاندیشن:

شرکت سازنده این فریم ورک ، ZURB ، در طراحی و ساخت این فریم ورک، از مجموعه ابزارهای مختلفی برای برنامه نویسان (DEVELOPERS) و طراحان (DESIGNERS) استفاده کرده است. شما می توانید با توجه به نیاز خود، از تمام و یا بخشی از این ابزارها استفاده کنید و یا یک امکان جدید به فریم ورک فاندیشن نسخه قدیمی خود اضافه کنید و یا حتی امکان این وجود دارد که بخشی از این ابزارها را به عنوان یک ویژگی جدید (FEATURE) به یک فریم ورک دیگر اضافه کنید.

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

 

مرجع اصلی این فریم ورک وب سایت Foundation.zurb.com می باشد. آخرین نسخه قابل دانلود این فریم ورک نسخه ۶ می باشد.

 

دانلود آخرین نسخه فریم ورک Foundation

 

 

برندهای معتبری که از فاندیشن Foundation استفاده کرده‌اند:

 وب سایت Zurb اداعا می‌کند که برندهای معروف زیر از فریم ورک فاندیشن (Foundation Framework) استفاده کرده اند:

HTC و HP و Ford و Mini-Cooper و Subaru و Samsung و …

بعنوان مثال با مراجعه به وب سایت Subaru تصویر زیر را خواهیم داشت:

 

وب سایت Subaru

 

همانطور که مشاهده می کنید، فریم ورکی که برای طراحی قالب این وب سایت استفاده شده است، فریم ورک Foundation می باشد.

وب سایت مینی‌کوپر (Mini-Cooper) نیز از فریم فاندیشن برای طراحی رابط کاربری خود بهره برده است:

 

وب سایت مینی‌کوپر (Mini-Cooper)

 

چرا باید از فریم ورک FOUNDATION استفاده کرد؟

این روزها ، استفاده از فریم ورک ها در بین طراحان و برنامه نویسان رونق فراوانی پیدا کرده است. فریم ورک FOUNDATION عملکردها و ویِژگی های متعددی دارد و از سیستم گریدبندی (Grid) بصورت درصدی (Percentage-Based) بهره می برد. دارای اسلایدر جی کوئری می باشد و پلاگین لایت باکس (Light Box) دارد. المنت های HTML زیادی دارد که بصورت کاربرپسندی استایل دهی شدند که بصورت پیش فرض ، ریسپانسیو می باشند. توسط فریم ورک فاندیشن، می توانید فرم های سفارشی بسازید که المان های فرم مانند چک باکس و تسکت باکس را می توانید براحتی استایل دهی کنید. این فریم ورک همچنین دارای سیستم گریدبندی سفارشی در حالت موبایل می باشد که طراح یا برنامه نویس، بتواند براحتی طراحی محصول خود را در اندازه های موبایل و دسکتاپ (Desktop) شخصی سازی کند. به تصویر زیر نگاه کنید:

 

چرا باید از فریم ورک FOUNDATION استفاده کرد؟

 

فریم ورک foundation در نسخه های ۴ به بعد، تغییرات و اصلاحاتی در کدهای خود اعمال کرده است که باعث بهبود عملکرد این فریم ورک برای کاربران مختلف شده است. در هر جا که نیاز به توضیح است، کامنت گذاشته است و حذف و اضافه کردن توابع در این فریم ورک راحت و سرراست می باشد.

 

دانلود فریم ورک فاندیشن (Download Foundation Framework):

 

دانلود فریم ورک فاندیشن

 

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

 

لینک دانلود فریم ورک foundation

 

دارای ۴ نسخه است که می توانید در بخش اول (دکمه آبی رنگ) کل فریم ورک را بصورت کامل دانلود کنید. در بخش دوم، نسخه سبک تر آنرا خواهید داشت که تنها موارد ضروری و موردنیاز را در خود دارد. در بخش سوم، می توانید بصورت سفارشی، این فریم ورک را دانلود کنید و در بخش آخر نیز آنرا بصورت SCSS خواهید داشت.

 

سفارشی‌سازی فریم‌ورک foundation:

اگر بخواهید امکانات و ویژگی هایی از این فریم ورک را متناسب با نیاز خود، حذف و یا اضافه کنید، مطابق تصویر زیر، می توانید موارد لازم را تیک بزنید. بعنوان مثال، اگر تنها سیستم گریدبندی CSS را بخواهید، فقط تیک Grid را فعال کنید و بقیه موارد را از حالت تیک خارج کنید.

 

شخصی سازی دانلود فریم ورک فاندیشن

 

حتی امکان اعمال رنگ موردنظرتان برای بدنه (body) و یا متون قالب وب سایت وجود دارد. همچنین امکان تعیین رنگ های اصلی (primary) و ثانویه (secondary) کل وب سایت و باکس های پیام خطا، موفقیت و… وجود دارد. برای وب سایت های فارسی می توان گزینه Text-Direction را از Left-to-Right به Right-to-Left تغییر دهید. اگر می خواهید باکس های موجود در کل وب سایت (مانند دکمه، div، card و …) دارای Border-Radius باشد، می توانید بصورت کلی (Global) و با واحد پیکسل (px) آنرا تعیین کنید. امکان دیگر اینست که می توانید width و max-width تعریف شده در نقاط شکست (break-points) را نیز تغییر دهید. تعداد ستون های دلخواه (Custom Grid) خود را نیز می توانید تعریف کنید.

 

دانلود نسخه سفارشی‌شده فریم‌ورک فاندیشن:

در نهایت، پس از اینکه ویژگی ها و امکانات دلخواه و موردنیاز خود را انتخاب کردید، مطابق تصویر زیر، روی دکمه Download Custom Build کلیک کنید تا فریم ورک Foundation سفارشی شده شما را دانلود کنید:

 

دانلود فریم ورک Foundation سفارشی شده

 

در صورتی که در این فرآیند دچار مشکل شدید و سوالی برایتان پیش آمد می توانید به بخش مستندات (Documents) وب سایت Foundation مراجعه کنید.

در بخش دوم از آموزش فریم ورک فاندیشن، در مورد گریدبندی (Grid System) فریم ورک فاندیشن و المان های تب، دکمه، منو و برخی دیگر از المان های کلیدی UI (رابط کاربری) صحبت خواهیم کرد.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-getting-started–webdesign-12431


برچسب‌ها:

دانلود foundationدانلود فاندیشندرباره فاندیشنفریم ورک فاندیشنفریم‌ورک foundationفریمورک فاندیشنقالب فاندیشن

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ده + 6 =