Bootstrap 4 RTL

پنج شنبه , 6 , دی , 1397 | زاره آوانسیان | بدون دیدگاه

Bootstrap یکی از بهترین فریمورک‌های CSS برای طراحان وب سایت هستش که امکانات مختلفی رو ارائه می‌کنه و طرفداران زیادی در دنیا داره و انصافا خیلی جاها کار راه اندازه البته یکی از مشکلات بزرگش عدم پشتیبانی از زبان‌های راست به چپ یا RTL هستش که باعث ایجاد دردسر برای طراح وب سایت میشه و زمان زیادی رو باید برای تبدیل کد‌های سی اس اس از LTR به RTL صرف کرد. البته دوستان وب دولوپر قبلا زحمت کشیدن و یه سری راه کار برای RTL کردن بوت استرپ ارائه دادن اما یه مشکل اساسی که اکثرا دارن حجم زیاد css در حالت نهایی هستش که به دلیل این هست که ابتدا فایل اصلی css بوت استرپ رو در پروژه لود می کنند و سپس فایل css اصلاحیه‌های RTL رو بر روی قبلی override می‌کنند که باعث حجیم شدن پژروه طراحی سایت میشه و سرعت لود شدن سایت کم می‌شود و به بهینه سازی سایت لطمه میزند.

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

بوت استرپ ۴ راست به چپ ( RTL )

پروژه بوت استرپ راست به چپ در این مخزن گیت‌هاب قرار گرفته و شما میتونید از روش های زیر دریافتش کنید

۱: دریافت مخزن از github

git clone https://github.com/z-avanes/bootstrap-4-rtl

یا نصب با npm

npm install @z-avanes/bootstrap-4-rtl

 

برای rtl شدن کافیه کلاس .rtl رو به هر تگ html که دوست دارید بدین و به این ترتیب داخل اون تگ به صورت rtl درمیاد

شما می‌توانید با اعمال تغییراتی در فایل‌های sass خروجی رو به دلخواه خودتون تغییر بدین!

مثلا شما شاید نیاز به تمامی امکانات نداشته باشین و فقط چیزهای مشخصی از بوت استرپ رو بخواهید که در این حالت می‌توانید در فایل scss/bootstrap.scss خط های رو که نیاز ندارید کامنت کنید تا در فایل css خروجی قرار نگیرد و در نتیجه حجم فایل کاهش پیدا کند و سرعت سایت شما بهینه تر شود.

یا مثلا اگر نیاز به تغییر در رنگ‌ها و اندازه‌ها و متغییر‌های مختلفی داشته باشید که در مسیر scss/_variables.scss می‌توانید تمامی آنها رو پیدا کنید باید در فایل scss/_custom-variables.scss آنها را override کنید بدین ترتیب در زمان پردازش sass این مقادیر به جای مقادیر پیش‌فرض مورد استفاده قرار میگیرد و خروجی برای شما شخصی‌سازی می‌شود.

اگر هم نیاز به افزودن موارد و استایل‌های جدید داشتین می‌توانید آنها را در scss/_custome-style.scss وارد کنید.

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

 

بدون دیدگاه

دیدگاه خود را بیان کنید ...


up