آشنایی با فریم ورک های css

فریم‌ورک (Framework) چیست؟

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

 

انواع فریم‌ورک‌های CSS

Bootstrap

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

 

Less

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

 

 Sass

Sass زبان پیشرفته CSS، پایدار و قدرتمند است. Sass قدرت و ظرافت را به زبان اصلی اضافه می‌کند. Sass به شما این امکان را می‌دهد که از متغیرها، قوانین توافقی، مخلوط‌ها، واردات درون خطی و غیره بیشتر استفاده کنید. Sass کمک می‌کند تا استایل‌های بزرگ را به خوبی سازماندهی کنید و استایل‌های کوچک را به سرعت و به ویژه با کمک کتابخانه کوچک Compass دریافت کنید.

 

Semantic ui

یکی دیگر از فریم‌ورک‌های محبوب طراحی کاربری Semantic ui می‌باشد که شامل خصوصیات جالبی مانند تنظیم عناصر، انیمیشن‌های سه بعدی و ایجاد کامپوننت‌های مختلف UI است.
همچنین Semantic ui روی سادگی مفاهیم تمرکز کرده است که تا آنجا که ممکن است نام کلاس‌ها نزدیک به نحوه صحبت کردن یک شخص نام‌گذاری شده باشند.

 

Bulma

Bulma یکی دیگر از فریم‌ورک‌های محبو‌ب CSS است و ویژگی اصلی آن این است که اجزای آن تا حد زیادی به Flexbox وابسته است. این امر باعث می‌شود به یک چارچوپ مدرن تبدیل شود. Bulma تا حدودی، ترکیبی از Bootstrap و Semantic ui است اما ساده‌تر از آن‌ها!
حجم کلی این فریم‌ورک حدود ۲۱ کیلوبایت می‌باشد که در حال حاضر روی نسخه بتا منتشر شده است.

 

Foundation

فریم‌ورکی پیشرفته که با پردازنده قدرتمند sass ساخته شده است و دارای ویژگی‌های واکنش‌گرا می‌باشد که در ساخت طرح‌های مناسب برای موبایل استفاده می‌شود.
از Foundation می‌توان برای ایجاد ایمیل‌های HTML استفاده کرد. منظور از ایمیل‌های HTML، ایمیل‌هایی است که در محتوای آن از کدهای HTML استفاده می‌شود.

 

Animate.css

اولین کتابخانه‌ای که در سال های اخیر محبوبیت زیادی پیدا کرد Animate.css بود. این کتابخانه برای ساخت عناصر متحرک و انیمیشن در وب کاربرد دارد. همچنین این فریمورک بیشتر از ۵۰ افکت انیمیشنی را به شما ارائه می‌دهد. فریم‌ورک‌های مختلف زیادی در این زمینه وجود دارد که همگی یک کار را انجام می‌دهند، آن هم اضافه کردن یک یا چند انیمیشن به یک عنصر مشخص است.

برخی فریم‌ورک‌های مشابه دیگر از جمله woah.css وجود دارند که مطابق با سلیقه همه نمی‌باشند. همچنین از دیگر فریم‌ورک‌های در این زمینه می‌توان به CSSFX اشاره کرد. این فریمورک گزینه‌های بیشتری برای انیمیشن‌های سبک پلاگین و بازی دارد.

 

Skeleton

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

 

Pure.css

Pure.css فریم‌ورکی با حجم کمتر از ۴ کیلوبایت می‌باشد که توسط توسعه‌دهندگان وب‌سایت یاهو ساخته شده است. این فریم‌ورک تنها موارد پایه‌ای و الزامی را دارا می‌باشد که می‌توانید در کنار Bootstrap استفاده کنید.

 

Gumby

Gumby یک CSS فریم ورک بر مبنای گرید ۹۶۰ پیکسل است که انواع مختلفی از گرید ها با تعداد ستون های متنوع را ارایه می کند. این ویژگی Gumby باعث می شود که در هنگام طراحی انعطاف پذیری بسیار بالایی داشته باشد. Gumby با ارایه فایلهای ایجاد قالب آماده را در ابتدا برایتان آسان تر می کند.

 

Kube

یک CSS فریم ورک مناسب برای طراحی های پیشرفته است. بسیار تطبیق پذیر و دارای سیستم گرید کاملی است. این فریم ورک  typography بسیار زیبایی را ارایه می کند.

 

ResponsiveAeon

ResponsiveAeon فریم ورکی بسیار زیباست که از گرید سیستم CSS3 استفاده می کند. این فریم ورک دارای گرید واکنش گرا بر اساس Media Query  ، HTML 5و جاوا اسکریپت است.

 

YAML 4

یک CSS فریم ورک ماژولار است و طوری طراحی شده که بسیار انعطاف پذیر باشد. YAML 4 در بسیاری از مرورگرهای مدرن مانند Chrome, Firefox, Opera, Safari and Internet Explorer پشتیبانی می شود.

 

Toast

از میان فریم ورک های css می توان گفت یک فریم ورک CSS بسیار ساده است اما ساده ترین آنها نیست. در این فریم ورک از گرید واکنش گرا با ۱۲ ستون استفاده شده که در آن می توان افکت های ملایمی را به طراحی اعمال کرد. همچنین با وجود ویژگی box-sizing  شما می توانید لایه ها و حاشیه هایی را به گرید اضافه کنید بدون اینکه باعث ایجاد ناهماهنگی در  بخش های دیگر شوید.

 

Ingrid

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

۹۶۰ Grid System تلاشی برای ساده و موثر کردن طراحی وب است، این ویژگی ۹۶۰ Grid System ، با فراهم کردن اندازه های پرکاربرد بر اساس پهنای ۹۶۰ پیکسل میسر شده است. این فریم ورک به دو صورت ۱۲ و ۱۶ ستونه ارایه می شود و می توان از آنها بصورت جداگانه و یا بصورت لایه های پشت هم استفاده کرد.

 

Susy

Susy بر اساس سیستم CSS های Natalie Downe ایجاد شده است. شما می توانید از آن در هرجایی،اعم از سایت های استاتیک یا داینامیک، وردپرس، Django و هر جایی از آن استفاده کنید.

 

UIKIT

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

 

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

 

سپاس از همراهیتون

نظر