بهترین فریمورک css کدام است؟

فریمورک css  چی هست؟

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

طراحی رسپانسیو
طراحی رسپانسیو

در حقیقت، فریمورک های css  مجموعه ایی از کدهای(Cascading Style Sheets)  css  و جاوااسکریپت است که شامل کدهای استاندارد از پیش نوشته شده ایی هستند که می توانند به عنوان کدهای مرجع از آن برای تعریف اجزای مختلف صفحات وب مثل متن ،لینک، منوها، فرم ها، دکمه ها، جداول و لیست ها و …  استفاده کرد  و شما کافی است با توجه به کدهای تعریف شده وب سایت خود را طراحی کنید. با استفاده از فریمورک های از پیش آماده شده، دیگر وقت شما صرف نوشتن کدهای تکراری و ضروری نخواهد شد و به راحتی و در اسرع وقت خواهید توانست وب سایت خود را طراحی کنید و راه اندازی نمایید.همانطوری که در دنیای جدید و عصر کنونی  نیازی به اختراع دوباره چرخ نیست؛ همین اتفاق هم در مورد فریمورک های css افتاده است و با این فریمورک ها نیاز به نوشتن کدهای css از صفر تقریبا از بین رفته است.

فریمورک های css از چی تشکیل شدند؟

بسته به اینکه فریمورک ساده و یا کامل باشند و اینکه چه المنت هایی رو پشتبانی می کنند می تواند شامل اجزای زیر باشد:

۱- reset style sheet : که شامل کدهای css  هست که مقادیر مختلف که نیاز به مقداردهی اولیه دارند را مقداردهی می کند و یا درصورت لزوم مقدار آنها را صفر قرار می دهد، حاشیه ها را صفر می کند و … . از طرفی برای برخی مرورگرهای قدیمی و اینترنت اکسپلورر برای نمایش بهینه باید بعضی عناصر مقادیر اولیه تعیین شوند.

۲- grid: در تمامی فریمورک ها بخشی از کدها متعلق به کدهای نمایش ستون های مختلف با اندازه های متلف عرض و ارتفاع و تعیین نحوه نمایش آنها در رزولیشن های مختلف می باشد.  البته در انتهای همین پست، فریمورک های ساده ایی که فقط برای گرید وب سایت به کار می روند معرفی شده است

۳-  web typography : تایپوگرافی برای تعیین و نحوه نمایش فونت ها

۴- set of icons : تعریف آیکون ها و وب فونت های مورد استفاده

۵-  styling for tooltips, buttons, elements of forms : استایل دهی راهنماها، دکمه ها و اجزای فرم ها

۶- parts of graphical user interfaces : نمایش عناصر گرافیکی مثل تب ها، اسلایدشوها و تصاویر

 

استفاده از فریمورک در طراحی وب
استفاده از فریمورک در طراحی وب

برای چی باید از فریمورک css استفاده کنیم؟

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

فریمورک های css و  نمایش در دستگاه های مختلف

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

اولین و شاید مهم ترین علت استفاده از فریمورک های css نمایش ستون های بی نقص و رسپانسیو در رزولیشن های و دستگاه های مختلف هست .به کمک این فریمورک ها می توانید به هر تعداد از ۱ تا ۱۲ و یا در بعضی فریمورک ها تا ۱۶ ستون ایجاد کنید که بسته به عرض صفحه نمایش، اندازه و نحوه نمایش آنها طبق تعریف تغییر پیدا خواهد کرد.

برترین فریمورک های css کدام هستند؟

Bootstrap اولین فریم ورک css رسمی معرفی شده بود که مورد استقبال طراحان وب سایت قرار گرفت و توسط مارک اتو (Mark Otto) و جاکوب تورنتون (Jacob Thornton) برای ایجاد یک چارچوب ظاهری مشخص و یکسان در ابزارهای توییتر طراحی و نوشته شد.این فریمورک قدیمی ترین فریمورک css است که توجه خاصی به مبحث رسپانسیو و واکنش گرا بودن صفحات وب داشت و البته کمی پیچیه و سنگین هست و کار با آن به مهارت بیشتری نیاز دارد و حجم آن در مقایسه با سایر فریمورک ها بیشتر است و هنوز بیشترین فریمورک استفاده شده برای طراحی صفحات وب می باشد.

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

flexbox یک فریمورک css برای گریدبندی و تقسیم بندی و  نمایش تعداد مختلف ستون در اندازه های مختلف در کنار هم می باشد.

Vital فریمورک سبک و مقایس پذیری است. تمام ویژگی های خوب یک وبسایت را به شما می دهد. برای ساختن این فریمورک از Sass استفاده شده، جدای از آن دارای امکاناتی مانند سیستم شبکه بندی، دکمه های اختصاصی و… است.

طراحی وب
طراحی وب

مزایای استفاده از فریمورک های CSS:

۱- انجام سریع روند طراحی پوسته  و صفحات وب

۲- کوتاه و مختصر بودن کدها

۳- حل مشکلات احتمالی CSS  در فریمورک ها

۴- سازگار بودن با تمام مرورگرها حتی اینترنت اکسپلورر  (!)

۵- مرجع خوبی برای آشنایی و یادگیری کدهای CSS

۶- مرجع خوب  و یکسان برای انجام کارهای تیمی

معایب استفاده از فریمورک ها:

۱- پیچیده بودن برخی از فریمورک ها

۲- خواه ناخواه برخی از کدهای CSS فریمورک بدون استفاده خواهند ماند

۳- استفاده از فریمورک های آماده ممکن هست فرآیند و روند یادگیری  را مختل کند

فریم ورک بوت استرپ ۳ (bootstrap)

فریم ورک فوندیشن (Foundation 3)

فریم ورک اسکلت (skeleton)

فریم ورک YAML

فریم ورک گامبی (Gumby)

FICTOAN

 Semantic UI

Pure ساخت Yahoo!

UIkit ساخت شرکت YOOtheme

avalanche

Beauter

Vanilla Framework

Milligram

Look

چنانچه فقط نیاز به کدهای CSS برای گرید بندی صفحات خود دارید می توانید از فریمورک های ساده تر که فقط مختص گرید صفحات نوشته شده استفاده نمایید

goldengridsystem.com

muellergridsystem.com

responsivegridsystem.com

daneden.github.io/Toast

 

 

برای دانلود تمام فریمورک های معرفی شده در این پست می تونید روی لینک زیر کلیک کنید و این مجموعه رو یکجا دانلود کنید:

دانلود مجموعه کامل فریمورک های معرفی شده در این پست

برای مشاهده مستندات و نحوه استفاده و آشنایی با کدهای هر فریمورک می توانید به آدرس وب سایت آنها مراجعه کنید.

 

شما تجربه استفاده از کدام یک از این فریمورک ها را دارید؟ آیا شما با فریمورکی کار می کنید که در این لیست نامی از ان برده نشده؟ تجربیات خودتان را با ما در میان بگذارید…

 

منابع :

۱- awwwards.com 

۲- three29.com

-