در چند ساله گذشته شاهد افزایش استفاده از فرم ورک های front-end بوده ایم.ای ابزارها مانند بوت استرپ به توسعه دهندگان و طراحان وب این امکان را میدهند که وبسایت و اپلیکیشن خود را سریعا طراحی کنند.در حقیقت این فریم ورکها تمامی نیازهای شما را میداند چیست و در قالب یک کتابخانه به شما ارائه میدهد.

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

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

معرفی inuitcss:

این فریم ورک بر اساس sass است و توسط هاری روبرت ایجاد شده است.زیبایی این فریم ورک این است که در واقع چیزی را نشان میدهد که شما آن را ایجاد کرده اید آن هم با کمترین تلاش!!این فریم ورک شامل مدلهای مستقل می باشد.در واقع این فریم ورک شامل کدهایی است که به ما اجازه میدهد بتوانیم به ساختارمان ربط دهیم و در واقع بلااستفاده نمانند.

علی رغم دیگر فریم ورکها، inuitcss عناصر زیادی از UI را تولید نمیکند.در واقع هنگامی که ما از بقیه فریم ورکها استفاده میکنیم، از عناصر موجود استفاده میکنیم و آنها را به شکلی که میخواهیم تغییر میدهیم ولی این فریم ورک چنین رویکردی ندارد و دست ما را در انتخاب طراحی باز گذاشته است.

نصب inuitcss

میتوانیم این فریم ورک را دانلود کنیم ولی یک راه ساده تر استفاده از Bower یا NPM است.Bower یا NPM بسته های مدیریتی هستند که پروژه های وابسته و غیر مستقل را برای شما مدیریت میکند.چون که اینها بر اساس node.js کار میکنند، شما نخست باید node.js را نصب کنید.

همچنین ما میتوانیم از Bower برای ایجاد تمامی وابستگی های نصب شده inuitcss استفاده کنیم.همچنین میتوانیم برای بهبود پروژه های موجود به کار ببریم.

نصب و استفاده از BOWER

پس از اینکه node.js را نصب کردید، یک صفحه دستوری باز کرده( صفحه که میخواهید در آن کد بزنید) و این را بنوسید:

npm install -g bower

با این تکه کد در حقیقت شما Bower را نصب کرده اید.حال اگر پروژه ای دارید میتوانید از bower برای اضافه کردن inuitcss استفاده کنید.نام فولدر خود را بنویسید و اجرا کنید:

bower init

این یک دایرکتوری Bower_component را برای شما ایجاد میکند.برای اضافه کردن مدلها از قطعه دستورزیر استفاده کنید:

bower install --save inuit-(module-name)

برای مثال برای اضافه کردن مدل لایه، از قطعه کد زیر استفاده میکنیم:

bower install --save inuit-layout

این باعث نصب مدل در دایرکتوری Bower_component میگردد.به عنوان جایگزین ما میتوانیم از کیت شروع برای ایجاد پروژه جدید یا اضافه کردن پروژه های موجود استفاده کنیم.

bower install --save inuit-starter-kit

که این باعث نصب عناصر اساسی میگردد.

اجرا و وارد کردن دستورات

پس از اجرای کیت شروع ما باید دستورات را وارد نماییم.در وارد دستورات اگر ما نیازمند متغیرهایی باشیم که قبلا وارد نشده باشند، Sass یک خطا را نشان میدهد.برای همین باید فایلها را از کیت شروع(starter kit) وارد شوند که وارد کردن فایلها به صورت زیر میباشد.

@import "bower_components/inuit-defaults/settings.defaults";

@import "bower_components/inuit-functions/tools.functions";

@import "bower_components/inuit-mixins/tools.mixins";

@import "bower_components/inuit-normalize/generic.normalize";

@import "bower_components/inuit-box-sizing/generic.box-sizing";

@import "bower_components/inuit-page/base.page";

به خاطر ماهیت مدلی inuitcss، قرار دادن دستورات در مکان صحیح خیلی مهم می باشد.

Setting: متغیرهای عمومی،side-wide setting، config

Tools: توابع side-wide

Generic:مجموعه قوانین دور از دسترس

Base:عناصر HTML غیر کلاس بندی شده

Objects:شی، انتزاعها و الگوهای طراحی

Components:UI

Trumps:کلاس های کمک کننده

عملکرد های اصلی

چونکه inuitcss به قطعه قطعه می باشد، چند مدل مورد نیاز میباشد.

نخستین مدل setting.default است که شامل مجموعه از ابزار مانند font-size و lint-height است که در قسمت دوم مدلها استفاده میشود.

tools.function شامل توابع کمکی است.این توابع برای ایجاد اندازه های گوناگون شی ها استفاده می شود.

اخرین مدل مورد نیاز tools.mixins میباشد که شامل اندازه بندی فونت در مدل ها براساس نوع استفاده می شود.

تغییر inuitcss

با اینکه این فریم ورک به صورت سفارشی میباشد اما ما نباید که کدهای اساسی و پایه آن را در طراحی سایت خودمان تغییر دهیم.ما باید فایلهای اوراید خودمان را تولید کنیم و تنظیمات و متغیر فریم ورک را خودمان انجام دهیم.

اگر میخواهیم font-size و غیره را از حالت پیشفرض تغییر دهیم،باید به صورت زیر قطعه کد را تغییر دهیم:

$inuit-base-font-size: 12px;

$inuit-base-line-height: 18px;

@import "bower_components/inuit-defaults/settings.defaults";

تمامی متغیرها را میتوان به صورت بالا تغییر داد.

مدلها و بخشها(عناصر)

هر متغیر مدل inuitcss به صورت پیشفرض غیر فعال می باشد.برای مثال inuitcss button object متغیرهای گوناگونی براساس اندازه دارد که به صورت پیشفرض غیرفعال می باشد.برای اینکه آنها را فعال کنید باید قطعه کد زیر قبل از دستور اصلی وارد نمایید:

$inuit-enable-btn--large: true;

@import "bower_components/inuit-buttons/objects.buttons";

در حقیقت باید این را بدانیم که در inuitcss چیزی فراتر از مورد انتظار یا بخشهای UI تولید نمی شود.البته توضیحات بالا به صورت کلی می باشد و اما کار کردن با این فریم ورک راحتتر از چیزی است که فکر میکنید.