foundation فریمورک

راهنمای گام به گام فریمورک Foundation

راهنمای گام به گام فریمورک FoundationReviewed by الهام وکیلی on Oct 27Rating: 4.5راهنما و آموزش گام به گام فریمورک Foundation | ارومیه سایتآموزش فریمورک Foundation، فریمورک Foundation، فریمورک Foundation چه ویژگی هایی دارد، تفاوت فریمورک Foundation و بوت استرپ.

راهنمای گام به گام فریمورک Foundation برای توسعه برنامه های وب واکنش گرا

 

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

 

ویژگی های فریمورک Foundation

Foundation برای مرورگرها و ابزارهای مختلف طراحی شده است. اولین فریمورک متن باز برای تلفن همراه است که به توسعه دهندگان بهترین شیوه را برای توسعه سریع می دهد. ویژگی های دیگر Foundation : شامل سیستم گرید 12 ستونه است، که اجزای CSS  و direction RTL (راست به چپ) و سازگاری با چندین مرورگر را پشتیبانی می کند.

 

سیستم گرید 12-ستون

system grid فریمورک foundation
system grid فریمورک foundation

 

سیستم گرید Foundation به 3 قسمت تقسیم شده است: کوچک، متوسط، بزرگ.

Small  هر صفحه نمایش تا 639 پیکسل.

  • فقط برای صفحه نمایش های کوچک.

Medium  هر صفحه نمایشی که از 640 پیکسل شروع می شود.

  • فقط برای صفحه نمایش های متوسط.

Large  هر صفحه نمایشی که از 1024 پیکسل شروع می شود.

  • برای صفحه نمایش های بزرگ و بزرگ تر.
بیشتر بخوانید»»» همه چیز درباره سیستم های مدیریت محتوا 

سازگاری

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

سازگاری فریمورک foundation
سازگاری فریمورک foundation

ویدجت ها

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

  •  Form validation
  • off canvas menus (منوهای off canvas)
  • pricing tables (جدول های قیمت گذاری)
  • responsive media (رسانه های واکنش گرا)
  • right to left support (پشتیبانی rtl)
  • tour) joyride)
ویدجت های فریمورک foundation
ویدجت های فریمورک foundation

برخی از تفاوت های مابین بوت استرپ و Foundation 

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

 

مقایسه

تفاوت بوت استرپ و foundation
تفاوت بوت استرپ و foundation

 

نکته: بوت استرپ از هر 2 پیش پردازنده LESS و SASS پشتیبانی می کند، اما Foundation فقط SASS را پشتیبانی می کند.

 

شروع کار با فریمورک Foundation:

خوب، راه های زیادی برای نصب Foundation وجود دارد، اما در اینجا در مورد دو روش صحبت خواهیم کرد: ابتدا CSS و دوم با استفاده از ترمینال.

اگر شما با CSS شروع به کار می کنید، می توانید Foundation را دانلود کرده و سفارشی کنید و ویژگی هایی که می خواهید در وب سایت خود داشته باشید را انتخاب کنید.

در هنگام شروع کار، شما انتخاب هایی مانند دانلود کامل Foundation و دانلود سفارشی سازی Foundation را دارید، هر کدام را که نیاز دارید انتخاب کنید.

پس از دانلود Foundation ، ساختار پوشه شما مانند تصویر زیر خواهد بود.

فریمورک foundation
فریمورک foundation

 

 

app.css: فایل CSS سفارشی است که می توانیم بر روی فایل CSS خودمان اضافه کنیم.

foundation.css: فایل css پیش فرض که توسط foundation اجرا شده است.

foundation.min.css : فایل css فشرده شده.

jquery.js: نیاز است که تابع واکنش گرا را برای وب سایت فراهم کند. شما فقط باید نسخه JQuery  1.10 یا بالاتر را قبل از کتابخانه foundation.js داشته باشید.

what-input.js: برای ردیابی روش ورودی جاری استفاده می شود.

foundation.js: برای استفاده از قابلیت های اصلی استفاده می شود.

app.js: فایل JS سفارشی است که ما می توانیم js خود را اضافه کنیم.

شما باید تمام فایل های فوق را در فایل HTML خود مشخص کنید.

 

شما همچنین می توانید foundation CLI را با استفاده از ترمینال نصب کنید.

  • sudo npm install –global foundation-cli 

پس از نصب CLI، از دستور جدید برای شروع یک پروژه جدید استفاده کنید:

foundation new

بیشتر بخوانید»»» مهم ترین تفاوتهای بین Front-End و Back-End

وب سایت هایی که با foundation ایجاد شده اند:

فریمورک foundation
فریمورک foundation

 

برندهای مشهوری که از فریمورک foundation استفاده کرده اند:

  1. PBS: Public Broadcasting Service
  2. National Geographic
  3. Washington Post
  4. Mozilla
  5. Cambridge University Press
  6. Official HTC Store (UK)
  7. National Geographic Education
  8. Burger Revolution

 

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

فریمورک  foundation در کاهش کدهای css و js کمک می کند، بنابراین توصیه می کنیم از این فریمورک در پروژه های خود استفاده کنید.

Source

دیگر مقالات مفید سایت:

نوشتن نظر

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