ম্যাটেরিয়ালাইজ সিএসএস

রেস্পন্সিভ ফিক্সড উইড

<div class='container'>...</div>

মোবাইল ভিউ তে ফিক্সড উইড

<div class='grid-example col s12'>...</div> 

উপরে এবং নিচে ফাঁকা জায়গা রাখা

<div class='section'>...</div> 

কলাম বামে দেখানো

<div class='row'><div class='left-align'>...</div></div>

কলাম ডানে দেখানো

<div class='row'><div class='right-align'>...</div></div>

কলাম মাঝে দেখানো

<div class='row'><div class='center-align'>...</div></div>

ভার্টিকাল ভাবে মাঝে দেখানো

<div class='valign-wrapper'>...</div> 

বামে ভাসানোর জন্য

<div class='left'>...</div>

ডানে ভাসানোর জন্য

<div class='right'>...</div>

লিখা ট্রাঙ্কেট করে রাখা

<p class='truncate'>...</p>

রেস্পন্সিভ ছবি প্রদর্শন

<img class='responsive-img'>

ছবি গোলাকার করা

<img class='circle' >

এম্বেড করা ভিডিও রাখা

<div class='video-container'><iframe></iframe></div>

রেস্পন্সিভ ভিডিও প্রদর্শন

<div class='responsive-video'>...</div>

ছায়া দেয়া

<div class='z-index-1(1,2,3,4,5)'>...</div>

রূপান্তরিত কোন কিছু দেখানো

<a class='scale-transition'>...</a>

রূপান্তরিত কোন কিছু লুকানো

<a class='scale-transition scale-out'>...</a>

মাউস হোভারে কন্টেন্ট ভেসে ওঠা

<div class='hoverable'>...</div>

ডোরাকাটা টেবিল

<table class='striped'>...</table>

মাউসের হোভারে টেবিল রো হাইলাইট করা

<table class='highlight'>...</table>

টেবিল এর কন্টেন্ট মাঝে রাখা

<table class='centered'>...</table>

মোবাইল ডিভাইস এর জন্য রেস্পন্সিভ টেবিল তৈরি

<table class='responsive-table'>...</table>

স্ক্রীন প্রস্থ যখন ৬০০পিক্সেল এর সমান বা ছোট

<div class='col s'>...</div>

স্ক্রীন প্রস্থ যখন ৬০০পিক্সেল এর বড়

<div class='col m'>...</div>

স্ক্রীন প্রস্থ যখন ৯৯২পিক্সেল এর সমান বা বড়

<div class='col l'>...</div>

স্ক্রীন প্রস্থ যখন ১২০০পিক্সেল এর সমান বা বড়

<div class='col xl'>...</div>

সম্পূর্ন স্ক্রীনে ১২ কলাম

<div class='col s12'>...</div>

সম্পূর্ন স্ক্রীনে ৬ কলাম

<div class='col s6'>...</div>

৬ কলাম অফসেট সেট করা

<div class='col s6 offset-s6'>...</div>

কলামের অদল বদল করা

<div class='row'><div class='col s7 push-s5'>...</div> <div class='col s5 pull-s7'>...</div></div>

সব ধরনের ডিভাইসে লুকানোর জন্য

<div class='hide'>...</div>

শুধুমাত্র মোবাইলে লুকানোর জন্য

<div class='hide-on-small-only'>...</div>

শুধুমাত্র ট্যাবলেট এ লুকানোর জন্য

<div class='hide-on-med-only'>...</div>

ট্যাবলেট এবং এর থেকে ছোট ডিভাইসে লুকানোর জন্য

<div class='hide-on-med-and-down'>...</div>

ট্যাবলেট এবং এর থেকে বড় ডিভাইসে লুকানোর জন্য

<div class='hide-on-med-and-up'>...</div>

শুধুমাত্র ডেক্সটপে লুকানোর জন্য

<div class='hide-on-large-only'>...</div>

শুধুমাত্র মোবাইলে দেখানোর জন্য

<div class='show-on-small'>...</div>

শুধুমাত্র ট্যাবলেটে দেখানোর জন্য

<div class='show-on-med'>...</div>

শুধুমাত্র ডেক্সটপে দেখানোর জন্য

<div class='show-on-large'>...</div>

ট্যাবলেট এবং এর থেকে বড় ডিভাইসে দেখানোর জন্য

<div class='show-on-medium-and-up'>...</div>

ট্যাবলেট এবং এর থেকে ছোট ডিভাইসে দেখানোর জন্য

<div class='show-on-medium-and-down'>...</div>

হেডার ১

<h1>...</h1>

হেডার ২

<h2>...</h2>

হেডার ৩

<h3>...</h3>

হেডার ৪

<h4>...</h4>

হেডার ৫

<h5>...</h5>

হেডার ৬

<h6>...</h6>

ডিভাইসের স্ক্রিনের উপর নির্ভর করে প্যারাগ্রাফের লিখার সাইজ বড় ছোট করা

<p class='flow-text'>...</p>

সাধারণ বাটন

<a class='btn'>Button</a>

ছোট বাটন

<a class='btn-small'>Button</a>

বড় বাটন

<a class='btn-large'>Button</a>

বাটনে ওয়েভ ইফেক্ট দেয়া

<a class='waves-light btn'>Button</a>

বাটনে আইকন দেয়া

<a class='waves-light btn'><i class='material-icons left'>cloud</i>Button</a>

ফ্ল্যাট বাটন

<a class='btn-flat'>Button</a>

ভাসমান বাটন

<a class='btn-floating'></a>

ভাসমান অ্যাকশন বাটন

<div class='fixed-action-btn><a class='btn-floating'></a></div>

স্পন্দন বাটন

<a class='btn-floating pulse'></a>

ভাসমান অ্যাকশন বাটন

<div class='fixed-action-btn'><a class='btn-floating'><i class='material-icons'>edit</i></a><ul><li></li><a class='btn-floating'><i class='material-icons'>people</i></a></ul></div>