سفارشی کردن بوتسترپ

راحت ترین راه سفارشی کردن bootstrap 4

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

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

تعداد عناصری که می توانید آن ها به سلیقه خودتان تغییر دهید خیلی زیاد است. بوتسترپ ۴ هم این امکان را به شما می دهد که تمام این عناصر را سفارشی کنید. از تغییر اندازه gridها تا تغییر رنگ در یک progress bar. هرچند که قسمت customize بوتسترپ بسیار انعطاف پذیر است اما با وجود بیش از پانصد متغییر sass کار به همین سادگی ها هم نیست.
اپلیکیشن Epic Bootstrap یک ابزار بسیار قوی در اختیارتان قرار می دهد که بدون نیاز به نوشتن حتی یک خط کد scss می توانید themeهای جدید بوتسترپ بسازید.

 

 

روش کار بسیار ساده است. وارد Epic Bootstrap شوید و گزینه یLaunch App را کلیک کنید تا وارد قسمت سفارشی سازی شوید. در اینجا در قسمت چپ صفحه المانی را که می خواهید تغییر دهید را انتخاب کنید. در قسمت وسط صفحه بر روی قسمت مورد نظری که دقیقا می خواهید تغییرات در آن ایجاد شود کلیک کنید سپس در قسمت راست صفحه تغییرات مورد نظر را وارد کنید. این تغییرات می تواند شامل هر چیزی باشد. از تغییر رنگ گرفته تا تغییر سایز که به راحتی می توانید تمام جزئیات را تغییر دهید.

 

 

پس از اینکه تمام تغییراتی را که میخواستید را وارد کردید از قسمت بالا سمت راست گزینه دانلود را کلیک کنید و تم بوتسترپ جدید را که خودتان ساخته اید را با نام boosttrap.epic.css را دانلود کنید. از این فایل در پروژه خود استفاده کنید.

 

مزایا و معایب اسفتاده از Epic Bootstrap

مزایا:

  • سرعت زیاد در سفارشی سازی
  • قابلیت تغییر در تمام قسمت ها حتی جزئیات
  • راحتی و سهولت در استفاده
  • امکان مشاهده تغییرات در همان لحظه
  • امکان ساخت تم های مخلفت و نگهداری آن ها به صورت فایل جداگانه

معایب:

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

 

 

استفاده از Epic Bootstrap بسیار هیجان انگیز است و حداقل برای یک بار هم که شده ارزش امتحان کردن را دارد.

 

 

نویسنده: سعید پناهی

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

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

css-custom-property

تعریف و استفاده از متغیرها در CSS

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

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.