بنیاد ZURB: چارچوب CSS رابط کاربری برای یک بخش جلویی پاسخگو

در سال 2010 آژانس طراحی ZURB یک چارچوب CSS با هدف راه اندازی یک سرویس برای آن ایجاد کرد ایجاد نمونه های اولیه را تسهیل می کند e زمان توسعه را کوتاه کنید. برای انجام این کار، بهترین قطعه‌ها، الگوها و قالب‌ها انتخاب شدند تا آنها را در Foundation گرد هم بیاورند، چارچوبی که به عنوان یک پروژه منبع باز در سال 2011 منتشر شد و از آن زمان به بعد برای عموم رایگان است.

Foundation یک فریم ورک جلویی پاسخگو است که از اجزای کارآمد HTML و CSS برای پیکربندی UI تشکیل شده است.رابط کاربری)، قطعه‌ها و قالب‌های مختلف و همچنین افزونه‌های اختیاری جاوا اسکریپت. چارچوب وب دارای یک ساختار ماژول و برای پیکربندی پروژه های قابل دسترسی از دستگاه های مختلف طراحی شده است. با توزیع می شود مجوز MIT و از هر دو قابل دانلود است صفحه اصلی رسمی روشن باشد GitHub. از نسخه 4.0 بنیاد، شرایط کاری اعمال می شود "ابتدا موبایل"، بنابراین از آن زمان ما با کمک چندین ماژول جدید برای بهینه سازی عملکرد و کاهش حجم فایل ها در چارچوب کار می کنیم. علاوه بر نسخه استاندارد Foundation، ZURB انواع دیگری را نیز برای توسعه خبرنامه های ایمیل منتشر کرده است.بنیاد برای ایمیل) و سایت های یک صفحه ای (بنیاد برای برنامه ها).

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

برای Foundation 6.0 شما یک انتخاب بیشتر دارید 40 جزء متعلق به هفت بخش زیر:

• توری: مؤلفه تعیین کننده برای طراحی وب ریسپانسیو، چیدمان انعطاف پذیر Grid با عرض 1200 پیکسل مطابق با استاندارد است. شما همچنین می توانید این ماژول را لغو انتخاب کنید، با این حال سیستم مبنای طراحی یک پروژه وب است که از دستگاه های مختلف قابل دسترسی است و در مقیاس های وضوح متفاوت سازگار است. علاوه بر این، با شروع از نسخه 6.0 امکان انتخاب ماژول "Flex Grid" نیز وجود دارد که با عملکرد بر اساس مدل CSS flexbox (مانند افقی یا عمودی) امکان قرارگیری حتی انعطاف پذیرتر عناصر را فراهم می کند. سازماندهی اشیاء).

• سوالات عمومی : در بین ماژول های عمومی (که به طور رسمی Grid نیز بخشی از آن است) در درجه اول کلاس ها وجود دارد. شناور e دید، که به لطف آن می توانید defiقوانین رفتاری را در مورد موقعیت و دید عناصر فردی تعریف کنید. علاوه بر این، در این بخش، یک مؤلفه برای ایجاد فرم‌ها، و همچنین ماژول تایپوگرافی حاوی قالب‌بندی اولیه برای نوشتار و متن را خواهید یافت.

• کنترل: همه ضروری ترین عناصر تعاملی پروژه وب شما در اینجا موجود است. به عنوان مثال، اینها دکمه هایی هستند که کاربر را با یک کلیک به جای دیگری هدایت می کنند یا عناصر انتخاب شده را می بندند. همچنین ماژول هایی وجود دارد که می توانید اسلایدرها را با آنها ادغام کنید پولسانتی با حالت روشن/خاموش

• جهت یابی: در پیکربندی قسمت جلویی، مطمئناً نمی توان عناصر ناوبری را از دست داد، بنابراین حتی برای اینکه پروژه شما با بنیاد ZURB انجام شود، ماژول های بسیار متنوعی دارید که می توانید با آن تنظیم کنید. نوارهای منو و منوها (کشو، لیست کشویی، محفظه)، مسیرهای پیمایش (breadcrumbs) را اضافه کنید یا شماره را به صفحات اضافه کنید.

• ظرف: کانتینرها فرصتی فوق العاده برای گنجاندن عناصر مختلف مانند متن، تصویر یا فیلم در یک فضای مشترک هستند. در اینجا سبک‌هایی را برای ویجت‌های محتوای کلاسیک مانند منوهای کشویی، برگه‌ها، بخش‌های آبشاری یا دیالوگ‌های مدال پیدا خواهید کرد.

• رسانه ها: در بخش "رسانه" ماژول های چارچوبی را خواهید یافت که برای ترکیب عناصر چندرسانه ای مفید خواهند بود. برای مثال، مؤلفه «Flex Video» از شما پشتیبانی می‌کنددرج فیلم ها و مطمئن می شود که محتوا با اندازه های مختلف نمایشگر و انواع وضوح سازگار است. علاوه بر این، اجزایی برای پیش نمایش تصاویر و همچنین نکات مفیدی برای استفاده از ابزارها وجود دارد.

• پلاگین در: در نهایت می توانید چند افزونه بسیار مفید برای بنیاد ZURB انتخاب کنید که کار با چارچوب وب را برای شما آسان تر می کند. به عنوان مثال، با کتابخانه "Motion UI"، شما این امکان را دارید که یک کتابخانه بسیار مفید را دانلود کنید، حتی اگر فقط برای نوع Sass در دسترس باشد، که باعث می شود ایجاد پاساژهای رابط کاربری و انیمیشن ها نسیمی باشد.

علاوه بر این، قبل از دانلود، می توانید انتخاب کنید که آیا defiبرخی را تمام کن تنظیمات استاندارد برای چارچوب. این گزینه ها شامل گزینه هایی برای تغییر تعداد یا ضخامت ستون ها و حداکثر عرض سیستم Grid و همچنین تنظیمات مختلف رنگ و تعیین جهت متن (از چپ به راست یا راست به چپ) است. اگر می‌خواهید ابتدا چارچوب را بدون مطالعه عملکرد ماژول‌ها آزمایش کنید، می‌توانید Foundation را به‌عنوان نسخه کامل نیز دانلود کنید (تکمیل) یا به عنوان یک نوع پایه سبک تر (ضروری).

اگر از فرصت های ارائه شده توسط CSS راضی هستید و سپس به سادگی استایل ها را در فایل CSS دانلود شده رونویسی می کنید، مطمئناً تصمیم درستی گرفته اید. با این حال، چارچوب بنیاد یک ویژگی خاص دیگر دارد: اساس کد CSS به زبان شیوه نامه Sass نوشته شده است.شیوه نامه های نحوی عالی) که به اصطلاح یک پیش پردازنده برای CSS است. Sass این امکان را برای شما فراهم می کند که روی شیوه نامه کار کنید scss که متعاقباً می‌توان آن‌ها را کامپایل یا به فایل‌های css محبوب تبدیل کرد و سپس توسط مرورگرها خوانده و تفسیر می‌شوند.

اگر از نوع Sass چارچوب ZURB استفاده کنید، از مزایای زیر برخوردار خواهید شد:

• نحو ساده شده (Sass یا CSS)، که نوشتن شیوه نامه را آسان تر می کند

• امکان defiتمام کردن از مدل ها (Mixins) برای ذخیره فرمت های تکرارشونده به صورت مرکزی و ادغام آنها در صورت تمایل

• ترکیبی ساده از شیت های سبک مختلف برای به حداقل رساندن درخواست های HTTP

• استفاده كردن متغیرها و توابع برای تبادل رنگ ها، فواصل، فونت ها و غیره به صورت مرکزی

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

کامپایلر Sass در اصل به زبان روبی نوشته شده است. با این حال، اگر از این زبان برنامه نویسی استفاده نمی کنید، مجبور نیستید آن را برای Sass نصب کنید، زیرا با LibSass جایگزینی خواهید داشت که به زبان C نوشته شده است. گردش کار، یعنی ایجاد تغییرات در کد در Sass و ترجمه خودکار آنها به CSS.

با انتقال از نسخه 5 به بنیاد 6.0، ZURB یک بار دیگر حجم فایل کل فریم ورک را کاهش داده است: با 60 کیلوبایت CSS و 84 کیلوبایت جاوا اسکریپت، Foundation از شهرت یک فریمورک برخوردار است. یکی از ساده ترین پلتفرم های توسعه و بخوانید که وجود دارد. به لطف ساختار ماژولار فوق الذکر و آزادی خاص سفارشی سازی، حتی می توانید اندازه چارچوب را کاهش دهید. در ترکیب با Grid انعطاف پذیر و متفاوت خواصARIA (به عنوان مثال برای جابجایی یک ناوبری صفحه کلید موثر) که توسط ZURB پیاده سازی شده است، می توان شرایط اساسی را که برای تحقق یک پروژه وب که در پلتفرم ها و دستگاه های مختلف سازگار است، ضروری است، کاملاً برآورده دانست. ویژگی‌های ARIA به بهترین وجه مستند می‌شوند و در جایی در دسترس هستند که قصد دارید دسترسی به وب‌سایت خود را به طور قابل توجهی بهینه کنید.

اگر با نسخه Sass چارچوب کار می‌کنید، مطمئن شوید که گزینه‌های خود را برای پیکربندی عناصر طراحی و طرح‌بندی‌هایی که درج می‌کنید گسترش داده‌اید. استفاده از این استایل شیت های ویژه برای تازه کارها به هیچ وجه آسان نیست و نیازمند دوره خاصی از یادگیری است که به طور کلی برای پلتفرم نیز صادق است. من هم همینطور'ادغام اجزای خارجیو همچنین ماژول ها و پروژه های بنیادی در چارچوب دیگری یا در یک CMS بسیار پیچیده است. نقاط ضعف کوچکی که بنیاد ZURB در مقایسه با سایر چارچوب های CSS مانند توییتر بوت استرپ نشان می دهد، تنوع محدود قالب ها و عدم پشتیبانی از نسخه های قدیمی اینترنت اکسپلورر است.

بنیاد ZURB توسعه دهندگان را از اولین نمونه اولیه تا وب سایت آماده برای استفاده همراهی می کند و بیش از همه توسط خود مشخص می شود. بهره وری. اگر متوجه شدید که برخی از مؤلفه‌ها اضافی هستند، می‌توانید بدون تأثیرگذاری بر عملکرد سایر عناصر، آنها را از حالت انتخاب خارج کنید. در نتیجه، چارچوب CSS با یک کد بسیار باریک مشخص می شود که لایت موتیف انتخاب شده توسط ZURB "Mobile First" را برجسته می کند. با هم سیستم گرید بسیار انعطاف پذیر، که می توانید به صورت اختیاری با Sass تطبیق دهید، چارچوب برای توسعه ایده آل است قسمت جلویی پاسخگو که دارای مزیت سرعت بالا در بارگذاری اطلاعات و دسترسی عالی و همچنین تطبیق با اندازه های مختلف صفحه نمایش هستند.

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