کتابخانهها، فریمورکها و ابزارهای CSS
یکشنبه 15 دی 1398ما شاهد افزایش چشمگیر محبوبیت طرحبندیهای Flexbox، انیمیشنهای دقیق CSS، کاربرد SVG، Styleguides، افکتهای با سبک اینستاگرام، ادغام عمیقتر CSS با برنامههایی مثل Photoshop و Sketch، و پیشپردازندههای CSS مانند Sass و Less هستیم.
نه تنها 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.
- Web Design
- 2k بازدید
- 3 تشکر