برترین فریم ورک های CSS را بشناسید

دوستان عزیزی که در زمینه طراحی سایت در قسمت فرانت اند فعالیت دارند حتما با زبان طراحی Css کار می کنند و یا احتمالا به تازگی در حال یادگیری آن هستند . در این بین علاوه بر Css ممکن است کلمه‌ای به نام ” فریمورک ” به گوش شما خورده باشد . اگر درمورد فریمورک اطلاعات کافی ندارید میتوان در چند خط فریمورک را به این شکل توضیح داد :

اگر با زبان طراحی Css آشنایی داشته باشید اطلاع دارید که باید توسط برخی کلاس ها و آیدی ها ، تگ های داخل html را علامت گذاری کرده و سپس داخل فایل های Css برای این تگ ها استایل بنویسید . اسامی و نام کلاس‌ها را میتوان به هرشکلی تنظیم کرد ، مثلا برای یک بخش که قصد نمایش خدمات سایت را داخل آن دارید یک کلاس با نام service-box ساخته و سپس استایل های این بخش همچون عرض و ارتفاع و رنگ و … را تنظیم می کنید . اگر این اسامی به شکلی شناخته شده و عمومی ارائه شوند مطمئنا یک ساختار همگانی در پروژه هایی که از یک فریمورک استفاده می کنند ایجاد خواهد شد ، وگرنه هر شخص طراح ، با اسامی دلخواه خود اقدام به کدنویسی خواهد کرد .

برای مثال اگر شما قصد دارید تا از رنگ سبز در پروژه خود استفاده کنید میتوانید کلاس هایی را به شکل زیر ایجاد کرده و رنگ سبز را داخل آنها تعریف کنید و هر زمان نیاز داشتید تا رنگ پس زمینه برای بخش خاصی سبز شود ، نام این کلاس را به صفت class تگ مورد نظرتان در html اضافه کنید .

.green-color{
     background-color:green;
}
 .green-bg{
     background-color:#00FF00;
}

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

@media only screen and (max-width: 600px) {
     body {
         background-color: lightblue;
    }
}

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

در این حالت اسامی کلاس هایی که برای تقسیم بندی ساخته شده است درگام اول نامفهوم است ، و طراح یا ویرایشگر قالب باید چندین ساعت ساختار کدهای شما را بررسی کند تا بفهمد برای مثال کلاس column-big چه خروجی خواهد داشت ، چراکه تمامی اسامی کلاس ها طبق سلیقه و میل خود شما ساخته شده است . اما اگر از یک سیستم استاندارد استفاده کنیم ، اسامی کلاس هایی که برای بخش تقسیم بندی چیدمان تنظیم شده است ، برای تمامی کسانی که به سیستم طراحی شده شناخت دارند ، آشنا است و لذا مشکلی وجود نخواهد داشت ، برای مثال سیستم تقسیم بندی زیر برای فریمورک بوت استرپ است :

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

فریمورک بوت استرپ

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

سایت رسمی بوت استرپ

بوت استرپ خوشبختانه اسامی کلاس های خود را به نوعی تنظیم نموده که هرشخصی میتواند با چندین ساعت مطالعه ، به سادگی نحوه عملکرد آنها را شناخته و شروع به کدنویسی کند . البته در مورد فریمورک ها باید یک نکته مهم را مدنظر داشته باشید ! تا زمانی که به زبان هدف مسلط نباشید ، نمیتوانید فریمورک مربوط به آن زبان را بخوبی یاد بگیرید . به عبارتی اگر شما به زبان طراحی Css تسلط نداشته باشید ، نمیتوانید به سراغ یادگیری فریمورک بوت استرپ بروید . در داخل بوت استرپ دستورات لازم برای کار با بخش های متحرک همچون اسلایدر ، مودال ، آکاردئون و … به راحتی و توسط چندخط کد وجود دارد و از این جهت نیاز به استفاده از هیچ کتابخانه جاوااسکریپتی ندارید و میتوانید تنها با استفاده از یک کتابخانه ، ظاهر سایت خود را متحول کنید .

بوت استرپ در نسخه های قبلی خود همچون نسخه 2 ، کارایی لازم را ایجاد کرده بود اما ساختار درستی در هسته خود نداشت . در نسخه سوم ، مشکلات اصلی که در مورد تقسیمات چیدمان وجود داشت در بخش های بسیاری بهتر شدند . اما در نسخه های 4 بخش چیدمان و کلاس های داخل فریمورک به شکل اساسی تغییر کردند و استفاده کنندگان از این فریمورک شاید بیش از 70% انعطاف بیشتر در کدنویسی بدست آوردند . در حقیقت بوت استرپ در نسخه 4 یک نقطه عطف داشت . فریمورک بوت استرپ در نسخه سوم از تکنولوژی Float و در نسخه چهارم از تکنولوژی Flex و در نسخه 5 از دو تکنوتلوژی Flex و همچنین CssGrid استفاده می کند .

در نسخه 5 بوت استرپ ، یکی از اصلی ترین مشکلات برای ما ایرانیان که از زبان های راست به چپ استفاده می کنیم نیز حل شد و نسخه راست چین بوت استرپ نیز به هسته اصلی آن به شکل رسمی اضافه شد . لذا این فریمورک با توسعه این موارد و همچنین بهبود کلاس ها و ویژگی های کاربردی خود ، توانست تا بیشتر از قبل محبوبیت خود را افزایش دهد . برای یادگیری این فریمورک دوره های آموزشی کامل در داخل سایت ما وجود دارد و میتوانید تنها در چند روز به شکل کامل ، بهترین قالب های واکنشگرا را توسط بوت استرپ طراحی کنید . بوت استرپ در نسخه 5 کتابخانه آیکونی به نام ” بوت استرپ آیکون ” را ارائه کرد که داخل آن چندصد آیکون مختلف برای استفاده داخل سایت شما وجود دارد . ( وب سایت سئو نود توسط آخرین نسخه بوت استرپ طراحی شده و آیکون های استفاده شده نیز آیکون های بوت استرپ هستند ) .

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

فریمورک UiKit

اگر تصور می کنید که در صورت استفاده از بوت استرپ ممکن است ظاهر سایت شما مشابه به سایر سایت ها باشد ، میتوانید به سراغ UiKit بروید . UiKit بعد از بوت استرپ از محبوبیت بالایی برخوردار است به این دلیل که ابزارهای بسیار زیادی جهت راحتی کار درون آن کدنویسی شده است . در داخل بوت استرپ شما تنها به 1 مدل اسلایدر دسترسی دارید اما در داخل UiKit چندین مدل مختلف از اسلایدر ها و همچنین سایر المان های جاوا اسکریپتی ، با قابلیت شخصی سازی وجود دارد و از این جهت شما بازهم احتیاج کمتری به کتابخانه های اضافی جاوا اسکریپتی خواهید داشت .

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

فریمورک Foundation

Foundation نیز یکی از فریمورک های محبوب در زمینه طراحی با Css است که البته برخی بر این اعتقاد هستند که فاندیشن در رقابت شدید با بوت استرپ قرار دارد و اگر به سایت رسمی فریمورک فاندیشن مراجعه کنید ، با بخش های زیادی روبرو هستید که البته اگر ابتدا به سایت های بوت استرپ و یوآی کیت مراجعه کنید ، کمی شاید ظاهر سایت Foundation را پسند نکنید ، اما قدرت این فریمورک نیز کم نیست . این فریمورک نیز همانند بوت استرپ ازسیستم 12 ستون برای تقسیم بندی استفاده می کند و برخی ابزار های جاوا اسکریپتی همچون اسلایدر داخل این فریمورک نیز وجود دارد .

یادگیری Foundation نسبت به بوت استرپ و یوآی کیت تا حدودی ساده تر است اما اگر اینگونه بخواهیم بگوئیم که Foundation بسیار ساده تر از بوت استرپ و یوآی کیت است حرف درستی نیست چراکه راحتی کار با فریمورک های مختلف بستگی به قدرت یادگیری و راحتی خود مخاطب با ساختار فریمورک مدنظر دارد . طبق گفته خود وب سایت Foundation ، سایت هایی همچون آمازون ، ebay ، سایت Disney ، سایت موزیلا و چندین کمپانی بزرگ دیگر توسط این فریمورک پیاده سازی شده است . در داخل Foundation نیز از پیش پردازنده Sass استفاده شده است که به این ترتیب انعطاف کدهای استایل شما بسیار بیشتر خواهد بود .

فریمورک بوت استرپ از دو تکنولوژی Flex و همچنین CssGrid استفاده می کرد اما فاندیشن در نسخه قبل از فعلی ( نسخه 6 ) تنها از Float و همچنین Flex استفاده می کرد اما در نسخه جدید  تکنولوژی Grid را نیز اضاف کرد که از این بابت از بوت استرپ عقب بود . المان های ارائه شده برای طراحی توسط فاندیشن نیز نسبت به بوت استرپ کمتر است و شما دسترسی به ابزاری های طراحی کمتری دارید .

فریمورک Semantic UI

Semantic UI نیز یکی از فریمورک های مطرح در زمینه طراحی است . این فریمورک نیز دارای ابزار های بسار زیادی است . Semantic UI یک ساختار و دیزاین متفاوت دارد و نسبت به 3 فریمورک قبلی ، ظاهری متفاوت داشته و المان های جذابی دارد . داخل Semantic UI المان های پیشفرض ( از قبل طراحی شده ) وجود دارد که بجای وقت گذاشتن و طراحی ، میتوانید از کدهای آماده شده برای این بخش ها استفاده کرده و با تغییر در ساختار و دیزاین المان ها ، آنها را به نمونه های دلخواه خودتان تغییر دهید . میتوان گفت داخل Semantic UI المان های نمونه برای استفاده فوری ، بیشتر از سایر فریمورک ها است ، بعنوان مثال اگر وارد صفحه مربوط به طراحی کارد ( از این آدرس ) شوید ، خواهید دید که در چندین مدل مختلف نمونه های Card وجود دارد و میتوانید تنها بایک کلیک کد بخش مدنظر را کپی کرده و داخل سایت خود استفاده کنید .

داخل Semantic UI مطالعه داکیومنت ساده است و شما میتوانید گام به گام شروع به یادگیری این فریمورک نمائید . داخل فاندیشن المان های واکنشگرای جذابی وجود دارد همچون بخش دکمه های افزایش و کاهش ، بخش ریتینگ ( امتیاز دهی ) و … که اگر یک کدنویس مبتدی نیز باشید میتوانید بدون داشتن دانش در زمینه زبان برنامه نویسی جاوا اسکریبپت ، برخی المان های مورد نیاز را داخل صفحات وب خود پیاده کنید . ترکیب رنگ های این فریمورک به زیبایی بوت استرپ نیست اما این فریمورک نیز همانند نمونه های قبلی متن باز است و میتوانید آن را شخصی سازی کنید . این فریمورک نیز در داخل هسته خود ، کتابخانه لازم برای آیکون فونت ها را ارائه نموده و شما میتوانید با مطالعه این قسمت در سایت فریمورک مربوطه ، از آیکون هایی که ارائه نموده به سادگی در داخل طراحی های خودتان استفاده کنید . آیکون های ارائه شده توسط این فریمورک ، وزن بسیار مناسبی دارند و تقریبا تمامی آیکون های لازم جهت استفاده در اکثر سایت ها را پوشش داده است .

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