کتابخانه‌ها، فریم‌ورک‌ها و ابزارهای CSS

یکشنبه 15 دی 1398

ما شاهد افزایش چشمگیر محبوبیت طرح‌بندی‌های Flexbox،‌ انیمیشن‌های دقیق CSS، کاربرد SVG، Styleguides، افکت‌های با سبک اینستاگرام، ادغام عمیق‌تر CSS با برنامه‌هایی مثل Photoshop و Sketch، و پیش‌پردازنده‌های CSS مانند Sass و Less هستیم.

کتابخانه‌ها، فریم‌ورک‌ها و ابزارهای CSS

نه تنها CSS به صورتی عالی در حال رشد است، بلکه با کمک بسیاری از منابع منبع باز (open-source) که امسال منتشر شده است، چیزی‌های قدرتمندی می‌سازد که هرگز آسان نبوده است.

تمام ابزارهای موجود در این مجموعه‌، افزونه‌های باصرفه‌ای هستند که با یک توضیح مختصر آن‌ها را به شما معرفی می‌کنیم:

کتابخانه‌ها و ابزارهای CSS Animation

Rocket

ابزاری ساده برای ایجاد انیمیشن‌های وب.

Animate Plus

کتابخانه جاوااسکریپت که به شما کمک می‌کند تا به خواص CSS و ویژگی‌های SVG جان دهید.

Tuesday

کتابخانه خاص CSS animation.

MOTION UI

کتابخانه Sass  برای ایجاد تحولات و انیمیشن‌های انعطاف‌پذیر CSS.

Transformicons

دکمه‌ها،‌ نمادها و آیکون‌های متحرک با استفاده از SVG و CSS.

ابزارها و موارد کاربردی CSS

PurifyCSS

ابزاری مفید که تشخیص می‌دهد برنامه‌های شما از کدام سلکتورهای CSS استفاده کرده و کدام فایل را بدون استفاده از CSS ایجاد کرده‌اند.

Cssfmt

ابزاری که به طور اتوماتیک سورس کد CSS را فرمت می‌کند.

sanitize.css

باعث می‌شود مرورگرها عناصر را به طور مداوم رندر کنند و به شما اجازه می‌دهد تا با بهترین شیوه‌های امروزی که نیاز به پیکربندی‌های خاصی ندارند استایل‌‌دهی کنید.

ابزارهای Flexbox

Flexbugs

لیست مدیریت‌شده توسط انجمن از مشکلات مربوط به flexbox و workaroundهای (استراتژی برای غلبه بر نقص یا مشکلی در سیستم یا برنامه دیگر) cross-browser.

Flexbox in 5 Minutes

یک تور تعاملی از تمام ویژگی‌های مهم property: flexbox مربوط به CSS.

Sketch Flex Layout

پلاگین برای Sketch که امکان طرح‌بندی CSS Flexbox را فراهم می‌کند.

cssPlus

چارچوب طرح‌بندی قدرتمند، سریع و cross browser بر مبنای Flexbox.

CSS Toolkits

Flickity

کتابخانه CSS که باعث می‌شود گالری‌ها و اسلایدرها جالب توجه شده و آسان و بدون دردسر بسازید.

CSSGram

کتابخانه کوچکی برای ساخت مجدد فیلترهای اینستاگرام با CSS.

Marx

تنظیم مجدد CSS بدون جاوااسکریپت یا کلاس‌ها، فقط با CSS خام.

Pushy

منوی ناوبری (navigation) ریسپانسیو off-canvas با استفاده از تبدیل و انتقال CSS.

Drop

کتابخانه‌ای برای ایجاد drop downها و سایر عناصر شناور دیگر.

Stretchy

ساخت اندازه اتوماتیک عنصر.

CSSketch

یک پلاگین منبع باز CSS برای Sketch.

ai2html

اسکریپت Open-source برای Adobe Illustrator که مستندات Illustrator را به HTML و CSS تبدیل می‌کند.

SassyFlags

کتابخانه ساده برای افزودن flagها به وب‌سایت.

کیت‌های UI و فریم‌ورک‌های وب ریسپانسیو

Basscss

مجموعه سبکی از استایل‌های عناصر پایه و موارد کاربردی غیرقابل تغییر.

Neutron

فریم‌ورک Sass برای ایجاد طرح‌های وب منعطف‌، واضح و معنادار.

flexible.gs

فریم‌ورک CSS سیستم grid ریسپانسیو و انعطاف‌پذیر (CSS، Sass، LESS و Stylus).

Wee

فریم‌ورک سبک front-end برای ساخت پروژه‌های وب پیچیده و ریسپانسیو به صورت منطقی.

Scooter

فریم‌ورک SCSS و کتابخانه UI از Dropbox.

Decorator

فریم‌ورک front-end جاوااسکریپت، CSS و HTML.

فریم‌ورک‌های Material Design

Material

فریم‌ورک HTML5 UI مبتنی بر Material Design.

MUI

فریم‌ورک وب Material Design سبک و کم حجم.

LumX

فریم‌ورکی مبتنی بر مشخصات Material Design و AngularJS.

برنامه‌ها و ابزارهای CSS مبتنی بر وب

CIRCULUS.SVG

تولید‌کننده منوی مدور SVG.

CSS Gradient Animator

ابزار مبتنی بر وب برای تولید گرادینت متحرک.

SVGOMG

برنامه مبتنی بر وب برای بهینه‌سازی و پیکربندی SVGO.

Blend

ابزاری برای تولید گرادینت‌های زیبا و ساده CSS3.

CSS Ruler

ابزار سودمند مبتنی بر وب برای یافتن طول‌های CSS.

SVG Path Builder App

با استفاده از GUI (رابط کاربری گرافیکی) یک مسیر SVG را به سرعت می‌سازد.

css2sass

برنامه مبتنی بر وب که اسنیپت‌های CSS را به کد Sass تبدیل می‌کند.

Resizr.

یک برنامه ساده برای تست کوئری‌های مدیای (media) CSS.

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید