آموزش فریمورک materialize-معرفی

سلام به همه ی دوستان گرامی 😀 در آموزش های قبلی فریمورک foundation رو مورد بررسی قرار دادیم(کلیک کنید) , در اینجا قصد داریم یک سری از آموزش های فریمورک متریالایز رو برای شما دوستان قرار بدیم. این اموزش ها رو به تدریج کاملتر خواهیم کرد تا تمامی مباحث فریمورک materialize پوشش داده شود.

فریمورک متریالایز یا materialize یک فریمورک front-end است که وظیفه ی طراحی ساختار صفحات رو به عهده داره. این فریمورک کاملا رسپانسیو (Responsive) است. این فریمورک بر اساس material design که توسط گوگل ارائه شده طراحی و پیاده سازی شده است.

هسته ی اصلی سازندگان این فریمورک رو ۴ نفر تشکیل میدن که همشون دانشجوی دانشگاه Carnegie Mellon هستن 😀

خب دیگه از توضیحات الکی میگذریم و میریم سراغ نحوه ی استفاده از این فریمورک 🙂 برای استفاده از این فریمورک باید مراحل زیر رو طی کنید:

مرحله ی اول : دانلود فریمورک

همیشه اخرین ورژن از این فریمورک رو میتونید از سایت اصلیش یعنی اینجا(کلیک کنید) دانلود کنید. یا اینکه میتونید از انتهای همین اموزش این فریمورک رو دانلود کنید. بعد از اینکه دانلود رو انجام دادید ساختار پوشه های شما به صورت زیر خواهد بود :

  1. پوشه ی js که شامل فایل materialize.js و فایل فشرده شده ی آن یعنی materialize.min.js است. این دو فایل هیچ تفاوتی باهم ندارند , تنها تفاوتشون در این است که فایل materialize.min.js فشرده شده هست و فاصله های اظافی و توضیحات اضافی ازش حذف شده.
  2. پوشه ی fonts که شامل فونت roboto میشه
  3. پوشه ی css که شامل فایل materialize.css و materialize.min.css میشه که فشرده شده ی فایل materialize.css است.

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

خب حالا برای اینکه بتونیم با فریمورک کار کنیم باید یکی از فایل های js و یکی از فایل های css رو به صفحه ی خودمون اظافه کنیم. من بهتون پیشنهاد میکنم فایل هایی که دارای پسوند min هستند رو اظافه کنید چون حجم کمتری دارند و زودتر لود میشن. به صورت زیر عمل میکنیم:

همونطور که در بالا میبینید ما  فایل materialize.min.css رو توی head صفحه ی خودمون اظافه کردیم همچنین فایل materialize.min.js رو نیز در انتهای صفحه قبل از بسته شدن تگ body اظافه کردیم. دقت کنید که فایل materialize.min.js وابسته به jquery (جی کوئری) است پس ما جی کوئری رو قبل از این فایل اظافه میکنیم. همچنین اگه میخواید از ایکن های (icons) این فریمورک استفاده کنید باید فونت مربوط به ایکن ها رو اظافه کنید که ما این فونت رو از مخزن گوگل و در قسمت head صفحه اظافه کردیم. دقت کنید که اظافه کردن فونت باید قبل از materialize.min.css قرار بگیره. خب کار تموم شد حالا میتونیم از فریمورک استفاده کنیم 😀

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

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

Materialize
Materialize
materialize-v0.97.8.zip
Version: 0.97.8
1.1 MiB
12 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

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