آموزش ساخت سیستم گرید Flexbox با Less

 ساختن سیستم گرید Flexbox با Less

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

گریدی که ما امروز در اینجا می‌سازیم، دارای مشخصات زیر است: 

  1. breakpoint های چندگانه، برای واکنش گرایی و انعطاف پذیری کامل در اندازه‌های مختلف صفحه نمایش.
  2. امکان تنظیم هر سطر به عنوان ستون یا یک سطر با استفاده از flex-direction (جهتی که عناصر طراحی بر طبق آن چیده و مرتب می‌شوند).
  3. تعداد ستون‌های قابل انعطاف (flexible)، به طور پیش فرض ما یک گرید با 12 ستون ایجاد خواهیم کرد اما شما می‌توانید آن را در هر زمان و در فایل‌های Less تغییر دهید.
  4. کلاس‌های Responsive offset، برای اینکه به هر کسی که از سیستم گرید استفاده می‌کند، بسته به نقطه شکست که مرورگر در آن قرار دارد، اجازه دهد ستون‌ها را اضافه کند.
  5. کلاس‌های پنهان برای هر یک از این نقاط شکست (breakpoints).
  6. فضا‌های اضافی قابل تنظیم (Configurable gutters) و عرض کانتینر (container width).
  7. کلاس‌های کمکی (Helper) برای کمک به موارد مختلفی مانند تراز کردن (alignment).

 با استفاده از این نکات، شما می‌توانید سیستم گریدی ایجاد کنید که همه بتوانند در پروژه‌های خود از آن استفاده کند. در این مقاله، ما از Less برای ایجاد سیستم گرید خود استفاده می‌کنیم و به همین دلیل، شما نیاز به نصب Node  و Less دارید.

برای نصب Node می‌توانید به صفحه دانلود آن بروید و آن را نصب کنید یا اگر brew را به صورت نصب‌ شده دارید، می‌توانید فقط ترمینال را باز کرده و آن را با brew نصب کنید:  

ساختن سیستم گرید Flexbox با Less

پس از نصب node، می‌توانید Less با npm (مدیریت بسته که دارای node است) را نصب کنید.

برای نصب Less head روی ترمینال به صورت زیر عمل می‌کنیم:   

ساختن سیستم گرید Flexbox با Less

چرا از Less استفاده می‌کنیم؟

Less از قابلیت‌های حلقه زنی بسیار خوبی برخوردار است که برای ایجاد سیستم گرید و هر گونه عملکردی که به حلقه زدن نیاز داشته باشد کاملاً مناسب است که ما به آن خواهیم پرداخت.

شروع به کار با سیستم گرید

در این آموزش، ما ساختار فولدر زیر را خواهیم داشت:   

ساختن سیستم گرید Flexbox با Less

ما یک فولدر dist نیز خواهیم داشت که در آن Less را در یک فایل CSS کامپایل می‌کنیم. برای این کار، از gulp استفاده می‌کنیم، برای نصب، gulp  و gulp-less را اجرا کنید:

ساختن سیستم گرید Flexbox با Less

پس از نصب این کار، نیاز دارید یک   Gulpfile  ( gulpfile.js ) را ایجاد کرده و یک Less task نیز  مانند نمونه زیر ایجاد کنید: 

ساختن سیستم گرید Flexbox با Less

با این کار Gulp task را برای کامپایل کردن فایل‌های Less در CSS اجرا می‌کند. انتقال به فایل flexy.less و بارگذاری تمام فایل‌های دیگر Less کاری است که باید انجام دهیم:    

ساختن سیستم گرید Flexbox با Less

به محض اینکه این فایل‌ها را ایجاد کردید، می‌توانید دستور زیر را به سادگی اجرا کنید: 

ساختن سیستم گرید Flexbox با Less

سپس فایل‌های ما کامپایل می‌شوند، البته در حال حاضر یک فایل خالی ایجاد می‌شود اما به زودی خاصیت flexbox goodness) flexbox) را نیز در این فایل flexy.css ایجاد خواهیم کرد. اکنون که تمام تنظیمات انجام شده است، ما می‌توانیم گرید خود را شروع کنیم و در واقع نوشتن برخی از خصوصیات flexbox را شروع خواهیم کرد.

نامگذاری سیستم گرید

سپس باید تصمیم بگیریم که چه چیزی را برای کلاس‌ها در گرید فراخوانی ‌کنیم و البته می‌توانید این کار را در گرید خود تغییر دهید اما ما تصمیم گرفتیم از ساده‌ترین روش ممکن استفاده کنیم: 

ساختن سیستم گرید Flexbox با Less

این دو سطر به ما فضای زیادی برای بازی کردن با سیستم گرید را می‌دهد و تمام رفتارهای مختلفی را که می‌تواند داشته باشد را تست می‌کنیم. اولین کاری که می‌خواهیم انجام دهیم ایجاد کانتینر و کلاس‌های سطر است و فراموش نمی‌کنیم این سطر نیز می‌تواند یک ستون باشد. بنابراین، ما باید هر دو این امکانات را در نظر بگیریم ، بنابراین با در نظر گرفتن این مطلب می‌توانیم کدهای زیر را بنویسیم:   

ساختن سیستم گرید Flexbox با Less

همانطور که می‌بینید ما در اینجا دو متغیر داریم که می‌خواهیم شخصی که از این سیستم گرید استفاده می‌کند خود را شخصی سازی کند. بنابراین، بیایید با ایجاد متغیرهای پیش‌فرض در _vars.less شروع کنیم: 

ساختن سیستم گرید Flexbox با Less

با فرض از این ایده، کاربر می‌تواند عرض کانتینر خود را که همیشه با مرکز تراز می‌شود، کنترل کند و به دلیل تنظیم حاشیه می‌تواند اندازه gutter (فضای خالی) را نیز بسته به اینکه او چقدر می‌خواهد این فضای خالی سیستم گرید را به خود اختصاص دهد تنظیم کند.

ایجاد حلقه‌های خود (Creating our loops)

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

برای این کار، به یک حلقه نیاز داریم که یک آرگومان را می‌گیرد که ما آن را شمارنده (counter) می‌نامیم و این شمارنده تعداد ستون‌های سیستم گرید ما خواهد بود. آنچه این کار را انجام خواهد داد، حلقه کدی است که هنگام فراخوانی ما به او منتقل می‌کنیم. منظور ما این است که اگر ما یک طرح ۱۲ ستونی  داشته باشیم این کد ۱۲ بار اجرا خواهد شد و کاری که انجام خواهد داد، ایجاد نام‌های کلاس مورد نیاز و تنظیم عرض آن‌ها است.

کد مورد نیاز برای این موارد:  

ساختن سیستم گرید Flexbox با Less

حلقه انجام شده است اما ما هنوز باید آن را فراخوانی کنیم تا کلاس‌ها ایجاد شوند و برای این کار ابتدا متغیر دیگری را به فایل _vars.less   خود اضافه می‌کنیم: 

ساختن سیستم گرید Flexbox با Less

تنها کاری که برای انجام ستون‌های اصلی ما باید انجام دهیم این است که در واقع این حلقه را با شماره ستون پیش‌فرض خود فراخوانی کنیم:  

ساختن سیستم گرید Flexbox با Less

بیایید به این کد نگاهی بیندازیم:

اولین کاری که ما کردیم این است که تمام عناصری را که کلاس دارد و با col شروع می‌شود را انتخاب کنیم و استایل‌های پیش‌فرضی را که برای هر ستون اعمال می‌شود اضافه کنیم. پس از آن، حلقه generateCols  را فراخوانی می‌کنیم و آن را به @cols  منتقل کنید که در این حالت ۱۲ خواهد بود و این باعث ایجاد ۱۲ کلاس ما خواهد شد.

اگر در ضمن کدگذاری کرده‌اید، شما خواهید دید که ستون‌های ما کار می‌کنند و در مرورگر هستند، در زیر شما مشاهده خواهید کرد: 

 

ساختن سیستم گرید Flexbox با Less

ما کلاس‌های ستون خود را انجام داده‌ایم و اکنون برای این حلقه اصلی ما هنوز نیاز به تولید کلاس‌های offset خود داریم. بنابراین، بیایید فقط این خطوط را اضافه کنیم: 

ساختن سیستم گرید Flexbox با Less

 اگر شما کد را با اجرای gulp less   کامپایل کنید و index.html خود را باز کنید، چیزی شبیه به این را مشاهده خواهید کرد:

ساختن سیستم گرید Flexbox با Less

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

 مطالب بیشتر در لیداوب:

 برای یادگیری بیشتر مطالب طراحی سایت با ما در لیداوب همراه باشید.

 
برچسب ها