فریمورک های html و CSS

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

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

مفهوم فریمورک

فریمورک ها کد هایی هستند که در طراحی وب سایت ها مورد استفاده قرار می گیرد. فریمورک ها به 2 دسته backend و frontend تقسیم می شوند و در اختیار برنامه نویسان قرار می گیرند. دلیل طراحی و ایجاد فریمورک ها، ساخت یک ساختار مشترک برای برنامه نویسان می باشد. فریمورک frontend از فایل ها و کد های استاندارد شده زبان های HTML ،css ،JS و … ساخته شده است. در ادامه بیشتر درباره فریمورک های html و css توضیح می دهیم.

مؤلفه های فریمورک های frontend

مؤلفه های موجود در فریمورک های frontend دارای ویژگی هایی می باشند که در زیر به معرفی آن ها می پردازیم.

• داشتن کد های منبع css برای ایجاد یک Grid. این ویژگی باعث می شود که طراحی سایت به گونه انجام شود که بدون تغییر ظاهری سایت، در دیگر نمایشگر ها نمایش داده شود. شما به وسیله سیستم Grid می توانید از ساختارهای دارای ۱۲ ، ۱۶ و ۲۴ ستون بهرهمند شوید.

• امکان مشخص کردن Typography برای المان های HTML

• ارایه راه حل هایی برای رفع مشکل عدم سازگار بودن مرورگرها در نمایش سایت ها

• ایجاد کلاس های استاندارد css که برای ایجاد یک سبک خاص در محیط کاربری استفاده می شود.

عوامل مهم در انتخاب فریمورک css و html

در انتخاب فریمورک های html و css عوامل بسیار مهمی وجود دارد که باید به آن ها توجه نمایید و در زیر به معرفی آن ها پرداخته شده است.

طراحی واکنش گرا (Responsive)

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

پشتیبانی از پیش پردازنده های css

یکی از عواملی که باید به آن توجه نمایید، استفاده از پیش پردازنده های css می باشد. در صورتی که در طراحی خود از پردازنده های css همچون LESS یا Sass باید از فریمورکی استفاده نمایید که از این 2 پردازنده پشتیبانی کند.

شخصی سازی

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

پشتیبانی

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

چگونه یک فریمورک css و html مناسب انتخاب کنیم؟

به طور کلی فریمورک های html و css به 2 دسته فریمورک های ساده و فریمورک های کامل تقسیم می شود که هیچ کدام از بقیه برتر نمی باشد و برای انتخاب مناسب فریمورک css و html باید مؤلفه های زیر را در نظر بگیرید.

• سرعت راه اندازی 
• سهولت
• امکانات 
• قابلیت ترکیب شدن با سیستم های دیگر
• پشتیبانی طولانی مدت

فریمورک های ساده در فریمورک های css

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

فریمورک ۱۱۴۰ css Grid

فریمورک ۱۱۴۰ css Grid یکی از فریمورک های css می باشد که برای مانیتور های بزرگ طراحی و مناسب می باشد. این فریمورک در سایز ۱۲۸۰ طراحی شده است که به همین دلیل در این اندازه بسیار عالی نمایش پیدا می کند و از Media Query برای نمایش داده شدن در دستگاه های موبایل استفاده می کند. فریمورک ۱۱۴۰ css Grid تمام ستون های موجود در مانیتور ها را رو هم قرار می دهد تا بهتر مشخص شوند. این فریمورک به راحتی می تواند در هر اندازه تغییر مقیاس دهند. 

فریمورک css Mueller

فریمورک css Mueller به عنوان یک گرید ماژولار به حساب می آید که در طراحی لایه های واکنش گرا و غیر واکنش گرا مورد استفاده قرار می گیرد. این فریمورک مناسب نمایشگر های دسکتاپ می باشد که بر روی پهنای ستون ها، شیارها و خطوط گرید کنترل کاملی دارد.

فریمورک css Titan

فریمورک css Titan یکی دیگر از فریمورک های css است که در میان دیگر از فریمورک های css به عنوان یک از فریمورک با کارایی آسان در طراحی واکنش گرا به حساب می آید. این فریمورک به صورت دو نوع ۱۲ و ۱۶ ستون ارایه می شود.

فریمورک Responsive Grid System, by Denis LeBlanc

همانطور که می دانید این فریمورک یکی از فریمورک های css می باشد که که به دلیل ساده بودن در طراحی سبک های خلاقانه مورد استفاده قرار می گیرد. فریمورک Responsive Grid System, by Denis LeBlanc مناسب دستگاه های موبایل می باشد که دارای ویژگی های Clearfix ، box-sizing است. جالب است بدانید که حجم این فریمورک کمتر از ۱ کیلوبایت بیان شده است.

فریمورک Less Framework 4

فریمورک Less Framework 4 یکی دیگر از سیستم گرید ساده در فریمورک های css است که در طراحی سایت های تطبیق پذیر مورد استفاده قرار می گیرد. این فریمورک از ۴ لایه و ۳ نوع Typography ساخته شده است که بر مبنای یک گرید واحد عمل می کنند.

فریمورک css Columnal

فریمورک css Columnal یک سیستم گرید زبان css می باشد که به یک نسخه ترکیبی از زبان css حساب می شود. شما به راحتی می توانید کد های سفارشی را به این فریمورک اضافه نمایید. فریمورک css Columnal دارای قابلیت ارتجاعی بودن است که از فریمورک ۹۶۰ gs پشتیبانی می کند.

فریمورک Toast

در صورتی که به دنبال یک فریمورک ساده در بین فریمورک های css هستید، این فریمورک یکی از فریمورک های ساده css می باشد. فراموش نکنید که ساده تر از این فریمورک نیز در فریمورک های css وجود دارد. فریمورک Toast از گرید واکنش گرا با ۱۲ ستون استفاده می شود که می توانید افکت های ملایمی را در طراحی اعمال نمایید. علاوه بر آن این فریمورک دارای ویژگی box-sizing می باشد که می توانید لایه ها و حاشیه هایی را به گرید اضافه لایه ها و حاشیه هایی را به گرید اضافه نمایید.

فریمورک Ingrid

Ingrid یک فریمورک برای چینش سیال می باشد که وظیفه کاهش استفاده از کلاس های گوناگون در یک بخش مشخص را برعهده دارد. این ویژگی باعث می شود که المان های مزاحم کمتری داشته باشد.

فریمورک ۹۶۰ Grid System

۹۶۰ Grid System یکی از فریمورک های css می باشد که برای ساده و موثر کردن طراحی وب استفاده می شود. کاربرد ۹۶۰ Grid System در فراهم کردن اندازه های پرکاربرد بر اساس پهنای ۹۶۰ پیکسل است. این فریمورک به دو صورت ۱۲ و ۱۶ ستونه در اختیار طراحان قرار می گیرد و می توانید از آن به شکل لایه های پشت هم استفاده نمایید.

فریمورک Susy

فریمورک Susy تنها فریمورک css می باشد که از سیستم Natalie Downe ساخته شده است. این فریمورک در طراحی سایت های استاتیک یا داینامیک، وردپرس، Django و … کاربرد دارد.

فریمورک های کامل در فریمورک های html و css

فریمورک های کامل فریمورکی می باشد که هم در زبان html هستند و هم در زبان css کاربرد دارند. این فریمورک ها به وسیله ارایه ها و ویژگی هایی (فرم ها، دکمه ها، قابهای تصاویر، قالب های HTML آیکون ها و دیگر مولفه های قابل تنظیم) می توانند سفارشی شوند.

فریمورک Bootstrap

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

فریمورک Foundation 3

فریمورک Foundation 3 از فریمورک های پیشرفته  فرانت اند می باشد که بر اساس پردازنده قدرتمند Sass تولید شده است. این فریمورک دارای قابلبت انعطاف پذیری می باشد که بتواند تمام جزییات خود را تغییر دهد.

فریمورک Skeleton

اگر به دنبال یک فریمورک زیبا و مناسب برای طراحی های ویژه دستگاه موبایل هستید، فریمورک Skeleton بهترین گزینه برای شما می باشد. فریمورک Skeleton از فایل های css ساخته می شود و سبک است. فراموش نکنید که در نمایش داده شدن این فریمورک در تمام اندازه های مانیتور بدون مشکل انجام می شود.

فریمورک YAML 4

یکی از فریمورک های css می باشد که به صورت ماژولار در اختیار طراحان قرار می گیرد. فریمورک YAML 4 بسیار انعطاف پذیر می باشد و از مرورگر های بسیار مدرن همچون Chrome, Firefox, Opera, Safari and Internet Explorer پشتیبانی می کند.

فریمورک Gumby

فریمورک Gumby یکی دیگر از فریمورک های css می باشد که طبق گرید ۹۶۰ پیکسل طراحی شده است. این فریمورک از انواع مختلفی از گرید ها پشتیبانی می کند و آن ها را با تعداد ستون های متنوع ارائه می نماید. فریمورک Gumby دارای قابلیت انعطاف پذیری می باشد که فایل های ایجاد قالب آماده را به شما ارائه می کند.

فریمورک Kube

فریمورک Kube یکی دیگر از فریمورک های css می باشد که در طراحی های پیشرفته مورد استفاده قرار می گیرد و مناسب تر می باشد. ابن فریمورک دارای قابلیت تطبیق پذیر، سیستم گرید کامل و typography های بسیار زیبایی می باشد و به طراحان ارائه می دهد.

فریمورک ResponsiveAeon

ResponsiveAeon از زیباترین فریمورک css می باشد که از سیستم css3 استفاده می کند. این فریمورک دارای گرید واکنش گرا بر اساس Media Query، جاوااسکریپت و HTML 5 می باشد.

فریمورک Semantic ui

فریمورک semantic ui logo یکی از محبوب ترین فریمورک های css3 در زمینه طراحی کاربری به حساب می آید. این فریمورک دارای ویژگی هایی همچون تنظیم عناصر، انیمیشن ‌های سه بعدی و ایجاد کامپوننت‌ های مختلف UI می باشد. فریمورک semantic ui logo سادگی مفاهیم تمرکز دارد.

فریمورک Bulma

فریمورک Bulma فریمورک‌ های محبو‌ب css به حساب می آید که اجزای آن به Flexbox وابسته می باشند. این فریمورک ترکیبی از Bootstrap و Semantic ui می باشد اما به نسبت آن ها ساده تر است. فریمورک Bulma دارای خجم ۲۱ کیلوبایت است که بر روی نسخه بتا اجرا می شود.

‌ animate css logo

animate css یکی از کتابخانه های css می باشد که به عنوان محبوبترین کتابخانه css به حساب می آید. کتابخانه animate css در ساخت عناصر متحرک و انیمیشن در وب مورد استفاده قرار می گیرد. این کتابخانه تنها کتابخانه css می باشد که بیشتر از ۵۰ افکت انیمیشنی را در اختیار کاربران خود قرار می دهد. 

فریمورک‌ pure.css logo

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

فریمورک Uikit 

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

فریمورک Materialize 

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

فریمورک Material UI

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

فریمورک Base 

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

فریمورک Tailwind

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

فریمورک Picnic css

فریمورک Picnic css یکی دیگر از فریمورک های ساده css به حساب می آید که به وسیله آن می توانید عناصر HTML را بدون اضافه کردن کلاس ها، استایل دهی نمایید. به غیر از این، این فریمورک دارای کامپوننت هایی همچون یک tab switcher، آپلودر فایل، تول تیپ و پنجره مودال برای ایجاد تعامل در وب سایت نیز می باشد 

فریمورک Cascade

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

فریمورک Cocise css

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

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

در قسمت قبل به معرفی تمام فریمورک های html و css پرداخته ایم و واجب دانستیم که در این قسمت بهترین فریمورک های html و css را به شما معرفی نماییم.

Bootstrap

نقاط قوت Bootstrap

• پشتیبانی از طراحی رسپانسیو
• طیف وسیع المان ها
• محبوبیت میان توسعه دهندگان در ایران و جهان
• مستندات جامع و کامل
• بروزرسانی مداوم

نقاط ضعف Bootstrap

• حجم نسبتا بالای فایل ها
• تعداد فراوان کلاس Html که در بسیاری از پروژه ها هیچ استفاده ای ندارند
• جامع بودن بوت استرپ می تواند یادگیری آن را کمی سخت کند

Semantic ui

نقاط قوت Semantic-UI

• نامگذاری با مفهوم کلاس های css که باعث می شود حتی مبتدی ها هم بتوانند به سادگی آن را فرا بگیرند
• برای استفاده از هر کامپوننت نیازی به بارگذاری کل فایلهای فریمورک نمی باشد
• هر کامپوننت دارای فال css و JS مختص به خود می باشد
• شخصی سازی آسان
• سازگاری با سایر فریمورک ها مانند React

نقاط ضعف Semantic-UI

• حجم پکیج ها نسبت به بوت استرپ خیلی بالاتر است
• این فریمورک ممکن است نتواند نیازهای پیچیده طراحان حرفه ای را برآورده کند

Foundation

نقاط قوت Foundation

• استایل پذیری فوق العاده و انعطاف در طراحی
• استفاده از واحد REM به جای پیکسل که باعث می شود نیاز به تعریف سایز برای هر دستگاه نداشته باشید

نقاط ضعف Foundation

• حجم زیاد فایل های مربوط به فریمورک
• پیچیدگی بسیار و یادگیری مشکل

Skeleton

نقاط قوت Skeleton

• حجم بسیار پایین
• کارایی فراوان برای پروژه های کوچک

نقاط ضعف Skeleton

• تعداد محدود المان های موجود

فریمورک Uikit

نقاط قوت UI Kit

• قابلیت شخصی سازی فراوان
• قابلیت اجرایی عالی در پروژه های بزرگ
• ساختار ماژولار که توانایی افزودن کامپوننت های اضافی را بدون دستکاری در هسته می دهد

نقاط ضعف UI Kit

• به دلیل جدید بودن این فریمورک منابع زیادی برای آن موجود نیست

Materialize

نقاط قوت Materialize

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

نقاط ضعف Materialize

• حجم بالای فایل ها
• عدم پشتیبانی از Flexbox

Material UI

نقاط قوت Material UI

• بهترین و ساده ترین راه برای فراگیری Material Design
• شخصی سازی و توسعه پذیری آسان

نقاط ضعف Material UI

• برای طراحی یک پروژه از صفر مناسب نیست
• برای استفاده از آن نیاز به درک ابتدایی از مباحث React دارید

Pure.css

نقاط قوت Pure

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

نقاط ضعف Pure

• عدم پشتیبانی از جاوااسکریپت از قابلیت های شخصی سازی آن می کاهد

Milligram

نقاط قوت Milligram

• استفاده از خاصیت Flexbox برای گرید بندی
• سایز بسیار کم (حدود 2 کیلوبایت)

نقاط ضعف Milligram

• تعداد محدود کامپوننت ها و المان های موجود
• به دلیل بودن تنها منابع محدودی برای آن وجود دارد

Susy

نقاط قوت

• انعطاف فوق العاده برای تولید گرید های پیچیده
• انجام اتوماتیک محاسبات گرید بندی

نقاط ضعف

• تمام نیازهای طراحی یک سایت را پوشش نمی دهد
• هیچ گرید از پیش تعریف شده ای ندارد

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

6 فریمورک کاربردی و مفید css در طراحی سایت

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

• Bootstrap framework
• Material Framework
• Cascade
• Foundation 3 Framework
• Cocise css
• Semantic UI Framework

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

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

• فریمورک EMBER.JS
• کتابخانه METEOR
• فریمورک VUE.JS
• فریمورک BACKBONE.JS
• فریمورک AURELIA
• فریمورک Polymer.js
• فریمورک ANGULAR.JS

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم