ডেভসংকেত

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

টেক জায়ান্ট গুগলের ম্যাটেরিয়াল ডিজাইনের ভিত্তিতে ম্যাটেরিয়ালাইজ সিএসএস হল একটি রেস্পন্সিভ সিএসএস ফ্রেমওয়ার্ক। এটি মূলত ইউজার এক্সপেরিয়েন্স কে আরও প্রসারিত করে এবং একটি এলিমেন্ট দেখতে কেমন হবে এবং কিভাবে কাজ করবে সেটার উপর ফোকাস করে। দ্রুত এবং রেস্পন্সিভ ওয়েব পেজ তৈরি করার জন্য এটা ব্যবহার করা হয়ে থাকে

কন্ট্রিবিউটর

  • zubayerhimel

শেয়ার করুন

কন্টেইনার

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

    <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>