مقالات طراحی سایت

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

چگونه نصب کنیم؟

میتوانید با استفاده از Bower یا Meteor آنرا نصب کنید:

• Bower : bower install bootstrap-material-design
• Meteor: meteor add fezvrasta:bootstrap-material-design

شروع:

به پوشه dist موجود در این ریپازیدوری بروید. در این پوشه فایل test.html را میبینید که CSS ها را در بخش head و JS ها را قبل از body آورده است. پوشه dist را در روت پروژه خود قرار دهید و مطمئن شوید که تمامی فایل های موجود در داخل پروژه به این پوشه دسترسی دارند.

پوشه dist چیست؟

material-wfont.css یا material.css؟

تنها تفاوت این دو فایل در این است که فایل material-wfont.css وب فونت های گوگل را در خود دارد.

رنگ های اصلی را سفارشی کنید

شاید از خود بپرسید که چگونه رنگ اصلی یا primary را در این تم بدون ویرایش مستقیم پکیج bower تغییر داد. در پاسخ به این سوال باید گفت شما میتوانید با ایجاد یک فایل less در پروژه خود اینکار را انجام دهید.

@import "../bower_components/bootstrap-material-design/less/material-wfont.less";
// Override @primary color with one took from _colors.less
@primary: @deep-purple;

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

پیاده سازی

ما از Grunt در پروسه خود استفاده کرده ایم. این فرض را کرده ایم شما nodejs و grunt-cli را نصب شده دارید. پس از کلون repo، npm install را ران کنید و مطمئن شوید شما تمامی وابستگی های dev را دارید.

دستور grunt build را برای تست کامپایل less/sass ران کنید.

Grunt test را برای تست واحد ها براساس مرورگر jasmine ران کنید.

Grunt serve را برای ساختن و روشن کردن سرور http با ریلود زنده ران کنید.

LESS و SASS

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

مستندات

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

تغییرات

17 رنگ اضافی (بعلاوه 4 رنگ اصلی) برای دکمه ها، inputها، چک باکس ها، radioها، منو ها، تب ها، لیبل ها، paginationها، progress barها و غیره وجود دارد. از این رنگ ها با اضافه کردن پسوند –material-color به همراه نام رنگ دلخواه میتوان استفاده کرد.

مثال

<button class="btn btn-material-deep-purple">Deep purple button</button>

این رنگ ها از پالت رنگی طراحی متریال آورده شده اند.

دکمه ها

برای فلت کردن دکمه ها بدون سایه پایا (سایه مخصوص در طراحی متریال) از کلاس .btn-flat استفاده کنید. برای اضافه کردن سایه از کلاس .btn-raised استفاده کنید.

Input ها

از کلاس floating-label با placeholder استفاده کنید تا placeholder در لیبل های float شده transform شوند.

از data-hint="some hint" برای نشان دادن تذکر در زمانی که کاربر بر روی input فوکوس کرده است استفاده کنید.

توجه کنید که از radioها و چک باکس ها درجای صحیح خود استفاده:

<div class="radio/checkbox radio-primary">
    <label>
        <input type="radio/checkbox" checked>
        Option one is this
    </label>
</div>

آیکن ها

طراحی متریال برای بوت استرپ شامل 490 آیکن منحصر به فرد طراحی متریال است! این آیکن ها از سورس اصلی گوگل آورده شده است و تحت گواهی BSD است.

تنوع برای هر آیکن وجود درد که شامل آیکن های اصلی بوت استرپ نیز میشود.

سینتکس آیکن های متریال بصورت زیر است:

<i class="icon icon-material-favorite"></i>

Material.js

Material.js یک پلاگین جی کوری است که به کد HTML شما کمی جادو اضافه میکند و به طراحی متریال برای بوت استرپ این اجازه را میدهد تا به برخی از المان ها نظیر inputها، چک باکس ها، radioها و غیره استایل بدهد.

فانکشن ها

• $.material.init() تمامی دستورات زیر را اجرا میکند:
• $.material.ripples() جیکوری ripples.js را برای المان های دیفالت فعال میکند.
• $.material.input() استایل طراحی متریال را برای input های متنی و دیگر inputها فعال میکند.
• $.material.checkbox() استایل طراحی متریال را برای چک باکس ها فعال میکند.
• $.material.radio() استایل طراحی متریال را برای radio ها فعال میکند.

Material.js را تنها برای المان های خاص بکار بگیرید

هر function یک ولیو اختیاری دارد که میتواند بعنوان بخشی از function استفاده شود؛ برای مثال $.material.ripples("#selector, #foobar") تنها جی کوری Ripples.js را برای #selector و #foobar استفاده میشود. دیگر function هایی که میتوان با آنها از سلکتورهای اختیاری استفاده کرد $.material.ripples, $.material.input, $.material.checkbox و $.material.radioمیباشند.

حتی میتوانید مقادیر پیش فرض را با استفاده از $.material.options اورراید کنید. مقادیر دیفالت به شرح زیر است:

$.material.options = {
    "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
    "inputElements": "input.form-control, textarea.form-control, select.form-control",
    "checkboxElements": ".checkbox > label > input[type=checkbox]",
    "radioElements": ".radio > label > input[type=radio]"
}

پشتیبانی از arrive.js

اگر نیاز دارید تا المانهایی را بصورت داینامیک به DOM خود اضافه کنید از arrive.js قبل از material.js استفاده کنید. این کار باعث میشود تا material.js برای هر المان تازه ای که از طریق جاوااسکریپت اضافه میشود اجرا شود.

پلاگین ها

طراحی متریال برای بوت استرپ از چندین اسکریپت خارجی پشتیبانی میکند:

SnakbarJS

میتوانید با کمک پلاگین SnakbarJS اسنکبار و toast ایجاد کنید. استایل پیش فرض toast چهارگوش است (استایل اسنکبار). اگر میخواهید استایل آن گرد شود، کلاس toast را به استایل اسنکبار اضافه کنید.

RipplesJS

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

اگر میخواهید رنگ دلخواه به ripple بدهید این کار را انجام دهید:

<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>

noUiSlider

با کمک این تم میتوانید اسلاید cross-browser ایجاد کنید و آنرا با طراحی متریال طراحی کنید.

Dropdown.js

در نهایت پلاگین dropdown که select input را تبدیل به dropdown های زیبا میکند.

Selectize.js

این پلاگین select و multi-select را تبدیل به text input های پیشرفته میکند.

سازگاری

در حال حاضر طراحی متریال برای بوت استرپ از کروم (v37+)، فایرفاکس (30+)، و اینترنت اکسپلورر (11+) پشتیبانی میکند. مرورگرهای موبایلی هنوز امتحان نشده اند اما امکان دارد که با طراحی متریال برای بوت استرپ سازگاری داشته باشند.

به نقل از: github