چند هفته پیش معروف چارچوب بنیاد نسخه چهارم خود را منتشر کرد. اگر هرگز نام Foundation را نشنیده اید، ما شما را در استفاده از این چارچوب پاسخگو راهنمایی می کنیم.

از آنجایی که نسخه 3 Foundation از ابتدا با استفاده از SASS ساخته شد – یک پیش پردازشگر CSS که به نوشتن CSS کارآمدتر کمک می کند – این نسخه جدید همچنین سازگار با موبایل است و ویژگی های زیادی را در شبکه خود ارائه می دهد که شما نمی توانید از چارچوب های دیگر دریافت کنید.

بیایید به بنیاد شیرجه بزنیم و ببینیم چرا اینقدر محبوب است…

شبکه

بنیاد از یک شبکه تودرتو 12 ستونی استفاده می کند که با هر اندازه صفحه سازگار می شود، اگر قبلاً از شبکه ها استفاده کرده اید، همه اینها باید برای شما بسیار آشنا باشد. همه div ها در Foundation از box-sizing: border-box استفاده می کنند تا حاشیه ها و padding ها بر عرض و ارتفاع عنصر تأثیر نگذارند و ریاضیات را برای ما کمی آسان تر می کند. اما نکته شگفت انگیز در مورد شبکه بنیادی این است که شما در واقع 2 شبکه دریافت می کنید، یک شبکه بزرگ برای زمانی که صفحه نمایش بزرگتر از 768 پیکسل در عرض است و یک شبکه کوچکتر که می توانید به همین سادگی کنترل کنید. برای این منظور Foundation از کلاس های small-# و large-# استفاده می کند، مانند:

<div class="row">
 <div class="small-3 large-4 columns">Lorem Ipsum</div>
 <div class="small-3 large-4 columns">Lorem Ipsum</div>
 <div class="small-6 large-4 columns">Lorem Ipsum</div>
</div>

در این کد ما یک ردیف ایجاد کردیم که در آن 3 div وجود دارد که وقتی مرورگر عریض تر از 768 پیکسل است، دقیقاً به همان اندازه هستند، اما وقتی کوچکتر است، همانطور که توسط آن کلاس کوچک در div ها مشاهده می کنید، آخرین مورد نیمی از آن را اشغال می کند. صفحه نمایش در حالی که دو مورد دیگر هر کدام 25٪ را اشغال می کنند، این به شما کنترل بسیار زیادی بر ظاهر وب سایت ما می دهد. روی تمام صفحه نمایش

بنیاد همچنین به شما امکان می دهد یک ستون را افست کنید، منظور من این است که شما می توانید یک ردیف با 2 ستون داشته باشید که عرض آنها فقط 3 ستون است، اما می توانید ردیف دومی را که به سمت راست شناور است، جبران کنید و برای این کار از بزرگ- استفاده می کنیم. کلاس افست یا کلاس افست کوچک:

<div class="row">
 <div class="large-3 columns"></div>
 <div class="large-3 large-offset-6 columns">3, offset 6</div>
</div>

شبکه بلوک

شبکه بلوک فقط یک چیز اضافی خوب است، این راهی است که شما می توانید محتوای یک لیست را در شبکه تقسیم کنید، برای زمانی مفید است که می خواهید این بخش خاص از وب سایت شما بدون توجه به اندازه آن به طور مساوی فاصله داشته باشد. مرورگر. این نوع شبکه از کلاس‌های شبکه بلوک کوچک و شبکه بلوک بزرگ استفاده می‌کند، اگر فقط اولین مورد را تنظیم کنید، شبکه فاصله مورد نظر را بدون توجه به اینکه درگاه دید چیست، حفظ می‌کند، اما اگر فقط از بلوک بزرگ استفاده کنید. کلاس grid زمانی که viewport به نقطه شکست 768px برسد، آیتم های شبکه روی هم چیده می شوند روی روی هم، همیشه می‌توانید با استفاده از هر دو این کلاس‌ها کنترل بیشتری در دست بگیرید، مانند:

<ul class="small-block-grid-2 large-block-grid-4">
 <li><img src="https://www.webdesignerdepot.com/2013/06/using-the-foundation-framework/image1.png"></li>
 <li><img src="image2.png"></li>
 <li><img src="image3.png"></li>
 <li><img src="image4.png"></li>
</ul>

با استفاده از این، تصاویر بدون توجه به اندازه، به طور مساوی قرار می گیرند. وقتی نمای پورت بزرگتر از 768 پیکسل باشد، فقط یک ردیف را اشغال می کنند و وقتی کوچکتر از آن باشد، دو ردیف را با 2 تصویر اشغال می کنند.

ناوبری اصلی

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

<nav class="top-bar">
 <ul class="title-area">
 <li class="name">
 <h1><a href="https://www.webdesignerdepot.com/">Website Title</a></h1>
 </li>
 <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 </ul>
 <ul class="right">
	 <li><a href="#">Item 1</a></li>
	 <li><a href="#">Item 2</a></li>
	 <li><a href="#">Item 3</a></li>
	 <li><a href="#">Item 4</a></li>
	</ul>
</nav>

این بیت HTML یک نوار ناوبری ساده ایجاد می کند که عنوان وب سایت را دارد روی سمت چپ و سپس روی سمت راست چهار آیتم منو دارد. همچنین توجه داشته باشید که هنگامی که نمای کوچکتر از 768 پیکسل باشد، این منو با یک نماد لیست جایگزین می شود که این منو را پاسخگو می کند. اگر می‌خواهید با اسکرول کردن به پایین، موقعیت این شبکه ثابت شود page شما فقط باید آن را در یک div با یک کلاس بپیچید درست شد. برای افزودن کشویی به پیمایش خود، فقط باید چیزی شبیه به این را به مکانی که می‌خواهید فهرست کشویی خود را اضافه کنید:

<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
	<ul class="dropdown">
		<li><label>Dropdown Menu</label></li>
		<li><a href="#">Sub menu Item 1</a></li>
		<li><a href="#">Sub menu Item 1</a></li>
		<li><a href="#">Sub menu Item 3</a></li>
	</ul>
</li>

همچنین این امکان وجود دارد که با افزودن یک خط عمودی خاکستری به آیتم فهرست خود یک تقسیم کننده اضافه کنید، برای این کار فقط باید یک آیتم لیست را با کلاس قرار دهید. تقسیم کننده بین دو مورد لیستی که می خواهید تقسیم کنید.

دکمه ها

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

<!-- Size Classes -->
<a href="#" class="button">Default Button</a>
<a href="#" class="tiny button">Tiny Button</a>
<a href="#" class="small button">Small Button</a>
<a href="#" class="large button">Large Button</a>

<!-- Color Classes -->
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Success Button</a>
<a href="#" class="button alert">Alert Button</a>

<!-- Radius Classes -->
<a href="#" class="button radius">Radius Button</a>
<a href="#" class="button round">Round Button</a>

<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>

برای ایجاد یک دکمه کشویی ساده، فقط باید کلاس کشویی را بعد از آخرین کلاس اضافه کنید، مانند:

<a href="#" class="button dropdown">Dropdown Button</a>

تایپوگرافی

تایپوگرافی در Foundation از Helvetica Neue استفاده می کند و همچنین از em به جای پیکسل استفاده می کند تا تطبیق نوع شما در همه پلتفرم ها و نقاط شکست آسان تر شود. استفاده از هدرها کاملاً توضیحی است. شما فقط به یک h1 و متنی که در آن می خواهید نیاز دارید، اما کلاس های دیگری نیز وجود دارند که می توانند هنگام کار با تایپوگرافی در Foundation مفید باشند.

<!-- subheader -->
<h1 class="subheader">h1.subheader</h1>
<!-- Segment header, the text inside the small tag will act like a sub header -->
<h1>h1. <small>Smaller</small></h1>
<!-- Use .circle or .square to change the style of the bullets in unordered lists -->
<ul class="disc">
 <li>List item</li>
</uL>
<ul class="square">
 <li>List item</li>
</uL>
<!-- create an inline list-->
<ul class="inline-list">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
</ul>

همانطور که می بینید، هنگامی که صحبت از تایپوگرافی به میان می آید، Foundation به ما کمک های اولیه و سپس برخی کلاس های اضافی را برای رفع تمام نیازهای ما ارائه می دهد.

سایر اجزا

اگر این نمایش چارچوب بنیاد اشتهای شما را برای یادگیری بیشتر و شروع ساختن با Foundation برانگیخته است، باید واقعاً نگاهی به مستندات بیندازید زیرا Foundation همچنین مؤلفه‌های CSS اضافی مانند:

• جعبه های هشدار
• پانل ها
• جداول قیمت گذاری
• نوارهای پیشرفت
• جداول
• ریز عکسها
• فیلم فلکس

و همچنین برخی جاوا اسکریپت کمکی مانند:

• پاکسازی
• کشویی
• جویراید
• ماژلان
• مدار
• آشکار ساختن
• بخش
• نکات ابزار

همانطور که می بینید، بنیادهای زیادی برای کاوش وجود دارد و من قویاً به شما توصیه می کنم که به تمام ویژگی های CSS و جاوا اسکریپت آن نگاه کنید.

نتیجه

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

آیا از Foundation برای پروژه ای استفاده کرده اید؟ چه ویژگی هایی برای شما مفیدتر بود؟ در نظرات به ما اطلاع دهید.