آموزش فریم ورک foundation – معرفی و نحوه استفاده

سلام به همه دوستان . میخوام فریمورک foundation (فاندیشن) که یکی از فریمورک های معروف و رقیبی برای bootstrap است رو به دوستان آموزش بدم.

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

این فریمورک به چندین بخش مختلف تقسیم میشه : فایل css , فایل JS و فایل فونت. (فایل فونتش همراهش نیست و درصورت نیاز میشه به صورت ماژول جداگانه دانلودش کرد, همین باعث میشه که باحال تر باشه 😀 هرچیزی که نیاز باشه رو میتونید بگیرید و واجب نیست که چیزایی که نیاز ندارید رو به زور توی صفحه خودتون بیارید!)

برای ساختن صفحات وب خودتون فقط به فایل Css نیاز خواهید داشت اما اگه بخواید که با کاربر تعامل داشته باشید(مثلا اسلایدر داشته باشید) میتونید از فایل js استفاده کنید.

برای دانلود این فریم ورک کافیه به اینجا برید(کلیک کنید) و بعدش روی دکمه ی download کلیک کنید تا به صفحه ی مربوط به دانلود این فریمورک منتقل بشید.

این فریمورک به چند صورت قابل دانلود است که اونها رو شرح میدم:

complete » کل فایل های فریمورک رو میتونید از این بخش دانلود کنید

essential » در این قسمت فقط فایل های واجب رو میتونید دانلود کنید. فایلهای واجب چیزهایی هستند که بیشتر برای طراحی استفاده میشن (فایل css)

custom » از این قسمت میتونید فریمورک رو شخصی سازی کنید و قسمت هایی که نیاز دارید رو انتخاب کنید تا درون فریمورک قرار بگیرند و بعدش دانلودش کنید.

Sass » در این قسمت سورس کد Sass فریمورک در اختیار شما قرار داده میشه , اگه زبان برنامه نویسی Sass بلدید میتونید استفاده کنید وگرنه بدردتون نمیخوره 😀

حالا کدوم رو باید دانلود کنیم؟ من میگم complete رو دانلود کنیم تا همه چیز رو داشته باشیم 😀 خب حالا روی دکمه ی Download every thing کلیک کنید (مثل شکل زیر).

foundation.zurbبعد از دانلود کردن فریمورک میتونید اون رو از حالت فشرده خارج کنید. 😀 تموم شد الان شما فریمورک foundation رو دارید.(همچنین میتونید این فریمورک رو از انتهای همین پست دانلود کنید).

درون پوشه ی Css مربوط به فریمورک چندین فایل وجود داره , فایلی که با نام foundation.css هست , فریمورک کامل است. فایل foundation.min.css فریمورک کامل است که فشرده سازی شده کداش (فایلی که استفاده خواهید کرد).

فایل foundation.flex.css که ممکنه داشته باشیدش (شایدم نداشته باشیدش) فایلی هست که فقط توش سیستم گرید و button رو داره! نگران نباشید ازش استفاده نمیکنیم چون ناقصه 😀

یک فایل دیگه هم ممکنه داشته باشید با نام app.css که اگه بازش کنید میبینید خالیه 😀 خب پس پوشه ی Css رو بررسی کردیم.

پوشه ی js نیز شامل فایل هایی است که مهم ترینش foundation.min.js است , یه پوشه ی vendor نیز هست که توش جی کوئری قرار داره.

شما برای استفاده از فریمورک فاندیشن نیاز دارید تا فایل های فریمورک رو به صورت زیر توی صفحه ی خودتون اضافه کنید:

در کد بالا در اغاز دوتا تگ meta داریم که اولیش برای قرار دادن انکدینگ صفحه روی utf-8 (ساپورت کردن فارسی) است و دومی برای ارائه تنظیمات رسپانسیو بودن به مرورگر استفاده میشود. در مورد viewport اگه میخواید اطلاعات بیشتری داشته باشید میتونید اینجا رو مطالعه کنید(کلیک کنید).

بعدش فایل foundation.min.css رو توی صفحه اظافه کردیم که مهم ترین فایل در فریمورک همین فایله 😀 در مرحله ی بعدی فایل app.css رو اظاف میکنیم (این فایل خالی است اما در اینده ازش استفاده میکنیم).

فایل های جاوا اسکریپتی رو نیز اظافه میکنیم. فایل اول جی کوئری خواهد بود , میتونید ورژن اخر جی کوئری رو نیز اظافه کنید. دقت کنید فایل جی کوئری باید قبل از فایل foundation.js قرار بگیره چون قسمت جاوا اسکریپتی فاندیشن به جی کوئری وابسته است.

یه فایل با نام what-input نیز همراه فریمورک بود که اونم در انتها اضافه میکنیم 😀 , در اخر صفحه نیز فایل app.js اظافه میکنیم. دقت کنید فایل app.js شامل دستورات زیر است که باعث راه اندازی قسمت جاوا اسکریپتی فریمورک میشه.

اگه قسمت جاوا اسکریپتی فریمورک رو لازم نداریم(مثلا اسلایدر نمیخواید) میتونید فایل های جاوا اسکریپتی رو اصلا توی صفحه اظافه نکنید(فقط فایل css رو اظافه کنید).

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

کسانی که سوال یا مشکلی دارند از بخش نظرات مطرح کنند تا بهش پاسخ بدیم. موفق باشید.

فریمورک فاندیشین ورژن 6 نسخه complete
183.1 KiB
27 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. سلام
    بین bootstrap و foundation کدوم یک قدرت بیشتری داره ؟ یعنی کدوم یک بهتره ؟
    به غیر از سرعت یادگیری سریعfoundation چه برتری های دیگه ای داره ؟

    • سلااااااااام 😀
      شباهت هاشون : هردوتاشون کار ما برای طراحی رو راحت و ساده میکنند , هردوتاشون معروف هستند!
      تفاوت ها :
      ۱- بوت استرپ از لحاظ استفاده توسط افراد در رده ی اول قرار داره در صورتی که foundation در رده ی دوم قرار داره! میتونید توی سایت w3schools ببینید.
      ۲- بوت استرپ به طور پیش فرض همه ی فایل هاشو به صورت یکجا و مرتبط با هم بهتون میده! ولی foundation فایل ها رو به صورت جداگانه بهتون میده و هر فایلی مستقل هست!
      ۳ – هردوتا از صفحات رسپانسیو پشتیبانی میکنند اما foundation پشتیبانی بهتری داره! و بهتر کار کرده.
      ۴ – کار کردن با foundation خیلی راحت تره 😀 میشه گفت که foundation کوچکتر از بوت استرپ هست و به همین دلیل یاد گیریش راحت تره!
      ۵ – من پیشنهاد میکنم که برای شروع foundation رو یاد بگیرید و بعدش که با کلیات کار اشنا شدید برید bootsrap رو هم یاد بگیرید , هردو رو بلد باشید خیالتون راحت تره 😀
      ۶ – foundation به صورت ماژول مانند میشه قابلیت های جدیدی بهش اظافه کرد و اموزش های خوبی روی سایت خودش داره!
      ۷ – در طرح چه من اول foundation رو اموزش میدم ولی بعدا بوت استرپ رو نیز اموزش خواهم داد پس نگران نباشید همه چیز رو یاد خواهید گرفت.

  2. فرشاد رضازاده

    سلام
    سایتتون عالیه
    آموزش هاتون هم روان و ساده هستن

    یه سوالی برام پیش اومده
    سی ام اس سایتتون رو خودتون نوشتید؟
    با چه زبانی هست ؟

    • سایت از دو بخش تشکیل شده : یک بخش با وردپرس مدیریت میشه و یک بخش دیگه نیز با CMS شخصی که خودم ساختم مدیریت میشه.
      هردوبخش رو دارم توسعه میدم و به زودی سایت رو با قابلیت های جدیدتری خواهید دید 😀
      سایت کلا با PHP ساخته شده , موفق باشید.

می‌خواهید دیدگاهتان را بیان کنید؟