در حال بارگذاری صفحه...
خب دانشجویان عزیز امروز میخواهیم درباره برترین فریمورکهای css با شما صحبت کنیم. در جلسه قبلی طراحیسایت با مفهوم و تگ های html، آشنا شدید و گفتیم که html یک زبان نشانهگذار برای ایجاد ساختار و قالب صفحات وب است.
Css هم یکی دیگر از زبانهای نشانهگذار تحتوب است که با دستورات آن میتوانیم خصوصیات ظاهری صفحه وبسایت را تعیین کنیم یعنی مشخص میکنیم هر عنصر چه خصوصیات ظاهری داشته باشد.
خب؛ کسی درباره کلمه فریمورک مطلبی خوانده یا تعریفی از آن را شنیده است؟ لطفا یک قاب عکس یا اسکلتبندی ساختمان را تصور کنید. کاری که این دو انجام میدهند چیست؟ معلوم است استاد: هر دوی آنها، کمک میکنند تا محتویاتی که داخلشان قرار می گیرد، ساختار منظمتر و بهتری داشته باشند! آفرین درست است. فریمورکها در برنامهنویسی نیز دقیقا همینکار را برای ما انجام میدهند. یعنی کمک میکنند تا ما کدنویسی راسریعتر، بهتر، منظمتر و با تمرکز بیشتر انجام دهیم.
چون امکانات بسیار زیادی در فریمورکها تهیه و برنامهنویسی شده است که باعث میشود شما کارهای روتین و ابتدایی یک پروژه را رد کنید و مستقیم به سراغ انجام کارهای اصلی پروژه بروید و این امر سبب میشود تمام تمرکز خود را بر روی پروژه بگذارید و به هیچ چیز دیگری فکر نکنید. به همین خاطر سرعت کدنویسی شما بیشتر میشود.
اگر بخواهید از فریمورکی استفاده کنید که هم برای html کاربرد داشته باشد و هم Css، از فریمورکهایی که نام میبرم استفاده کنید:
این فریمورک با سیستم شبکهبندی که برای تقسیم صفحه دارد بهترین گزینه برای طراحی صفحات ریسپانسیو است که توسط
توسعهدهندگان شبکه اجتماعی Twitter ساخته شد. در واقع از بین 100 هزار وبسایت برتر دنیا، بیش از 20% آنها با بهکارگیری Bootstrap تولید شدهاند و این عدد گویای میزان محبوبیت، انعطافپذیری و قدرت این فریمورک است.
از دیگر قدرتهای آن میتوانم به رایگان و متنباز بودن آن اشاره کنم. دانشجویان عزیز آخرین نسخه از فریمورک بوتاسترپ، نسخه 3 آن است ولی تیم پشتیبانیکننده از Bootstrap در تلاش است تا نسخه ی V4 این فریمورک را به بازار عرضه کنند. آنها در این نسخه علاوه بر بهینهتر شدن فریمورک، مدرن شدن آن هم مد نظر قرار دادهاند.
یک رقیب سرسخت برای بوتاسترپ وجود دارد که با داشتن قابلیت شبکه 12 ستونی برای تقسیم صفحه، این امکان را بهوجود آورده تا یک سایت در هر دستگاهی بدون تغییر اندازه نشان داده شود. نام شرکت سازنده این فریمورک متنباز و رایگان، ZURB نام دارد. هستهی اصلی Foundation بر اساس فریمورکهای وبی طراحی شده است که برای تولید وبسایتها، قالبهای ایمیل و همچنین فریمورکها مجزا برای تولید اپلیکیشنهای پیچیده و دینامیک، ریسپانسیو طراحی شده و پایهی اصلی آن با استفاده از Angular تولید شد.
کل این فریمورک تقریباً از ۴۰۰ خط کد تشکیل شده است و به دلیل ترکیبی از کاربرد ساده و انواع ویژگیها، گزینه مناسبی برای مبتدیان است. ویژگیهای این فریمورک شامل طراحی برای موبایل، سیستم گرید، واکنشگرا بودن، تعریف عناصر مختلف داخل صفحهوب و همچنین یکسری استایلهای پیشفرض برای فرمها، جداول و دکمهها میباشد.
خب عزیزان من، اگر فقط قصد استفاده از فریمورکهای css را دارید میتوانید برای استفاده بهتر، از فریمورکهایی که معرفی میکنم بهره ببرید:
اگر نمیخواهید تمام عناصر سایت را از اول بسازید، میتوانید از کامپوننتهای آماده فریمورک Semantic UI استفاده کنید. این فریمورک خصوصیات جالبی مانند تنظیم عناصر، انیمیشنهای سهبعدی و ایجاد کامپوننتهای مختلف UI را داراست و همچنین روی سادگی مفاهیم تمرکز کرده تا جایی که ممکن است نام کلاسها نزدیک به نحوه صحبت کردن یک شخص نامگذاری شده باشد. Semantic UI به خوبی با سایر فریمورکها مثل React یا Angular ادغام میشود.
فریمورکی با حجم کمتر از ۴ کیلوبایت است که توسط شرکت یاهو ساخته شده و با رعایت اصول سئو و داشتن مجموعهای از ماژولهای ریسپانسیو، بدون نیاز به نصب وابستگیها میتوانید از آن استفاده کنید. برای کار کردن با سایهها و رنگهای روشن انتخاب خوبی است که میتوانید برای بهبود رابط کاربری، این فریمورک را در کنار بوت استرپ استفاده کنید و از قدرت هر دو بهرهمند شوید.
توصیه ما به توسعه دهندگان وردپرس استفاده از این فریمورک است که با کمک قابلیت theme آن، میتوانید ظاهر اختصاصی سایت خود را طراحی کنید. فریمورکی سبک و ماژولار که اجازه ساخت یک سایت با سرعت بالا را در اختیارتان قرار می دهد. به توسعه دهندگان وردپرس استفاده از UIKit توصیه میشود چون با کمک قابلیت theme آن، می توانند ظاهر اختصاصی سایت خود را طراحی کنند تا ظاهر سایت خود را در موبایل، تبلت، لپ تاپ و PC حفظ کنند.
این فریمورک به خاطر Cross Brower بودن، سایت را در تمامی مرورگرها به درستی رندر و اجرا میکند و بار اضافهای به پروژه نمی دهد. پشت Materialize CSS شرکت گوگل قرار دارد و یک کتابخانه طراحی رابطکاربری است که به احتمال زیاد شماها را وسوسه میکند تا آن را امتحان کنید. به خاطر طراحی ریسپانسیوی که دارد با تغییر ابعاد، صفحه نمایش ظاهر سایت بههم نمیریزد.
Bulma یک فریمورک واقعی از جنس CSS است. این چارچوب جدید توانسته جای خود را میان فریمورکها باز کند. یکی از دلایل اصلی که این فریمورک به بهترین چارچوب CSS تبدیل شده است، خوانایی عالی در کدهاست. Bulma یک چارچوب مبتنی بر Flexbox بوده که با رویکرد موبایلمحور طراحی شده است. FlexBox یکی از ماژولهای CSS است که در طراحیهای واکنشگرا (Responsive) کارایی زیادی دارد؛ چرا که با چیدن آیتمها درون یک سطر یا ستون به طور خودکار عناصر طراحی را با اندازهی صفحه منطبق میکند.
این فریمورک بر سفارشسازی کدها به شدت تمرکز دارد. بنابراین یکی از برترین فریمورکهای CSS برای کسانی است که انعطافپذیری و منحصر به فرد بودن را در اولویت قرار میدهند. Tailwind Cssخصوصیات اساسی مثل اندازه، رنگ و حاشیه را در اختیارتان قرار میدهد.
خب دانشجویان محترم من شما را با برترین فریمورکهای Css آشنا کردم. امیدورام بحث امروز برای شما شیرین بوده باشد و از مطلبهای گفته شده لذت برده باشید اما به عنوان حرف آخر میخواهم به شما بگویم بخاطر محدود بودن وقت کلاس نمیتوانم تمامی مباحث طراحی سایت را به صورت کاربردی برای شما بازگو کنم اگر قصد دارید به صورت حرفهای خود را برای طراحی سایت آماده کنید یک منبع خوب برای آموزش به شما معرفی میکنم و آن هم آموزش html css در سایت درسمن است.
اگر هم قصد یادگیری فریمورک بوتاسترپ را داشته باشید این سایت با بیانی شیرین این فریمورک را آموزش داده است. همچنین برای یادگیری کامل htm ،css ،Bootstrap یک دوره پروژهمحور به صورت رایگان قرار داده تا شما تمامی مطالبی را که یاد گرفتهاید در یک برنامه کاربردی ببینید و دانش خود را درباره آنها به چالش بکشید؛ موفق باشید.
هنوز اینجا کامنتی ثبت نشده
شما تا به حال با پیش پردازنده های css کار کرده اید؟ در این مقاله بایکی از پیش پردازنده های css به نام sass آشنا می شوید،می خواهیم بدانیم sass چیست و چه کاربردهایی دارد؟
