Milligram

میلی‌گرم

یک فریم‌ورک مینی‌مال CSS

شروع کنیم
چرا این عالیه؟

میلی‌گرم خیلی سریع یک طرح مینیمال css را برای نقطه‌ی شروع آماده می‌کند. فقط ۲ کیلوبایت! (gzipped)

میلی‌گرم برای عمل‌کرد بهتر و بهره‌وری بیشتر طراحی شده تا نتیجه‌ی کدی تمیز و مرتب باشد.

آیا می‌خواهید به این پروژه ستاره بدهید یا اینکه مرا دنبال کنید؟ پس این کار را بکنید!

شروع کنیم.

ابتدا میلی‌گرم را دانلود کنید.

دانلود میلی‌گرم

بعد فایل دانلود‌شده را extract کنید تا در فولدر dist فایل اصلی (milligram-rtl.css) و کوچک‌شده‌ی فایل اصلی (milligram-rtl.min.css) را ببینید. پیشنهاد می‌کنیم از فایل فشرده‌شده استفاده کنید.

milligram-rtl/
├── demo/
│   └── index.html
├── dist/
│   ├── fonts/
│   │   ├── Samim.eot
│   │   ├── Samim.ttf
│   │   ├── Samim.woff
│   │   ├── Samim-Bold.eot
│   │   ├── Samim-Bold.ttf
│   │   ├── Samim-Bold.woff
│   ├── milligram-rtl.css
│   └── milligram-rtl.min.css
├── license
└── readme.md

نحوه‌ی استفاده

بعد از اینکه میلی‌گرم را دانلود کردید، این تگ‌ها را در هدر پروژه‌تان اصافه کنید.

توجه داشته‌باشید که آدرس تگ سوم باید به فایل اصلی میلی‌گرم اشاره کند.

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










تایپوگرافی

CSS3 چند واحد جدید معرفی کرد که یکی از این واحد‌ها rem بود که مخفف "root em" است. واحد rem مربوط می‌شود به اِلِمنت ریشه که همان <html> باشد. این به این معنی هست که ما می‌توانیم یک اندازه برای فونت المنت ریشه تعریف کنیم و همه‌ی واحد های rem را هم درصدی از آن تعریف کنیم که ما در اینجا همین کار را کرده ایم پس در نتیجه اگر شما فونت <html> را تغییر بدهید اندازه‌ی همه اجزا به همان اندازه تغییر می‌کند.

این تایپوگرافی دارای font-size هست که روی 1.6rem = 16px تنظیم شده و line-height که روی 1.6 = 24px تنظیم شده.

همچنین ما از فونت صمیم برای متون فارسی و از فونت Open Sans برای متون انگلیسی استفاده کردیم.

مثال

این یک پاراگراف است. ممکن است گاهی میان پاراگراف English texts باشد چنانچه می‌بینید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی...

لینک | متن کــــــج | متن کوچـــــک | متن درشـــت | متن زیر‌خط‌کشیده

<h1> عنوان (5.0rem = 50px)

<h2> عنوان (4.2rem = 42px)

<h3> عنوان (3.6rem = 36px)

<h4> عنوان (3.0rem = 30px)

<h5> عنوان (2.4rem = 24px)
<h6> عنوان (1.5rem = 15px)

The base type is 1.6rem (16px) over 1.6 line height (24px)

لینک متن کج متن کوچک متن درشت متن زیر‌خط‌کشیده

عنوان

عنوان

عنوان

عنوان

عنوان
عنوان
نقل‌قول‌ها

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

امام علی (علیه‌السلام) می‌فرمایند: هر روزى كه در آن خداوند نافرمانى نشود، عيد است. [نهج‌البلاغه، حکمت ۴۲۸]

امام علی (علیه‌السلام) می‌فرمایند: هر روزى كه در آن خداوند نافرمانى نشود، عيد است. [نهج‌البلاغه، حکمت ۴۲۸]

دکمه‌ها

دکمه‌ها در میلی‌گرم به ۳ سبک هستند؛ اِلِمنت <button> بدون هیچ class خاصی کاملاً دارای رنگ هست، امّا با کِلَس button-outline بدون رنگ و در اطراف خود یک خط دارد و با کِلَس button-clear کاملاً ساده است.

دکمه‌ی پیش‌فرض

دکمه‌ی پیش‌فرض







فهرست‌ها

میلی‌گرم دارای ۳ نوع فهرست است؛ نوع اول که از <ul> استفاده می‌کند با یک دایره موارد را نشانه‌گذاری می‌کند. نوع دوم که از <ol> استفاده می‌کند موارد را با اعداد نشانه‌گذاری میکند. نوع سوم هم که از <ol> استفاده می‌کند نشانه‌گذاری نمی‌کند بلکه فقط فاصله می‌اندازد.

  • مورد اول
  • مورد دوم
  1. مورد اول
  2. مورد دوم
مورد اول
مورد دوم

  • مورد اول
  • مورد دوم
  1. مورد اول
  2. مورد دوم
مورد اول
مورد دوم
فرم‌ها
جدول‌ها

به راحتی می‌توانید با استفاده از <thead> و <tbody> یک جدول زیبا بسازید.

نام سنّ قد موقعیت
الف ۲۷ ۱.۹۱ ناکجاآباد
ب ۲۵ ۲.۰۱ ناکجاویران
نام سنّ قد موقعیت
الف ۲۷ ۱.۹۱ ناکجاآباد
ب ۲۵ ۲.۰۱ ناکجاویران
گرید‌ها

گرید یک سیستم است که بیشترین عرض آن 70.0rem است و با کم شدن عرض مرورگر یا دستگاه عرض آن هم کم می‌شود. می‌توان «بیشترین اندازه» را تغییر داد و بر اساس همین تغییر ستون‌های زیرمجموعه‌اش هم تغییر می‌کند. میلی‌گرم بر خلاف بیشتر فریم‌ورک‌ها از CSS Flexible Box Layout Module standard برای این کار استفاده می‌کند. مزیت این، سادگیش است و این که دردسر های روش‌های دیگر را ندارد.

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

.column
.column
.column
.column
.column
.column-50.column-offset-25

.column
.column
.column
.column
.column
.column column-50 column-offset-25
کدها

این بخش‌ها یک تکه کد را نمایش می‌دهند. می‌توانید با <code> این کار را انجام بدهید امّا اگر یک بلوک می‌خواهید <code> را درون یک <pre> قرار دهید.

مثال
این یک نکه کد است: .milligram { color:#9b4dca; }
.milligram {
  color: #9b4dca;
}
.milligram { color:#9b4dca; }

.milligram {
  color: #9b4dca;
}
موارد کاربردی

میلی‌گرم یک سری موارد پرکابرد داره که به شما کمک می‌کنه.




نکات

نکات و تکنیک‌ها

در آینده تکمیل می‌شود.

/* Mobile First Media Queries */

/* Base style */
{ ... }

/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }

/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }

/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }
/* Extending The Inheritances */

/* Applying color variation */
.button-black {
  background-color: black;
  border-color: black;
}
.button-black.button-outline {
  color: black;
}
.button-black.button-clear {
  color: black;
}

/* Applying size variation */
.button-small {
  font-size: .8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 1.5rem;
}

.button-large {
  font-size: 1.4rem;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2rem;
}
پشتیبانی مرورگرها

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

مشارکت در پروژه (contributing)

می‌خواهید در این پروژه همکاری کنید و آن را توسعه دهید؟ پس پروژه را fork کنید و آن را تغییر دهید.