آشنایی با ۸ فریمورک کوچک و سریع CSS
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 7 دقیقه

آشنایی با ۸ فریمورک کوچک و سریع CSS

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

یادتان باشد که برای بهترین خروجی، همواره از بهینه‌ترین روش‌های ممکن استفاده کنید. هرچقدر درخواست‌های HTTP وبسایت‌تان کمتر باشد، منابع کمتری بارگذاری شود، ساختار فایل‌های HTML/CSS/JSتان کوچک‌تر و در واقع جمع و جورتر باشد، به وبسایت سریع‌تر و بهینه‌تری دست پیدا می‌کنید. 

تمام این موارد را در نظر بگیرید و بعد سراغ لیستی بروید که امروز برای‌تان آماده کرده‌ام. در لیست زیر می‌توانید با ۸ فریمورک سریع و ساده CSS آشنا شوید که نیازمندی‌های اصلی شما برای طراحی یک وبسایت را رفع کرده و برای انجام چنین کاری فضا و حجم زیادی را نیز اشغال نمی‌کنند. 

۱. Milligram

۱۰ مورد از کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

یکی از فریمورک‌های فرانت اند مینیمال milligram نام دارد که در حال حاضر نسخه ۱.۴.۱ آن منتشر شده است. برای یک رابط کاربری مینیمال این فریمورک بسیار مناسب است و همچنین لازم به ذکر است که بگوییم دنبال کننده‌های بسیاری دارد.

می‌توانید این فریمورک را از طریق پکیج منیجرهای مختلفی مانند Yarn، Bower، npm نصب کنید. در این فریمورک از Normalize استفاده شده است و همراه با آن نیز نسخه‌ی فشرده سازی شده نیز قرار دارد.

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

Topcoat

۱۰ مورد از کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

با استفاده از Topcoat شما یک فریمورک با سرعت بارگذاری بسیار بالا را در اختیار خواهید داشت. توسعه‌دهندگان این فریمورک هنگام ساخت آن تست‌های مختلفی را در مقابل با فریمورک‌های مختلف روی Topcoat اجرا کردند. 

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

3. Pure CSS

۱۰ مورد از کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

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

یا اگر تنها قصد بهره‌گیری از حالت گرید را دارید می‌تواند آن را به صورت جداگانه دانلود کنید، در این حالت حجم بسته تنها به ۸ دهم کیلوبایت می‌رسد.

این مورد بسیار سبک‌تر از بوت‌استرپ و یا فریمورکی مانند فاوندیشن است.

4. Mincss

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

Min.css به عنوان یک جایگزین بسیار سبک برای بوت استرپ معرفی شده است. در حقیقت این پروژه خود را سبک‌ترین فریمورک موجود معرفی کرده‌ است، به نحوی که حجم آن ۹۹۰ بایت است.

این فریمورک به خوبی در مرورگرهای مختلف حتی مرورگرهای قدیمی پشتیبانی می‌شود.

اگر واقعا دنبال یک کتابخانه سریع و سبک هستید Min.css می‌تواند بهترین مورد باشد. مطمئنا که از آن ناامید نمی‌شوید.

5. Petal

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

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

تمام کامپوننت‌ها اختیاری هستند بنابراین می‌توانید اگر مواردی را دوست ندارید از پروژه‌تان حذف نمایید.

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

6. Picnic

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

با استفاده از Picnic CSS می‌توانید درست چیزی که براساس آن تبلیغ می‌کنند را دریافت کنید: یک کتابخانه سبک و زیبا.

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

اگر به صفحه نمونه‌ها مراجعه کنید می‌توانید لیست کاملی از المان‌های پیشفرض آن را مشاهده نمایید. 

همچنین در کنار پروژه صفحه مستندات بسیار عالی و ساده‌ای در نظر گرفته شده که می‌توانید از آن برای فراگیری Picnic استفاده کنید. 

7. Kube

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

من واقعا با Kube شگفت زده شدم، این مورد جزو کوچکترین فریمورک‌ها نیز اما یکی از بهترین موارد است. 

البته نباید از حق گذشت چرا که این کتابخانه نیز تا حد نیاز کوچک است.  کتابخانه به صورت کامل همراه با کامپوننت‌های جاوااسکریپتی چیزی حدود به ۳۰ کیلوبایت است. با این حال این مورد چیزی حدود ۱۰ برابر کوچکتر از بوت استرپ است.

اما در میزان کوچکی این مورد هیچ گاه نمی‌تواند با فریمورکی مانند Mincss رقابت کند. 

8. Chota

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

اگر دنبال چیزی هستید که ۱۰ برابر کوچکتر از Kube باشد، پس باید فریمورک CSS Chota را انتخاب کنید. حجم این کتابخانه تقریبا ۳ کیلوبایت است و تنها حاوی فایل CSS‌ است. پس نباید انتظار تب‌ها، منوهای دراپ‌داون و موارد پویا باشید.

یکی از ویژگی‌هایی که این فریمورک در مقایسه با دیگر موارد دارد این است که مستقل از هرگونه پیش‌پردازنده دیگری اجرا می‌شود.

خبری از Less و Sass نیست. تنها کافی‌ست آن را به کدهای‌تان اضافه کنید و استفاده نمایید.

9. Furtive

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

Furtive یکی دیگر از فریمورک‌های بسیار سبک CSS چیزی در حد ۲.۴ کیلوبایت است. همچنین این فریمورک به صورت کامل با موبایل سازگاری دارد. این مورد از تکنولوژی‌های مدرن دنیای اینترنت استفاده می‌کند. چیزهایی مانند FlexBox و SVG در آن پیاده‌سازی شده اند.

10. Siimple

کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

Siimple از طراحی فلت پشتیبانی می‌کند و ساختار کد بسیار ساده‌ای دارد.

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

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

در پایان

استفاده از ابزار درست برای طراحی و ساخت یک وبسایت ممکن است یکی از چالش‌برانگیز‌ترین کارهای دنیا باشد. دلایل بسیار زیادی برای این موضوع وجود دارد. برای مثال اگر وبسایت شما کوچک باشد و نیازی به المان‌های گرافیکی و فریمورک‌های SPA نداشته باشد چه گزینه‌ای را انتخاب می‌کنید؟

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

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
5 از 2 رای

/@arastoo
ارسطو عباسی
کارشناس تولید و بهینه‌سازی محتوا

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

دیدگاه و پرسش

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

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

ارسطو عباسی

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