উপাদান

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

নিচের প্রতিটি উদাহরণ যে স্টাইলশিট ডেমো করা হচ্ছে সেটি দিয়েই রেন্ডার করা। কোনো প্রিপ্রসেসর নেই। কোনো জাভাস্ক্রিপ্ট নেই। কোনো অতিরিক্ত ডিপেন্ডেন্সি নেই। যেকোনো স্নিপেট একটি নতুন HTML ফাইলে কপি করলেই কাজ করবে।

ইনপুট

পেজ চালানোর জন্য ভিজিটর ক্লিক, ট্যাপ বা ফোকাস করে এমন ইন্টারেক্টিভ এলিমেন্ট।

বাটন

একটি সেমান্টিক, থিমেবল অ্যাকশন ট্রিগার। সলিড ও আউটলাইন ভেরিয়েন্ট প্রতিটিতে ছয়টি ব্র্যান্ড রঙ শিপ করে।

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

Primary Secondary Tertiary

আউটলাইন ভেরিয়েন্ট:

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

Outline Outline

প্রবেশাধিকার নোট। প্রতিটি .button ভেরিয়েন্ট একটি :focus-visible রিং এবং একটি ৪৪×৪৪ px ন্যূনতম হিট এরিয়া (WCAG 2.2 SC 2.5.8) সহ শিপ করে। পেজের মধ্যে অ্যাকশনের জন্য <button type="button"> এবং শুধু নেভিগেশনের জন্য <a href> ব্যবহার করুন।

ব্যাজ

স্ট্যাটাস, গণনা বা ক্যাটেগরির জন্য একটি কমপ্যাক্ট লেবেল। টেক্সট সাইজ নির্দিষ্ট তাই ব্যাজগুলো পার্শ্ববর্তী টেক্সটের সাথে সারিবদ্ধ হয়।

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Default Primary Success Warning Danger

প্রবেশাধিকার নোট। ব্যাজ ডিফল্টরূপে সজ্জামূলক। যখন ব্যাজ একমাত্র সংকেত বহন করে (যেমন অপঠিত গণনা), তখন এটি একটি visually-hidden হেল্পারে মোড়ান: <span class="visually-hidden">৩টি অপঠিত বার্তা</span>।

ফিডব্যাক

ভিজিটরকে জানানো সারফেস যে কিছু ঘটেছে — বা ঘটতে চলেছে।

অ্যালার্ট

সেমান্টিক অভিপ্রায় সহ স্ট্যাটাস বার্তা। v2.0.0-এ প্রতিটি ভেরিয়েন্ট স্পষ্টভাবে নেমস্পেসড .alert-{primary,secondary,info,success,warning,error}-এর অধীনে যাতে ভেরিয়েন্ট ক্লাস পেজের অন্যত্র স্টেট ক্লাসের সাথে সংঘর্ষ না করে।

<div class="alert alert-primary" role="alert">
  <strong>মনোযোগ।</strong> এটি একটি প্রাইমারি অ্যালার্ট।
</div>
<div class="alert alert-success" role="status">
  <strong>সংরক্ষিত।</strong> আপনার পরিবর্তনগুলো সেভ হয়েছে।
</div>
<div class="alert alert-warning" role="alert">
  <strong>সতর্কতা।</strong> এই কাজটি শেয়ারড স্টেটকে প্রভাবিত করে।
</div>
<div class="alert alert-error" role="alert">
  <strong>ত্রুটি।</strong> ফর্মটি সংরক্ষণ করা যায়নি।
</div>

মনোযোগ। এটি একটি প্রাইমারি অ্যালার্ট।

সংরক্ষিত। আপনার পরিবর্তনগুলো সেভ হয়েছে।

সতর্কতা। এই কাজটি শেয়ারড স্টেটকে প্রভাবিত করে।

ত্রুটি। ফর্মটি সংরক্ষণ করা যায়নি।

প্রবেশাধিকার নোট। তাৎক্ষণিক মনোযোগ দাবি করা বার্তার জন্য (ত্রুটি, সতর্কতা) role="alert" এবং অ-জরুরি নিশ্চিতকরণের জন্য role="status" ব্যবহার করুন। উভয়ই সহায়ক প্রযুক্তির কাছে বার্তাটি প্রদর্শিত হওয়ার সাথে সাথেই প্রকাশ করে।

সারফেস

সম্পর্কিত বিষয়বস্তু ফ্রেম ও গোষ্ঠীবদ্ধ করার কন্টেইনার।

কার্ড

একটি একক সামঞ্জস্যপূর্ণ ইউনিটের জন্য বর্ডারড, প্যাডেড কন্টেইনার। রেসপন্সিভ কার্ড ওয়ালের জন্য flex-N গ্রিডের সাথে জোড়া লাগান।

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">হালকা</h3>
      <p>38.8 KB মিনিফাইড, 7.7 KB gzipped।</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">অ্যাক্সেসিবল</h3>
      <p>WCAG 2.2 বাক্সের বাইরেই সামঞ্জস্যপূর্ণ।</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">মডুলার</h3>
      <p>সহজ ওভাররাইডের জন্য cascade-layered।</p>
    </div>
  </article>
</section>

হালকা

38.8 KB মিনিফাইড, 7.7 KB gzipped।

অ্যাক্সেসিবল

WCAG 2.2 বাক্সের বাইরেই সামঞ্জস্যপূর্ণ।

মডুলার

সহজ ওভাররাইডের জন্য cascade-layered।

প্রবেশাধিকার নোট। প্রতিটি কার্ড একটি সেমান্টিক ল্যান্ডমার্কে (<article>, <section>) মোড়ান এবং এর বিষয়বস্তু একটি হেডিং (<h3>) দিয়ে শুরু করুন। স্ক্রিন-রিডার ব্যবহারকারীরা তখন কার্ড তালিকা প্রথম-শ্রেণীর নেভিগেবল রিজিয়ন হিসেবে ট্রাভার্স করতে পারবেন।

ফর্ম

ব্যবহারকারীর ডেটা সংগ্রহের জন্য ইনপুট, লেবেল এবং গ্রুপিং।

ফর্ম ফিল্ড

লেবেল, টেক্সট ইনপুট, textarea, fieldset ও legend — সবকিছু ডিজাইন সিস্টেমের বাকি অংশের সাথে সামঞ্জস্যপূর্ণভাবে সাইজড।

<form>
  <label for="name">নাম</label>
  <input id="name" type="text" required>

  <label for="email">ইমেইল</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">বার্তা</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">পাঠান</button>
</form>

নাম

ইমেইল

বার্তা

প্রবেশাধিকার নোট। প্রতিটি ইনপুটে একটি প্রোগ্রাম্যাটিকভাবে সংযুক্ত <label for="…"> থাকতে হবে। সম্পর্কিত কন্ট্রোল একটি <fieldset>-এ <legend> সহ গ্রুপ করুন। বাধ্যতামূলক ফিল্ড required দিয়ে চিহ্নিত করুন (এবং লেবেল টেক্সটে একটি দৃশ্যমান তারকা চিহ্ন দিন)।

লেআউট

কাঠামোগত প্রিমিটিভ — গ্রিড, কন্টেইনার, হেডার — যা পুরো পেজকে ফ্রেম করে।

গ্রিড

flexbox-ভিত্তিক একটি রেসপন্সিভ flex-N গ্রিড (১ → ১২ কলাম)। .row প্যারেন্ট স্বয়ংক্রিয়ভাবে গ্যাপ ও র‍্যাপ করে।

<div class="row">
  <div class="flex-6">অর্ধেক</div>
  <div class="flex-6">অর্ধেক</div>
</div>
<div class="row">
  <div class="flex-4">এক-তৃতীয়াংশ</div>
  <div class="flex-4">এক-তৃতীয়াংশ</div>
  <div class="flex-4">এক-তৃতীয়াংশ</div>
</div>

অর্ধেক

এক-তৃতীয়াংশ

প্রবেশাধিকার নোট। ভিজুয়াল অর্ডার DOM অর্ডারের সাথে মিলতে হবে। flex-direction: row-reverse বা order: দিয়ে সারি পুনর্বিন্যাস এড়িয়ে চলুন — স্ক্রিন রিডার ও কীবোর্ড ব্যবহারকারীরা পেইন্ট নয়, সোর্স অনুসরণ করে।

একটি সম্পূর্ণ CSS-only হেডার রেসপন্সিভ হ্যামবার্গার টগল সহ। শূন্য জাভাস্ক্রিপ্ট। নিচের স্নিপেটটি একটি নতুন HTML পেজে কপি করুন যেটি ইতিমধ্যে skeletonic.min.css লোড করে এবং মেনু নিজে থেকেই collapse, expand এবং ফোকাস ট্র্যাপ করবে।

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">ব্র্যান্ড</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="নেভিগেশন টগল করুন">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">হোম</a></li>
    <li><a href="#">ডক্স</a></li>
    <li><a href="#">উপাদান</a></li>
    <li><a href="#">সম্পর্কে</a></li>
  </ul>
</header>

ব্র্যান্ড

প্রবেশাধিকার নোট। লুকানো চেকবক্স ট্যাব অর্ডারে থাকে যাতে কীবোর্ড ব্যবহারকারীরা Space বা Enter দিয়ে মেনু খুলতে পারে। <label> aria-hidden বহন করে কারণ চেকবক্সই অ্যাক্সেসিবল নাম উৎস। হ্যামবার্গার টগল দেখতে উইন্ডো ৬৪০ px-এর নিচে রিসাইজ করুন।

সম্পূর্ণ a11y নোট দেখুন → · প্যালেট দেখুন →

Skeletonic Stylus