5 گزینه برتر راه انداز

Bootstrap در همه جا است ، اما همیشه ابزار مناسبی برای کار نیست. در اینجا گزینه های بسیار خوبی وجود دارد!


اگر این روزها کد منبع جلد یک وب سایت را به طور تصادفی بررسی کنید ، احتمال دارد که زیر Bootstrap را پیدا کنید. همه ما به مفاهیمی مانند مایع ظرف ، ردیف ، col-sm-6 و غیره عادت کرده ایم که تصور اینکه هر سبک دیگری از توسعه انتهای جلویی حتی ممکن است دشوار است. بنابراین بنابراین وقتی ما باید پروژه بعدی را بسازیم ، ناخودآگاه به Bootstrap می رسیم. به گفته این محبوبیت باعث نمی شود Bootstrap مناسب همه پروژه ها و نیازها باشد.

در واقع ، برای جلوهای کاملاً لاغر ، بارگیری همه موارد Bootstrap CSS و JS می تواند نفخ بزرگی ایجاد کند.

این مقاله دو هدف دارد:

  1. گزینه های زنده غیر Bootstrap مانند Bootstrap را ارائه دهید
  2. توضیح دهید که چرا ممکن است بخواهید این گزینه ها را از طریق Bootstrap در نظر بگیرید

من فکر می کنم بخش توضیحات واقعاً مهم است زیرا در بیشتر موارد ، مردم حتی نمی دانند که مشکلی دارند یا اینکه با انتخاب بوت استرپ کار خود را سخت تر می کنند. در آخر ، توجه داشته باشید که این یک پست ضد Bootstrap نیست. من Bootstrap 4 را دوست دارم و هر وقت ممکن هست از آن استفاده می کنم. اما ، بنابراین ، من یک توسعه دهنده شخصی هستم که باید به استفاده از محبوب ترین راه حل فکر کند. همچنین ، من خود برنامه نویس UI نیستم ، بنابراین هنگام ساختن جلوی من نگران خیلی چیزها نیستم.

و با این کار ، اجازه دهید نگاهی به گزینه های موجود بیندازیم.

شبکه Flexbox

برای یک دقیقه در مورد آن فکر کنید: بزرگترین دلیلی که شما شروع به استفاده از Bootstrap کرده اید و هنوز هم از آن استفاده می کنید سیستم شبکه آن است. مطمئناً بعضی از کلاسها به ردیف ، col-md-6 و غیره عادت کردند ، اما اکنون طبیعت دوم این است که از نظر سطرها ، ستونها ، جابجایی ها و غیره به یک چیدمان فکر کنید..

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

اگر بله ، می توانستید کارهای بهتری انجام دهید شبکه Flexbox.

Flexbox Grid همانطور که از نام آن پیداست ، یک سیستم شبکه ای مبتنی بر CSS است Flexbox خواص با این حال ، بر خلاف تکنیک CSS ، تمام پیچیدگی ها به زیبایی از بین می روند ، به طوری که شما فقط روی قرار دادن عناصر به روشی که می خواهید تمرکز کنید. بهترین بخش این است که تمام کد ها و نام های کلاس از آنچه در Bootstrap 4 می خواهید تقلید می کنند ، به این معنی که جابجایی بین این دو ابزار به اصطکاک ذهنی صفر نیاز دارد. به عنوان مثال ، در اینجا کد برای “فضای اطراف” در Flexbox Grid به نظر می رسد:

دور و بر

دور و بر

دور و بر

فایل CSS کمینه شده برای این سیستم شبکه فقط 10.7 کیلوبایت است که در اندازه بارگیری نهایی ، صدها کیلوبایت را ذخیره می کند. این روزها Flexbox Grid مورد علاقه من است زیرا من نمی خواهم برای سفارشی سازی کامل آن با Bootstrap بجنگم. من دوست دارم با عناصر وانیل شروع کنم و خودم از آنها سبک بگیرم ، هر جا که لازم باشد از Flexbox Grid استفاده می کنم.

فرا گرفتن Flexbox در اینجا ، آنلاین.

PureCSS

خوب نیست اگر Bootstrap به ماژول ها تقسیم شود و شما فقط می توانید ماژول مورد نیاز خود را وارد کنید?

خوب, PureCSS پیش رفته و دقیقاً همین کار را کرده است – این مجموعه ای از ماژول ها است که مناطق مختلف عملکردی یک وب سایت را پوشش می دهد. می توانید یک یا همه بارگیری کنید ، اما اندازه بارگیری از 3.7 KB تجاوز نمی کند!

بله شما آن را درست خواندید.

همه ماژول ها در هنگام جمع شدن و درآوردن آنها 3.7 کیلوبایت است ، هرچند که بصورت جداگانه مقدار بیشتری دارند. ماژول شبکه فقط 0.8 KB است ، در حالی که ماژول Base 1.0 KB است. تیم پشت PureCSS می گوید که کاملاً با دستگاه های تلفن همراه در ذهن ساخته شده است ، بنابراین هر خط CSS قبل از گنجاندن با دقت مورد بررسی قرار می گرفت..

بیایید بگوییم که شما فقط به ماژول شبکه و فرم نیاز دارید. خوب ، فقط این دو (به همراه ماژول Base) را بارگیری کنید ، و کمتر از 3.4 KB انجام می شود! اگر قصد استفاده از آنها را ندارید ، نیازی به درج CSS از دکمه ها ، جداول و ماژول های منو نیست.

PureCSS کلاس های خود را دارد ، اما کد حاصل از Bootstrap را که ممکن است شما از آن استفاده کنید تقلید نمی کند:

لورم اپیسوم

Dolor Sit Amet

آزمایشگاه موافق

تقدیرنامه

متوجه خواهید شد که هیچ شبکه 12 ستونی وجود ندارد. PureCSS سیستم شبکه خود را دارد که مشخص می کند یک ستون از چه پهنا باید طول بکشد. بنابراین ، خالص-u-lg-1-4 به این معنی است که این عنصر باید 1/4 یا 25٪ از عرض موجود را روی صفحه های بزرگ بگیرد. عرض به عنوان مضرب 1/5 نیز موجود است.

در کل ، PureCSS ابزاری برای آزادسازی و شگفت انگیز CSS (چارچوب؟) است که می توانید در صورت لزوم آن را انتخاب و انتخاب کنید. گفته می شود ، این امر با مقدار نسبتاً منحنی خرید و یادگیری همراه است زیرا باید یک روش جدید (کمی متفاوت) برای انجام کارها بیاموزید.

PureCSS کلاس های خاص و یک ظاهر طراحی شده پیش فرض نیز دارد ، بنابراین با این تفاوت ، با Bootstrap نیز تفاوت چندانی ندارد.

محدودیت

محدودیت چارچوب نوعی انسان عجیب در این لیست است. بله ، این یک چارچوب برای ایجاد رابط کاربری است ، اما هدف آن انواع خاصی از UI است: مدل سازی.

مواقعی وجود دارد که شما برای نشان دادن عملکرد محصول باید جلوی خود را توسعه دهید. روش ایده آل برای انجام این کار ، البته این است که یک طراح / توسعه دهنده UI درگیر شوید و مدل های ایجاد شده را در یکی از ابزارهای پیشرفته سیم کشی (Moqups ، Blasmic و غیره به ذهن بیاورید). صفحات کاملاً پیکسل ، طرح رنگی براق و به خوبی انتخاب شده و صفحات برای مشارکت ، بررسی ، نظرات و غیره باز می شوند..

اما زندگی واقعی ایده آل نیست ، و اغلب شما تنها مرد کار هستید و باید کلاه های خود را بپوشید و کار را انجام دهید. در آن زمان چارچوبی را می خواهید که:

  • به شما امکان می دهد تا در HTML / CSS کدگذاری کنید
  • سبک وزن است
  • دارای مجموعه گسترده ای از مؤلفه های اساسی است
  • دارای یک زبان سبک مناسب و منسجم است
  • در صورت امکان ، شبیه به صدای “خاکستری” طراحی ویندوز است
  • یادگیری آسان است
  • مقداری پیش پردازنده CSS داخلی دارد

Zimit تمام این جعبه ها را بررسی می کند. این اندازه فقط 84 کیلوبایت است و طیف گسترده ای از مؤلفه ها را انتخاب کنید. در اینجا مثالهایی وجود دارد که به نظر من بسیار جذاب است ، زیرا رمزگذاری آنها به تنهایی زمان زیادی را می طلبد.

نمای درختی

خرده نان

زبانه ها

چیزهای خوب دیگری برای کشف وجود دارد. آنها را بررسی کنید اینجا.

بیایید ببینیم کد چگونه به نظر می رسد. در اینجا نحوه استفاده از سیستم شبکه در Zimit آورده شده است:

4 ستون
4 ستون

4 ستون
4 ستون

“c” در اینجا مخفف “ستون” است ، بنابراین “c4” به معنای ستونی است که شامل چهار واحد است (شبکه 12 اندازه است ، دقیقاً مانند Bootstrap). به نظر من بسیار شبیه به بوت استرپ و بسیار بصری است.

در کل ، Zimit یک چارچوب کامل و آسان برای توسعه نمونه های اولیه UI است که پاسخگو هستند و به سرعت خوب به نظر می رسند. این بهتر از Bootstrap است (وقتی نوبت به نمونه سازی می رسد) زیرا Bootstrap بارگیری بسیار بزرگتری است و طراحی نتیجه آن بسیار خوب است.

HTML KickStart

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

HTML KickStart جایگزین ارائه می دهد.

به سادگی قرار دهید؛ این مجموعه ای از مؤلفه های واقعاً براق است که می توانید به راحتی پروژه های خود را رها کنید و زمان توسعه را به طرز چشمگیری کاهش دهید. در اینجا چند مؤلفه خوب که پیدا کردم:

رها کردن

دکمه ها

زبانه ها (محور و با نماد)

تحقق

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

متریال سازی دقیقاً شبیه Bootstrap است – سیستم شبکه 12 نقطه ای ، جبران کننده ها و اجزای آشنا مانند فرم ها ، کارت ها و غیره. با این حال ، این ویژگی های خاصی دارد که می تواند برای بسیاری جذاب باشد..

فشار کشش

ویژگی فشار / کشش Materialize CSS به شما امکان می دهد ستون ها را تغییر دهید. این یادآور استاندارد جدید CSS Grid است ، جایی که طرح با ترتیب عناصر متفاوت است.

این شکاف 7 ستونی پهن است که توسط ستونهای 5 ستونی به سمت راست هل داده می شود.
5 ستون پهن با 7 ستون به سمت چپ کشیده شده است.

این نتیجه زیر است:

توجه خواهید کرد که ستون ها مکانهایی را تغییر داده اند که شاید در CSS سنتی مبتنی بر بوت استرپ غیرقابل تحقق باشد.

موارد خوب JavaScript

چند ویژگی جاوا اسکریپت و جلوه های کاملاً جذاب وجود دارد. راهنمای ابزار ، نان تست (اعلان های زودگذر مانند Android) ، Parallex ، Pushpin و غیره ، برخی از آنها هستند. یکی از جلوه های بسیار شگفت انگیز که من دوست داشتم FeatureDiscovery است که در اصل به شما امکان می دهد عنصری را در صفحه در مورد برخی از رویدادها (مثلاً دکمه مطبوعات) برجسته کنید تا توجه کاربر به آن عنصر جلب شود. توصیف آن به صورت کامل با کلمات دشوار است ، بنابراین به آدرس https://materializecss.com/feature-discovery.html مراجعه کنید تا ببینید منظور من چیست.

در کل ، Materialize یک جایگزین عالی برای Bootstrap یا برای کسانی است که به دنبال اتخاذ یک چارچوب کامل CSS متریال هستند..

نتیجه

Bootstrap مترادف با طراحی پاسخگو است. این بوت استرپ بود که اصطلاح “طراحی اول موبایل” را محبوب کرد و نشان داد که چگونه می توان این کار را انجام داد. اما در حالی که بوت استرپ کار را بیشتر از زمان انجام می دهد ، فقط انجام کار همیشه کافی نیست. اگر احساس می کنید Bootstrap شما را محدود می کند و نیازهای شما ویژه است ، یکی از گزینه های ذکر شده در اینجا کمک خواهد کرد. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map