רכיבים

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

כל דוגמה למטה מוצגת עם גיליון הסגנונות עצמו. ללא מעבד מקדים. ללא JavaScript. ללא תלויות נוספות. העתיקו כל קטע קוד לקובץ HTML ריק והוא עובד.

קלטים

אלמנטים אינטראקטיביים שהמבקר לוחץ עליהם, מקיש או מביא לפוקוס כדי להפעיל את הדף.

כפתורים

טריגר פעולה סמנטי וניתן להתאמה. גרסאות מלאות ומתאר מגיעות בשישה צבעי מותג כל אחת.

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

ראשי משני שלישוני

גרסאות מתאר:

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

מתאר מתאר

הערת נגישות. כל גרסת .button מגיעה עם טבעת :focus-visible ושטח לחיצה מינימלי של 24×24 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>

ברירת מחדל ראשי הצלחה אזהרה סכנה

הערת נגישות. תגיות הן דקורטיביות כברירת מחדל. כשהתגית נושאת את האות היחיד (למשל מונה הודעות שלא נקראו), עטפו אותה בעזר מוסתר ויזואלית: <span class="visually-hidden">3 הודעות שלא נקראו</span>.

משוב

משטחים שמודיעים למבקר שמשהו קרה — או עומד לקרות.

התראות

הודעות סטטוס עם כוונה סמנטית. ב-v2.0.0 כל גרסה ממורחבת במפורש תחת .alert-{primary,secondary,info,success,warning,error} כך שמחלקת הגרסה לא תתנגש עם מחלקות מצב במקומות אחרים בדף.

<div class="alert alert-primary" role="alert">
  <strong>Heads up.</strong> This is a primary alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Saved.</strong> Your changes are persisted.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Careful.</strong> This action affects shared state.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Could not save the form.
</div>

שימו לב. זוהי התראה ראשית.

נשמר. השינויים שלכם נשמרו.

זהירות. פעולה זו משפיעה על מצב משותף.

שגיאה. לא ניתן היה לשמור את הטופס.

הערת נגישות. השתמשו ב-role="alert" להודעות הדורשות תשומת לב מיידית (שגיאות, אזהרות) וב-role="status" לאישורים לא דחופים. שניהם חושפים את ההודעה לטכנולוגיה מסייעת ברגע שהיא מופיעה.

משטחים

מכולות שממסגרות ומקבצות תוכן קשור.

כרטיסים

מכולה עם גבול ומרווח לקבוצת תוכן קוהרנטית. שלבו עם רשת flex-N לקירות כרטיסים רספונסיביים.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

קל משקל

38.8 KB ממוזער, 7.7 KB בדחיסת gzip.

נגיש

תואם WCAG 2.2 ישירות מהקופסה.

מודולרי

מאורגן בשכבות קסקייד לדריסה קלה.

הערת נגישות. עטפו כל כרטיס בציון סמנטי (<article>, <section>) והתחילו את תוכנו בכותרת (<h3>). משתמשי קוראי מסך יוכלו אז לנווט ברשימת הכרטיסים כאזורים ניווטיים מדרגה ראשונה.

טפסים

קלטים, תוויות וקיבוצים לאיסוף נתוני משתמש.

שדות טופס

תוויות, שדות טקסט, אזורי טקסט, מערכות שדות וכותרות — הכול בגודל עקבי עם שאר מערכת העיצוב.

<form>
  <label for="name">Name</label>
  <input id="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Message</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Send</button>
</form>

שם

דוא"ל

הודעה

הערת נגישות. לכל קלט חייבת להיות <label for="…"> משויכת פרוגרמטית. קבצו פקדים קשורים בתוך <fieldset> עם <legend>. סמנו שדות חובה עם required (וכוכבית נראית בטקסט התווית).

פריסה

פרימיטיבים מבניים — רשת, מכולה, כותרת — שממסגרים את הדף כולו.

רשת

רשת רספונסיבית flex-N (מ-1 עד 12 עמודות) בנויה על flexbox. אלמנט האב .row מוסיף מרווחים ועוטף אוטומטית.

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
</div>

חצי

שליש

הערת נגישות. הסדר הוויזואלי צריך לתאום את סדר ה-DOM. הימנעו מסידור מחדש של שורות עם flex-direction: row-reverse או order: — קוראי מסך ומשתמשי מקלדת עוקבים אחרי המקור, לא אחרי הציור.

כותרת מלאה מבוססת CSS בלבד עם מתג hamburger רספונסיבי. אפס JavaScript. העתיקו את הקטע למטה לדף HTML ריק שכבר טוען את skeletonic.min.css והתפריט מתקפל, מתרחב ולוכד פוקוס כראוי בעצמו.

<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="#">Brand</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Toggle navigation">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">About</a></li>
  </ul>
</header>

מותג

הערת נגישות. תיבת הסימון המוסתרת נשארת בסדר הטאבים כך שמשתמשי מקלדת יכולים לפתוח את התפריט עם Space או Enter. ה-<label> נושא aria-hidden כי תיבת הסימון עצמה היא מקור השם הנגיש. צמצמו את החלון מתחת ל-640 px כדי לראות את מתג ה-burger משתלט.

ראו הערות נגישות מלאות ← · עיינו בפלטות ←

Skeletonic Stylus