تصویر محمدعلی اکبری
معرفی Zen Grids: افزونه چیدمان واکنشگرا قدرت گرفته از Sass

Zen Grids یک افزونه برای Compass است. این افزونه امکان تعریف چیدمان‌های مختلف با ابعاد ثابت، متغیر و واکنشرا در فایل‌های Sass را فرآهم می‌کند.

نصب Zen grids

این افزونه برای نصب به Sass و Compass نیاز دارد. همچنین Sass و Compass نیز برای نصب به Ruby نیاز دارند. لذا گام های نصب به ترتیب زیر است.

گام اول: با مراجعه به آدرس rubyinstaller.org با توجه به سیستم عامل خود Ruby را نصب کنید.

گام دوم: Sass و Compass را نصب کنید.

** در محیط windows در صورت بروز مشکل CMD را به صورت Run as administrator اجرا کنید.

gem install sass
gem install compass

از صحت نصب آنها مطمئن شوید.

sass -v
compass -v

گام سوم: نصب افزونه Zen grids

gem install zen-grids

در صورت بروز مشکل فایل‌های gem مربوطه را از http://rubygems.org دانلود کرده و با استفاده از دستور زیر نصب کنید.

gem install --local zen-grids.gem

چند خط با Zen grids

ابتدا یک پروژه جدید با Compass میسازیم. سپس سعی می‌کنیم قدم به قدم چیدمان تصویر زیر را با کمک Zen grids ایجاد کنیم.

گام اول: ایجاد پروژه

ابتدا با دستور زیر پروژه را ایجاد می‌کنیم. سپس در مسیر پروزه قرار گرفته و با استفاده از دستور compass watch تغییرات پروزه را رصد می‌کنیم.

$ compass create first-zen
$ cd first-zen
$ compass watch

بعد از ایجاد پروژه در خروجی خط فرمان، تگ‌های مورد نیاز داخل <head> برای ایجاد فایل index.html از طرف Compass پیشنهاد می‌شود.

بنابر این در مسیر پروژه فایل index.html را با کدهای زیر می‌نویسیم.

<!DOCTYPE html>
<html>
  <head>
    <title>First Zen grids project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
    <!--[if IE]>
        <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <article class="content">
        Tha main content. We like semantic HTML ordering.
      </article>
      <aside class="aside-first">
        An aside.
      </aside>
      <aside class="aside-last">
        Another aside.
      </aside>
      <footer class="footer-first">
        A footer.
      </footer>
      <footer class="footer-last">
        Another footer.
      </footer>
    </div>
  </body>
</html>

گام دوم: پیاده سازی چیدمان

فایل sass/screen.scss را ویرایش کرده و کد‌های زیر را اضافه می‌کنیم.

@import "zen";

$zen-column-count: 7; // Set the total number of columns in the grid.
$zen-gutter-width: 10px; // Set the gutter size. A half-gutter is used on each side of each column.

.container {
 @include zen-grid-container; // Apply this mixin to the container.
}
.aside-first {
 @include zen-grid-item(2, 1); // Apply this mixin for each grid item in the container.
}
.content {
 @include zen-grid-item(4, 3); // Make this grid item span 4 columns. // Position this grid item in the 3rd column.
}
.aside-last {
 @include zen-grid-item(1, 7);
}
.footer-first {
 @include zen-clear(); // Apply this mixin to start a new row.
 @include zen-grid-item(3, 5);
}
.footer-last {
 @include zen-grid-item(4, 1);
}

 

دیدگاه‌ها

تصویر الهه عربیان

الهه عربیان (تایید نشده)

سلام
ممنون مطلب خیلی مفیدی بود

افزودن نظر جدید