مشکی

زیبا. مشکی. واکنش‌گرا.

            
            
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@3.0.0/dist/css/meshki.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/meshki@3.0.0/dist/js/meshki.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@3.0.0/dist/js/meshki-rtl.min.css">

سادگی و مینیمالیسم

ظاهر صفحات خود را در کمترین زمان طراحی کنید! ما تمام تلاشمان را کرده‌ایم تا «مشکی» را تا حد زیادی ساده و تمیز نگاه داریم و شروع کار را برایتان آسان کنیم.

دوست‌دارِ چشم

به چشمان خود استراحت دهید. به دلیل استفاده از رنگ مشکی شیک و ملایم، چشم‌های شما به هنگام خواندن صفحاتی که از «مشکی» بهره میبرند، از دید نور سفید مضر در امان خواهند بود. این مسئله در سایت‌هایی که متون زیادی دارند حائز اهمیت است.

حرفه‌ای

سادگی به معنای کمبود امکانات نیست. مشکی با در نظر گرفتنِ خلاقیت شما طراحی شده است. بنابراین طراحی شما می‌تواند کاملا متفاوت با این صفحه‌ای که می‌بینید باشد.

سریع مثل موشک

مشکی به خاطر داشتن کُد بسیار اندک و بهینه و به‌کارگیری از ساختارهای ساده، فوق العاده کم‌حجم و سبک است و منابع سخت‌افزاری کمی را مصرف می‌کند. مرورگر شما نیازی به پردازش کد زیادی ندارد.

بدون پیش‌نیاز

مشکی به هیچ کتابخانه یا فایل خارجی وابسته نیست. تمام کُدها جاوا اسکریپت و CSS معمولی هستند. این یعنی ساخت سریع و بدون دردسر.

پایدار

مشکی بیشتر از 5 سال است که با شماست! تصور کنید که پروژه‌ای به پایداریِ اسکلتون 5 سال بیشتر نگهداری شود. نتیجه‌ی آن چیزی نیست جز لذت بردن از تجربه‌ی بی‌نقصی به نام مشکی.

مشکی چیست؟

مشکی یک کتابخانه ساده، مشکی-رنگ و واکنش‌گرای CSS است، تا بتوان به راحتی پروژه‌های جدید را شروع کرد. فقط ۲۰ کیلوبایت (فشرده شده) یا ۳۰ کیلوبایت (معمولی) حجم دارد، که این شامل تمامی فایل‌های CSS و JS می‌شود، که همین سبب می‌شود یک کتابخانه عالی برای پروژه‌های کوچک تا متوسط باشد. مشکی آسان، تمیز و به معنای واقعی کلمه، زیباست. ابتدا به عنوان یک Fork از پروژه اسکلتون شروع شد، و در حال حاضر هم از برخی کدهای اسکلتون استفاده میکند، اما تغییرات به حدی زیاد بود که اگر به مشکی نگاه کنید، به سختی میتوان گفت که مشکی شبیه به اسکلتون است.

از نگاه کردن به کدهای مشکی واهمه نداشته باشید! اگر ایرادی مشاهده کردید، یا قسمتی از مشکی نیاز به ارتقاء داشت، به مخزن گیتهاب ما بروید و یک Issue یا Pull Request باز کنید!

چرا مشکی؟

همانطور که میدانید، کتابخانه‌های بسیار زیاد و متنوعی در دنیای اینترنت وجود دارند، اما چه چیزی مشکی را متفاوت می‌کند؟

مشکی سعی می‌کند که سبک-وزن، اما کاربردی باشد. بر خلاف اکثر کتابخانه‌هایی که مدعی سبک-وزن بودن هستند، مشکی کاربردی بودن را فدای سبک-وزن بودن محض نمی‌کند. این بدین معناست که شما به اختراع دوباره نیازی ندارید، و بسیاری از اجزای مشکی، بدون تغییرات اضافی قابل استفاده هستند. همه میتوانند کتابخانه های زیر ۲۰ کیلوبایت بسازند، اما این برای کاربردی بودن کافیست؟

در همین راستا، مشکی سعی می‌کند تا یک ظاهر فوق‌العاده جذاب را به ارمغان بیاورد: رنگ مشکی چشمان شمارا اذیت نمی‌کند، و سادگی و ظرافتی بی نظیر را تقدیم شما می‌کند. یکی از اهداف اصلی مشکی، پایدار و قابل اطمینان بودن است. برای همین ما تمام تلاشمان را می‌کنیم تا مشکی را همیشه به-روز نگاه داریم و ایرادات آن را به سرعت برطرف کنیم. مشکی درحال حاضر به اندازه کافی پایدار است.

مشکی و اسکلتون تفاوت‌های بسیاری دارند. اگرچه مشکی از اسکلتون مشتق شده است، ولی بسیار کامل‌تر از پروژه مادر خود می‌باشد. کافیست به سایت اسکلتون نگاه کنید. مقدار زیادی از کدهای درون وب‌سایت متعلق به اسکلتون نیست و فایل‌های جدای CSS نیز وجود دارند. اما این سایت به طور خالص از مشکی استفاده می‌کند، و از یک فایل custom-rtl.css برای شخصی‌سازی بهره می‌برد.

شروع به کار

مشکی از یک ساختار ثابت، برای کاهش دردسرهای مربوط به کلاس‌ها و idها استفاده می‌نماید. برای همین، کافیست تا از همین ساختار برای تمامی برنامه‌هایتان استفاده کنید. نگران نباشید، این ساختار بسیار ابتدایی و پایه می‌باشد و شما را به هیچ عنوان محدود نمی‌کند.

برای شروع می‌توانید سورس کد قالب ابتدایی را بررسی کنید.

ابتدا، یک div که شامل کلاس sidenav است را بلافاصله بعد از شروع تگ body بسازید. لینک‌های کشو در اینجا سکونت خواهند داشت. سپس، یک div دیگر بعد از div کشو بسازید، که شامل کلاس content باشد. تمامی مطالب اصلی شما باید درون این div قرار بگیرد. اجزای این صفحه را با مرورگر خود مشاهده کنید تا ساختار دقیق را متوجه شوید. کد زیر هم نمونه‌ای از این ساختار است:

          
          
<!DOCTYPE html>
<html>
  <head>
    <title>مشکی</title>
    <meta charset="UTF-8">
    <!-- تا صفحه قابل مشاهده در موبایل باشد -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- OpenSans اضافه کردن فونت -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    
    <!-- اضافه کردن فایلهای مشکی -->
    <link rel="stylesheet" type="text/css" href="dist/css/meshki.min.css">
    <script type="text/javascript" src="dist/js/meshki.min.js"></script>
    
    <!-- نسخه فارسی مشکی باید بعد از مشکی اصلی اضافه شود -->
    <link rel="stylesheet" type="text/css" href="dist/plugins/meshki-rtl.min.css">
  </head>
  <body>
    <div class="sidenav">
      <!-- لینک‌های کشو اینجا هستند -->
    </div>
    
    <div class="container">
      <!-- این منوی شماست -->
      <nav>
        <ul>
          <li><a class="logo" href="javascript:void(0)">وب‌سایت من</a></li>
        </ul>
      </nav>
    
      <!-- مطالب صفحه در اینجا قرار میگیرد -->
      <div class="content">
        <h3>به وب‌سایت من خوش‌آمدید!</h3>
        <p>این یک پاراگراف نمونه است.</p>
      </div>
    
      <!-- و در آخر، پابرگ زیبای شما -->
      <footer>
        <div class="row">
          <div class="six col">
            <p>یک متن در پابرگ</p>
          </div>
        </div>
      </footer>
    </div>
  
  </body>
</html>

شکل بالا ساختار توصیه شده برای ساختن برنامه با مشکی را تشریح می‌کند.
واضح است که استفاده از کشو، منو و پابرگ اختیاری است.

اجزا

مشکی اجزای متنوع آماده برای استفاده دارد، که میتوانید هرجا که خواستید از آنها استفاده کنید. توجه داشته باشید که کوچک بودن و «کافی» بودن از اهداف اصلی ما هستند، و مشکی یک Framework برای ظاهر وب‌سایت نیست. بنابراین شاید نیاز باشد تا کتابخانه‌های کوچک دیگری نیز برای زیباسازی بیشتر اضافه کنید. با این حال، بیشتر اجزای پراستفاده در اختیار شما قرار گرفته‌اند و آزموده شده‌اند. نگران چیزی نباشید! ما این اطمینان را به شما می‌دهیم که به-روزترین کتابخانه در اختیار شما قرار گیرد تا تجربه‌ای زیبا با مشکی داشته باشید، و اجزای جدیدی را در آینده معرفی خواهیم کرد.

لیستی از اجزای قابل استفاده را برای شما آماده کرده‌ایم:

دکمه‌ها

شما به راحتی می‌توانید با استفاده از a و button و [input[type=submit و [input[type=reset و [input[type=button دکمه‌های مختلف و متنوعی را بسازید. 5 رنگ مختلف برای دکمه‌ها وجود دارد:

دکمه‌های عادی

ساده

دکمه‌های وسیع

دکمه‌های زیر نیاز به افزونه "extra-button-colors" دارند.

و غیره...

کدهای مربوطه از این قرار هستند:

            
            
<a class="button small">ساده</a>
<button class="blue medium">آبی</button>
<input type="submit" class="green large" value="سبز" />
<input type="reset" class="red medium" value="قرمز" />
<input type="button" class="orange small" value="نارنجی" />

<div class="button-couple">
  <button class="blue medium">موافقم</button>
  <button class="medium disabled">یا</button>
  <button class="red medium">مخالفم</button>
</div>

<button class="expand large">دکمه بزرگ وسیع</button>

کشو

ساختن کشو آسان است: کافیست یک div با کلاس sidenav دقیقا بعد از شروع تگ body بسازید. سپس از <a> ها برای ساخت لینک‌های کشو استفاده کنید. کاملا آسان و ساده است. از توابع جاوااسکریپت ()meshki.openNav و ()meshki.closeNav روی کلیک دکمه‌ها استفاده کنید تا کشو باز و بسته شود. همچنین می‌توانید با اضافه کردن کلاس push داستان را جذاب‌تر کنید! مثال زیر را در نظر بگیرید:

          
          
<body>
<div class="sidenav push">
  <!-- از پرش به بالای صفحه جلوگیری می‌کند javascript:void(0) توجه کنید که تابع -->
  <a href="javascript:void(0)" class="sidenav-close-button" onclick="meshki.closeSidenav()">&times;</a>
  <a href="">خانه</a>
  <a href="https://github.com/Borderliner/Meshki">گیتهاب</a>
  <a href="https://github.com/Borderliner/Meshki/blob/master/CHANGELOG.md">اخبار</a>
  <a href="https://github.com/Borderliner/Meshki/blob/master/README.md">درباره مشکی</a>
  <hr>
  <a href="javascript:void(0)" disabled>اشتراک گذاری در:</a>
</div>

منو

مشکی همراه با یک منوی زیبا در خدمت شماست! بعد از شروع div.content یک <"div class="nav> یا <nav> بسازید، و درون آن یک <ul> قرار دهید. حال به ازای هر <li><a></a></li> درون <ul>، یک دکمه به منوی شما اضافه می‌شود. همچنین می‌توانید از کلاس fixed برروی منوی خود استفاده کنید تا منوی شما به بالای صفحه بچسبد.

          
          
<nav class="fixed">
  <ul>
    <!-- از پرش به بالای صفحه جلوگیری می‌کند javascript:void(0) توجه کنید که تابع -->
    <li><a class="logo" href="javascript:void(0)" onclick="meshki.openNav()">مشکی</a></li>
    <li><a href="https://github.com/Borderliner/Meshki/releases">اخبار</a></li>
    <li><a href="https://github.com/Borderliner/Meshki">گیتهاب</a></li>
    
    <!-- کشوها در منو -->
    <li class="nav-dropdown">
      <a href="javascript:void(0)" class="nav-dropdown-button">عنوان</a>
      <div class="nav-dropdown-content">
        <a href="#">زیر شاخه 1</a>
        <a href="#">زیر شاخه 2</a>
        <a href="#">زیر شاخه 3</a>
      </div>
    </li>
  </ul>
</nav>

صفحه‌بندی

صفحه‌بندی گرید

هر صفحه از 12 ستون شناور، با حداکثر عرض 960 پیکسل ساخته شده است، که با کوچک‌تر کردن صفحه مرورگر یا دستگاه شما، این ستون ها کوچک‌تر می‌شوند. حداکثر عرض نیز با یک خط CSS قابل تغییر و شخصی سازی می‌باشد، و تمامی ستون‌ها منطبق بر حداکثر عرض جدید خواهند بود. طریقه استفاده از سیستم صفحه‌بندی مشکی بسیار آسان است. همین حالا صفحه مرورگر خود را کوچکتر کنید تا متوجه تغییرات شوید!

نکته: ستون ها باید اولین اجزا بعد از div.row باشند. این بسیار حائز اهمیت است.

یک

یازده

دو

ده

سه

نه

چهار

هشت

پنج

هفت

شش

هفت

پنج

هشت

چهار

نه

سه

ده

دو

یازده

یک

بدون انحراف

شش

با انحراف 1/6

چهار

با انحراف 1/3

دو

با انحراف 1/2

کد زیر یک نمونه کد برای سیستم صفحه گرید مشکی است:

            
            
<div class="row">
  <div class="one col">
    با عرض یک ستون div یک
  </div>
  <div class="eleven col">
    با عرض یازده ستون div یک
  </div>
</div>

<div class="row">
  <div class="one-third col">
    با عرض یک سوم کل صفحه div یک
  </div>
  <div class="two-thirds col">
    با عرض دو سوم کل صفحه div یک
  </div>
</div>

<div class="row">
  <div class="one-half col">
    با عرض نصف کل صفحه div یک
  </div>
  <div class="one-half col">
    با عرض نصف بقیه کل صفحه div یک
  </div>
</div>

<div class="row">
  <div class="six offset-by-two col">
    <!-- یک ستون 6 عرضی را به اندازه 2 ستون منحرف می‌کند -->
  </div>
  <div class="two col">
    <!-- بقیه صفحه -->
  </div>
</div>

صفحه‌بندی فلِکس‌باکس (جدید)

فلِکس‌باکس یک سیستم صفحه‌بندی تک بُعدی برای مرتب کردن اجزا در یک سطر یا ستون است. اجزا با توجه به فضای باقی مانده، خود را بزرگ یا کوچک می‌کنند تا جا شوندx.

شما می‌توانید تمام ویژگی‌های یک صفحه‌ی فلِکس‌باکس را ببینید.

فلِکس‌باکس افقی

فلکس یک

فلکس دو

فلکس ۳

فلِکس‌باکس عمودی

یک

دو

سه

            
            
<!-- Horizontal Flexbox -->
<div class="flexbox row">
  <div class="flex one">
    A div with one unit of flex expansion
  </div>
  <div class="flex three">
    A div with three unit of flex expansion
  </div>
</div>

<!-- Vertical Flexbox -->
<div class="flexbox col">
  <div>
    A vertical flex div
  </div>
  <div>
    The second vertical flex div
  </div>
</div>

ویژگی‌های عمومی (جدید)

برای راحتی کار شما، تعدادی از صفت‌ها و ویژگی‌های صفحه‌بندی CSS را برای شما محیا کرده ایم که می‌توانید در این قسمت مشاهده کنید.

          
          
.block {
  display: block;
}
.invisible {
  visibility: hidden !important;
}
.relative {
  position: relative;
}
.fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.scroll {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

فرم‌ها

مشکی اجزای فرم مختص به خود را دارد، که همانند بقیه اجزای مشکی، زیبا و خیره کننده هستند. نمونه‌هایی را از این فرم‌ها در زیر مشاهده می‌کنید:

نام کاربری:

رمز عبور:

پست الکترونیکی:

مرد زن سایر موارد

قوانین سرویس‌دهی را مطالعه نمودم. مایل هستم از این سایت خبرنامه دریافت کنم.

کلید ساده

کلید اصلی

کلید موفقیت

کلید اخطار

کلید خطا

بودجه: 0 $

100 $

نمای کلی نام: والتر
نام خانوادگی: وایت
سن: 50
مکان: آلباکرکی، نیو مکزیکو

برای درک بهتر، از مثال‌های زیر استفاده کنید:

            
            
<form>
  <!-- ورودی‌های متن -->
  <div class="row">
    <div class="six col">
      <label for="user1">نام کاربری:</label>
      <input id="user1" class="expand" type="text" name="user1" placeholder="نام کاربری خود را وارد کنید">
    </div>
    <div class="six col">
      <label for="pass1">رمز عبور:</label>
      <input id="pass1" class="expand" type="password" name="pass1">
    </div>
  </div>

  <!-- ورودی‌های متن غیرفعال -->
  <div class="row">
    <div class="twelve col">
      <label for="dis-email1">پست الکترونیکی:</label>
      <input id="dis-email1" class="expand" type="email" name="dis-email1" value="me@borderliner.ir" disabled>
    </div>
  </div>

  <!-- ناحیه متن -->
  <div class="row">
    <div class="twelve col">
      <textarea class="expand">این یک نمونه است <textarea> element.</textarea>
    </div>
  </div>

  <!--فرم کشویی -->
  <div class="row">
    <div class="six col">
      <select class="expand">
        <option selected disabled hidden>کشور خود را انتخاب کنید:</option>
        <option value="ir">ایران</option>
        <option value="us">آمریکا</option>
        <option value="ca">کانادا</option>
        <option value="de">آلمان</option>
        <option value="jp">ژاپن</option>
      </select>
    </div>
  </div>

  <!--چک‌باکس‌ها و دکمه‌های رادیویی -->
  <div class="row">
    <div class="six col">
      <input id="rad-male" type="radio" name="gender" value="male">
      <label for="rad-male" class="radio">مرد</label>
      <input id="rad-female" type="radio" name="gender" value="female">
      <label for="rad-female" class="radio">زن</label>
      <input id="rad-other" type="radio" name="gender" value="other">
      <label for="rad-other" class="radio">سایر</label>
    </div>
    <div class="six col">
      <input id="chk-eula" type="checkbox" name="chk-eula">
      <label for="chk-eula" class="checkbox">قوانین سرویس‌دهی را مطالعه نمودم.</label>
      <input id="chk-news" type="checkbox" name="chk-news">
      <label for="chk-news" class="checkbox">مایل هستم از این سایت خبرنامه دریافت کنم.</label>
    </div>
  </div>

  <!-- مثالی از یک لغزنده -->
  <div class="row">
    <input class="expand" type="range" name="percent" min="0" max="100" step="1" value="0">
  </div>

  <!-- Fieldset یک نمونه -->
  <fieldset>
    <legend>نمای کلی</legend>
    <span>نام: والتر</span>
    <span>نام خانوادگی: وایت</span>
    <span>سن: 50</span>
    <span>مکان: آلباکرکی، نیو مکزیکو</span>
  </fieldset>
</form>

نگارش

فونت‌ها تماما از طریق rem تنظیم می‌شوند، بنابراین تمامی سایز نوشته‌ها در صفحه به صورت نسبی قابل تنظیم هستند. مشکی هیچگاه فونت‌ها را بدون اجازه دستکاری نمی‌کند. تمامی اندازه‌ها بر مبنای 10 هستند، یعنی یک <h1> با سایز فونت 5.0rem به معنای 50 پیکسل است.

مشکی از فونت وزیر متن برای زبان فارسی و از Open Sans برای زبان انگلیسی استفاده می‌نماید. مشکی این فونت‌هارا به شما تحمیل نمی‌کند. به سادگی می‌توانید فونت‌های مورد نظر خود را جایگزین این فونت‌ها کنید، اما برای داشتن بهترین نگارش، این دو فونت را به شما توصیه می‌کنیم. سایز فونت پیشفرض 1.5rem (یعنی 15 پیکسل)، و فاصله خطوط از هم 1.6 است. بدیهیست که استفاده از انواعی مانند لینک، درشت، تاکید و زیرخط ممکن است.

سر برگ `h1` 50rem

سر برگ `h2` 42rem

سر برگ `h3` 36rem

سر برگ `h4` 30rem

سر برگ `h5` 24rem

سر برگ `h6` 15rem

کدها

شکل‌دهی به کدها در مشکی کار آسانیست: هر چیزی که درون <code> قرار بگیرد، این شکلی می‌شود. همچنین می‌توانید از کلاس filled استفاده کنید. برای قطعه کد‌ها، تگ <code> را درون یک تگ <pre> قرار دهید.

توجه داشته باشید که برای قطعه کدهای دارای کلاس filled، این کلاس باید به <pre> اضافه شود، نه به <code>.

نکته مهم دیگر اینکه مشکی درحالت عادی، کدها را همانند این صفحه رنگی نمیکند. برای اینکار از Prism استفاده نمایید.

            
<code>npm install meshki</code>

<pre>
  <code>
  .some-class {
    background-color: red;
  }
  </code>
</pre>

            
<code class="filled">bower install meshki</code>

<pre class="filled">
  <code>
  (function(
    console.log('Hello world!');
  ))();
  </code>
</pre>

جدول‌ها

حتما سعی کنید از ساختار صحیح جدول برای ساخت آنها استفاده کنید. یعنی جداول شما باید دارای <thead> و <tbody> باشد.

برای آراستن جداول خود، از کلاسهای زیر استفاده کنید:

hoverable : باعث می‌شود که وقتی با ماوس روی سطرهای جدول میروید، آن سطر پررنگ شود.
striped : جدول شما را راه‌راه می‌کند (به استثنای نام ستون‌ها)

تغییر شکل:

نام	سن	جنسیت	مکان
محمدرضا حاجیانپور	23	مرد	ایران
کارل جانسون	48	مرد	لس آنجلس
مَلنا مورگان	25	زن	فلوریدا
هری ترومن	88	مرد	میسوری

پابرگ

مشکی از یک پابرگ ساده برای استفاده در صفحات وب بهره‌مند است. برای اینکار، از <footer> استفاده کنید (یا از div.footer برای مرورگرهایی که از footer پشتیبانی نمیکنند). همچنین میتوانید از کلاس compact برای داشتن پابرگ های فشرده‌تر استفاده کنید.

توجه کنید که پابرگ‌های مشکی، سایز مشخصی ندارند و متناسب با حجم متن، بزرگتر می‌شوند.

          
          
<footer>
  <div class="row">
    <div class="six col">
      <p>ساخته شده توسط محمدرضا حاجیانپور</p>
    </div>
    <div class="six col text-center">
      <p>2024، Apache-2.0 تحت لیسانس</p>
    </div>
  </div>
</footer>

سایز صفحه

مشکی از اندازه‌های ثابتی برای صفحه‌بندی خود استفاده می‌کند، اما برای راحتی شما، این سایزها را برای شما لیست کرده‌ایم تا بتوانید بهتر برای دستگاه‌های مختلف برنامه‌نویسی کنید. اندازه‌های مورد استفاده در مشکی از Twitter Bootstrap گرفته شده‌اند تا بیشترین هماهنگی را با سایر کتابخانه‌ها به همراه آورد. اولویت این اندازه‌ها با موبایل است (Mobile-First)، یعنی حداقل عرض را تنظیم می‌کند. از این روش برای ساخت سیستم صفحه‌بندی مشکی نیز استفاده شده است و بهترین راه برای نظم‌دهی به کدهای CSS است. طریقه کار این است که اولیت به موبایل‌ها داده شده است تا نیازی نباشد کدهای بسیار زیاد مربوط به دسکتاپ، روی موبایل بارگذاری شود. اگر نیاز به صفحات بزرگ بود، مشکی کدهای جدید را اضافه می‌نماید. این سایز‌ها از قرار زیر هستند:

دسکتاپ باکیفیت: 1200 پیکسل
دسکتاپ: 992 پیکسل
تبلت: 768 پیکسل

فبلت: 544 پیکسل
موبایل: 400 پیکسل

            
/* اندازه‌ها با اولویت موبایل */

/* بزرگتر از موبایل */
@media (min-width: 400px) {}

/* بزرگتر از فبلت */
@media (min-width: 544px) {}

/* بزرگتر از تبلت */
@media (min-width: 768px) {}

/* بزرگتر از دسکتاپ */
@media (min-width: 992px) {}

/* بزرگتر از دسکتاپ HD */
@media (min-width: 1200px) {}

ابزارهای جانبی

مشکی با بهره‌گیری از کلاسهای جانبی، از نوشتن کدهای اضافی CSS جلوگیری می‌کند. شما می‌توانید از کلاس‌های زیر به راحتی در پروژه‌های خود استفاده کنید.

          
/* گسترش دادن یک المان */
.expand {
  width: 100%;
  box-sizing: border-box;
}

/* باعث می‌شود تا اجزا از محدوده‌شان خارج نشوند. برای عکسهای داخل ستون انتخاب مناسبی است. */
.responsive {
  max-width: 100%;
  box-sizing: border-box;
}

/* (left|right) شناور کردن یک جزء به دو طرف */
.float-left {
  float: left !important;
}

/* قرار دادن یک جزء در مرکز صفحه */
.centerize {
  margin-left: auto;
  margin-right: auto;
}

/* (left|center|right) قرار دادن یک متن در هر طرف صفحه */
.text-center {
  text-align: center;
}

/* خط عمودی */
.vertical-line {
  border-left: 1px solid #E1E1E1;
}

/* جزء مورد نظر را در موبایل و فبلت پنهان می‌کند */
@media (max-width: 544px) {
  .hide-on-mobile {
    display: none;
  }
}

/* اجزا را از تبلت‌ها پنهان می‌کند */
@media (max-width: 768px) {
  .hide-on-tablet {
    display: none;
  }
}

/* اجزا را از دسکتاپ‌ها پنهان می‌کند */
@media (min-width: 768px) {
  .hide-on-desktop {
    display: none;
  }
}

/* اجزا را در دستگاه‌هایی غیر از موبایل و فبلت پنهان می‌کند */
@media (min-width: 544px) {
  .hide-on-non-mobile {
    display: none;
  }
}

[افزونه] دکمه‌های رنگی بیشتر

مشکی نسخه v1.5.0 و به بالا، دکمه‌های رنگی بیشتری را در اختیار شما قرار میدهد. کافیست کد زیر را به قسمت <head> صفحه‌ی خود اضافه کنید تا بتوانید از این دکمه‌های رنگی بهره مند شوید.

            
            
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@3.0.0/dist/plugins/meshki-extra-button-colors.min.css">

دکمه‌های رنگی که به عنوان افزونه همراه مشکی منتشر می‌شود، شامل دکمه‌های زیر هستند:

[افزونه] حالت روشن

در نسخه ۳ مشکی، قابلیت پوسته‌ی روشن اضافه شده است. تنها کاری که باید بکنید این است که تگ <link> زیر را به قسمت سربرگ صفحه خود اضافه کرده و کلاس "light-mode" را به تگ <html> خود بیافزایید.

            
            
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@3.0.0/dist/plugins/meshki-light-mode.min.css">

نکات مهم

مشکی نسخه ۳ تغییراتی را اعمال کرده که باعث می‌شود با نسخه‌های قبلی مشکی کاملا سازگار نباشد، هرچند نسخه‌ی جدید تا ۸۰٪ با نسخه‌ی ۲ سازگار است. برای مطلع شدن از تغییرات نسخه‌های مشکی، حتما Changelog را مطالعه کنید تا اشتباه از مشکی استفاده نکنید.
مشکی نسخه ۲ تغییراتی را اعمال کرده که باعث می‌شود با نسخه‌های قبلی مشکی سازگار نباشد. برای مطلع شدن از تغییرات نسخه‌های مشکی، حتما Changelog را مطالعه کنید تا اشتباه از مشکی استفاده نکنید.

این صفحه شامل...

فونت بی‌نظیر font-awesome برای نمایش اشکال مختلف است. به نظر من بهترین فونت-آیکون موجود است. حتما به وبسایت این پروژه سری بزنید!
Prism بی‌رقیب برای رنگی کردن کدهای این صفحه است.

مشکی

زیبا. مشکی. واکنش‌گرا.

سادگی و مینیمالیسم

دوست‌دارِ چشم

حرفه‌ای

سریع مثل موشک

بدون پیش‌نیاز

پایدار

مشکی چیست؟

چرا مشکی؟

شروع به کار

اجزا

دکمه‌ها

کشو

منو

صفحه‌بندی

صفحه‌بندی گرید

صفحه‌بندی فلِکس‌باکس (جدید)

ویژگی‌های عمومی (جدید)

فرم‌ها

نگارش

سر برگ h1 50rem

سر برگ h2 42rem

سر برگ h3 36rem

سر برگ h4 30rem

سر برگ h5 24rem

سر برگ h6 15rem

کدها

جدول‌ها

پابرگ

سایز صفحه

ابزارهای جانبی

[افزونه] دکمه‌های رنگی بیشتر

[افزونه] حالت روشن

نکات مهم

این صفحه شامل...

از حمایت شما متشکریم!

سر برگ `h1` 50rem

سر برگ `h2` 42rem

سر برگ `h3` 36rem

سر برگ `h4` 30rem

سر برگ `h5` 24rem

سر برگ `h6` 15rem