ده قالب‌کاری (Framework) سبک CSS که باید آن‌ها را بشناسید

ده قالب‌کاری (Framework) سبک CSS که باید آن‌ها را بشناسید

توسعه‌ی وب در چند سال گذشته به شدت رشد کرده است. قالب‌های کاری front-end بسیاری هر سال منتشر می‌شوند. bootstrap یکی از محبوب‌ترین آنهاست. با این حال، رقبای زیاد دیگری وجود دارند که شاید تا به حال اسم آن را هم نشنیده باشید، اما قطعا ارزش امتحان کردن را دارند.

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


Spectre

Spectre

Spectre یک قالب کاری CSS واکنشگرا، رایگان و مدرن است. المان‌های زیبا، سیستم طرح‌بندی (layout) واکنشگرا بر مبنای flexbox، اجزای CSS و ابزارهایی سودمند را ارائه می‌کند که می‌توانند با استفاده از کامپایلرهای Sass و Scss اصلاح و تعدیل شوند. واقعا سبک است و به صورت فشرده، تنها ۱۰ کیلوبایت حجم دارد و اغلب مرورگرهای مدرن را پشتیبانی می‌کند.


Mustard UI

Mustard UI

این یک قالب کاری css سبک و متن‌باز است. ماژولار است و شما می‌توانید انتخاب کنید که تمام آن‌ها را می‌خواهید و یا فقط به یکی از ماژول‌ها احتیاج دارید. تمام اجزای لازم برای طراحی front-end همچون flexbox grid، دکمه‌ها، جدول‌ها، فرم‌ها، cards و خیلی چیزهای دیگر را دارد و می‌تواند با استفاده از متغیرهای scss شخصی‌سازی شود.


Bulma

Bulma

Bulma یک قالب کاری CSS رایگان و متن‌باز بر مبنای مدل طرح‌بندی flexbox است. یک سیستم شبکه‌ای (grid) ساده دارد. میله‌های هدایت واکنشگرا و اشیاء چندرسانه‌ای روانی دارد. تمام المان‌ها در Bulma برای صفحه‌های نمایش کوچک، بهینه شده‌اند و mobile-first هستند و به راحتی و با استفاده از متغیرها و کلاس‌های موجود، قابل شخصی‌سازی هستند.


UI Kit

UI Kit

این یکی دیگر از قالب‌های کاری front-end عالی CSS و JavaScript است. فونت آیکن‌های SVG مخصوص به خود را دارد و کامپوننت‌های متعدد. هم در طراحی ظاهری و هم به عنوان یک چارچوب کاری، به خوبی طراحی شده است. استایل‌های یکپارچه‌ای دارد. API آن به آسانی قابل یادگیری است. گزینه‌های زیادی برای شخصی‌سازی و کلاس‌های اصلاح‌کننده‌ی مناسب و کاربردی دارد.


TentCSS

TentCSS

TentCSS یک قالب‌کاری است که به آسانی و سادگی می‌توان از آن استفاده کرد. تمام اجزای پایه و اساسی که برای ساخت یک وب‌سایت واکنشگرا احتیاج دارید را ارائه می‌کند. خیلی سبک است و در حالت فشرده تنها ۵ کیلوبایت حجم دارد. از استاندارد BEM تبعیت می‌کند. یک ساختار شبکه‌ای مدرن flexbox برای انجام طرح‌بندی‌ها دارد.


MaterializeCSS

MaterializeCSS

این یک قالب کاری front-end واکنشگرای مدرن بر مبنای طراحی متریال (Material) است. استفاده از آن واقعا ساده است. به ویژه برای کسانی که با پروژه‌هایی مشابه، نظیر Bootstrap آشنایی داشته باشند. همچنین مجموعه‌ای از قالب‌های پایه دارد که به شما کمک می‌کند به سادگی وب‌سایت خود را طراحی کنید.


Foundation

Foundation

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


Semantic UI

Semantic UI

Semantic یک قالب کاری front-end است که با استفاده از HTML قابل فهم، به ایجاد طرح‌بندی‌های واکنشگرا و زیبا کمک می‌کند. بیش از ۳۰۰۰ متغیر CSS دارد که به شما کمک می‌کند شمایل شخصی خود را داشته باشید. در سطح بالایی واکنشگراست و کاملا با مقادیر ’em’ ساخته شده است.


Base

Base

Base یک قالب کاری CSS سبک، حداقلی و واکنشگراست. روی آخرین نسخه‌ی Normalize.css ساخته شده و به ماژول‌های مستقل از هم شکسته شده است. بنابراین شما می‌توانید تنها از هر کدام که احتیاج دارید استفاده کنید. به صورت mobile-first است و در تمام مرورگرهای مدرن و همچنین +IE 10 به خوبی کار می‌کند.


MUI

MUI

این یک قالب کاری واکنشگرا و کوچک است که دستورالعمل‌های طراحی Material گوگل را دنبال می‌کند. هیچ وابستگی خارجی ندارد و فوق‌العاده سبک است و در حالت فشرده تنها ۵٫۴ کیلوبایت حجم دارد. از React پشتیبانی می‌کند. با استفاده از فایل‌های SASS قابل شخصی‌سازی است. یک نسخه‌ی inline جدا برای شکل‌دهی و ساختاردهی به ایمیل‌ها دارد.


منبع: ۱۰Lightweight CSS Frameworks You Should Know About
ترجمه: سیدمحمدحسین طباطبایی بالا

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *