آموزش طراحی متریال با Materialize (جلسه 1) - مقدمه

- visibility ۸ mode_comment

در این سری آموزشی قصد داریم که طراحی متریال با استفاده از ابزار Materialize رو به شما آموزش بدیم و شما رو با اون آشنا کنیم.getting-started-materialize-css-framework

Materialize مجموعه ای از رابط های کاربری ساخته شده با CSS و HTML و Javascript هست. با استفاده از این ابزار میتونین به سادگی و با جذابیت هر چه تمامتر به طراحی و کدنویسی بپردازید، که از قواعد و اصول استاندارد در زمینه وب برخوردار هست و پشتیبانی خوبی بر روی مرورگرهای بروز و مدرن داره. این ابزار به شما کمک میکنه که سایتهایی متریال و زیبا، سریع و واکنشگرا بسازید. این ابزار از Google Material Design ایده گرفته و از روی قواعد مربوط به اون ساخته شده است.

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

پیش نیازها

قبل از اینکه شروع به یادگیری این دوره کنید باید یک سری پیش نیازهایی رو داشته باشید و درک کلی و متوسطی از CSS و HTML و Javasccript و DOM داشته باشید و همچنین با کار کردن با Text Editor ها آشنا باشید. اینکه بدونید ابزارهای تحت وب چطوری کار میکنن خیلی میتونه در فهم این دوره بهتون کمک کنه.

راه اندازی اولین مثال با این ابزار

ما برای مثال و برای بار اول از CDN های مربوطه استفاده میکنیم و خروجی رو به شما نشون خواهیم داد. هدف از این مثال آشنایی مقدماتی شما با محیط هست و در جلسات بعدی بصورت کامل و ریز به ریز در مورد هر کدام توضیح خواهیم داد:

اگر کدهای بالا رو در یک فایل بنام index.html ذخیره کرده و اون رو در مرورگر باز کنید با چنین نتیجه ای روبرو خواهید شد:md1

این مثال بسیار ساده ای بود و خواستیم که فقط با محیط کلی و خروجی اون آشنا بشید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران
AliReza Shariyari

ممنون از مطلب خوب تون
میشه در مورد هر یک از خطوط زیر توضیح بدین که برای چی هست؟
منظورم خطوطی که بین head هست.
متاسفانه نمیتونم کد ها رو در اینجا قرار بدم

محمد اسفندیاری

در جلسات بعد خدمتتون بصورت کامل توضیح داده میشه
موفق باشید

حمید حسینی تبار

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

محمد اسفندیاری

اینارو امتحان کردم ولی بدردتون میخوره:
https://github.com/vahid-almasi/materialize-rtl

Kazem forghani

سلام
از کدوم فایل باید استفاده کنیم؟
فایل CSS اولی یا دومی؟
تشکر

محمد اسفندیاری

این فایل رو بعد از فایل css خود materialize قرار بدین:
https://github.com/vahid-almasi/materialize-rtl/blob/master/materialize_rtl.css

رسول دلدار

این style های css هم در راست چین تغییر کرده

محمد اسفندیاری

با سلام
شما هر فایل CSS مربوط به ابزارهای مختلف رو داشته باشید که چپ به راست باشه با استفاده از سایتی که در زیر بیان میکنم، میتونین اون رو به راحتی راست به چپ کنید
http://rtlcss.com/playground/
کافیه کدهای چپ به راست رو در قسمت چپ قرار بدین و کدهای راست به چپ در قسمت راست در اختیارتون قرار میگیره.
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.