🎨

Pico CSS

إطار CSS خفيف وبسيط بدون Classes (Classless CSS Framework)

★ ★ ★ ★ ★ (2/5)

👁️ 4 مشاهدة

📅 02 Jul 2026

⚛️ React 💚 Vue.js 🅰️ Angular 🧡 Svelte 🌐 عام

مستوى الخبرة المطلوب:

🌱 مبتدئ ⚡ متوسط

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف 🎨 CSS

المشاهدات 4

تاريخ الإضافة 02/07/2026

آخر تحديث 02/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Pico CSS هو إطار CSS فريد من نوعه - Classless! يعمل مباشرة على HTML elements الأساسية بدون الحاجة لإضافة classes. فقط اكتب HTML عادي وسيعمل بشكل جميل. Pico يوفر تصميم أنيق وبسيط مع Dark Mode مدمج، Responsive افتراضي، وتركيز على البساطة. مثالي للمحتوى والمدونات والبساطة.

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

مدونات ومواقع محتوى

•

توثيق تقني

•

مواقع بسيطة وسريعة

•

Rapid Prototyping بدون تنسيق

•

مشاريع تحتاج تصميم نظيف وبسيط

•

HTML Emails

✨ المميزات

أبرز مميزات هذه الأداة

✓

Classless - لا classes مطلوبة!

✓

خفيف جداً (~10KB)

✓

Dark Mode مدمج تلقائي

✓

Responsive افتراضي

✓

Semantic HTML - يعمل مع tags عادية

✓

CSS Variables للتخصيص

✓

Supports RTL (Right-to-Left)

✓

No JavaScript - CSS فقط

✓

أداء ممتاز - بدون overhead

✓

Simple وElegant design

⚠️ العيوب

نقاط يجب مراعاتها

محدود جداً - لا Components تفاعلية

لا Classes - لا تخصيص متقدم

لا Grid System - فقط layout بسيط

لا JavaScript - لا modals أو dropdowns

تصميم بسيط قد لا يناسب كل المشاريع

لا Icons أو Extra Features

مجتمع صغير

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Water.css

MVP.css

Simple.css

Bootstrap

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

<!-- تحميل Pico CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

<!-- HTML عادي - يعمل مباشرة! -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>موقع بسيط</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><strong>الشعار</strong></li>
      </ul>
      <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">عنّا</a></li>
        <li><a href="#">اتصل</a></li>
      </ul>
    </nav>
  </header>

  <main class="container">
    <h1>مرحباً بالعالم</h1>
    <p>هذا نص عادي سيظهر بشكل جميل مع Pico CSS.</p>

    <h2>عنوان فرعي</h2>
    <p>محتوى إضافي</p>

    <!-- Table - تعمل مباشرة -->
    <table>
      <thead>
        <tr>
          <th>الاسم</th>
          <th>العمر</th>
          <th>المدينة</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>أحمد</td>
          <td>25</td>
          <td>القاهرة</td>
        </tr>
        <tr>
          <td>سارة</td>
          <td>30</td>
          <td>الرياض</td>
        </tr>
      </tbody>
    </table>

    <!-- Form - يعمل مباشرة -->
    <form>
      <label for="name">الاسم</label>
      <input type="text" id="name" name="name" placeholder="أدخل اسمك" required>

      <label for="email">البريد الإلكتروني</label>
      <input type="email" id="email" name="email" placeholder="email@example.com" required>

      <label for="message">الرسالة</label>
      <textarea id="message" name="message" placeholder="اكتب رسالتك"></textarea>

      <label>
        <input type="checkbox" role="switch">
        أوافق على الشروط
      </label>

      <button type="submit">إرسال</button>
    </form>

    <!-- Article -->
    <article>
      <header>
        <h2>عنوان المقال</h2>
        <p><time datetime="2024-01-15">15 يناير 2024</time></p>
      </header>
      <p>محتوى المقال هنا. Pico CSS يجعل كل HTML elements تبدو جميلة بدون أي classes.</p>
      <footer>
        <p><small>كتب بواسطة أحمد</small></p>
      </footer>
    </article>
  </main>

  <footer class="container">
    <small>
      <a href="#">الخصوصية</a> • <a href="#">الشروط</a>
    </small>
  </footer>
</body>
</html>

<!-- تخصيص الألوان (CSS Variables) -->
<style>
:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --background: #ffffff;
  --color: #1f2937;
}

/* Dark Mode سيغير هذه تلقائياً */
[data-theme="dark"] {
  --background: #1f2937;
  --color: #f9fafb;
}
</style>