menu

ابزار های توسعه دهنده ی مدرن وب

Zurb foundation

پنجشنبه 18 شهریور 1395

در ادامه ی فصل های قبل، این دفعه سراغ یکی دیگه از front-end framework ها میریم.

Zurb foundation، یکی دیگه از فریم ورک های front-edn هست که خیلی هم شبیه به بوت استراپ و HTML5 Boilerplate عمل میکنه. در واقع اگه بخوام دقیق تر بگم، پایه ی این فریم ورک خودش بر اساس HTML5 Boilerplate نوشته شده، و واقعا یه ابزار فوق العاده است. (از نظر شخصی، من این فریم ورک را بیشتر از Bootstrap دوست دارم و به نظرم کار باهاش حرفه ای تر از Bootstrap هست)

این فریم ورک، مثل بوت استراپ، کامپوننت ها و CSS ها و جاوا اسکریپت های زیادی در اختیار شما میزاره که میتونید با اون ها وب اپلیکیشن های خودتون را بنویسید.

و البته باید اضافه کنم که ساختار کدهای Foundation بر اساس طراحی ریسپانسیو و البته Fluid طراحی شده.

برای شروغ کار، مثل فریم ورک های قبلی، یه سری به وب سایت Foundation میزنیم و میریم که این فریم ورک را دانلود کنیم.

و روی دکمه ی دانلود کلیک میکنیم

همونطور که میبینید، Foundation به ما چند نوع دانلود مختلف پیشنهاد میده. حالت اول Complete هست که توی اون به ما یک پک کامل از تمام کامپوننت ها و پلاگین ها و... Foundation ارائه میده. نسخه ی بعدی هم نسخه ی Essentional هست که به گفته ی خود Foundation، نسخه ی سبک تری هست و یه سری از چیزای ضروری توش هست و یه سری از چیزای غیر ضروری توش نیس!

نسخه ی بعدی نسخه ی Custom هست، که البته در ادامه ی صفحه ی دانلود، شما میتونید خودتون شخصی سازی کنید که چه کامپوننت ها، CSS ها و ابزارهایی را میخواهید و کدوم ها را نمیخواید و Foundation هم در نهایت بسته به شخصی سازی شما، یه نسخه به شما تحویل میده (دقیقا عین همون شخصی سازی که توی Bootstrap بود) و آخرین گزینه هم Sass هست، که در فصل های آینده که درباره ی Sass صحبت کردم، توضیح خواهم داد که این گزینه چیه

من ابتدا نسخه ی کامل را دانلود میکنم (Complete) و اون را از حالت فشرده خارج میکنم.

همونطور که میبینید ساختارش خیلی شبیه به HTML5 Boilerplate هست (خب ناسلامتی بر اساس HTML5 Boilerplate نوشته شده!)

بریم سراغ بررسی این فریم ورک. اگه فایل index.html را توی یه ویرایشگر بازکنید میبینید که خیلی متن توشه! که البته یبشترش واسه اینه که صفحه خالی نباشه (!) و فقط یه سری متن هستند

برای راحتی کار، و البته شروع، بیاید تمام متن درون body را پاک کنیم تا یکم فضا خلوت تر بشه

یعنی اینجوری بشه!

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
<body>
    
</body>
</html>

بریم سراغ بررسی کد های درون head

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

این دو خط را قبلا هم توی HTML5 Boilerplate دیده بودیم. دوباره سریع اشاره میکنم بهشون. اولی کاراکتر انکدینگ (character encoding) صفحه را مشخص میکنه و دومی هم میگه واسه ی پردازش صفحه، چه موتوری اون را render کنه

خط های بعدی

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>

هستند که اولی واسه اینه که سایت ما توی موبایل درست نمایش داده بشه و ریسپانسیو باشه و دومی هم عنوان صفحه ی ما هست

کد های بعدی هم

<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">

هستند. فک کنم این دو تا کد مهم ترین کدهای head ما باشه. این دو خط، دو تا فایل css را وارد صفحه ی ما میکنه. اولیش foundation.css هست، که css های خود فریم ورکه ما هست و دومی app.css که یه فایل خالی هست تا ما توش بتونیم تغییرات خودمون را ذخیره کنیم و روی صفحه اعمال کنیم. البته یه فایل دیگه هم توی پوشه ی css ما وجود داره

فایل foundation.min.css هست که فشرده شده ی همون foundation.css هست که از اونجایی که ما میخواهیم حجم صفحه مون کم باشه، این خط از کدهای index.html را تغییر میدیم.

<link rel="stylesheet" href="css/foundation.css">

را به

<link rel="stylesheet" href="css/foundation.min.css">

تغییر میدیم.

تا به الان یه صفحه ی ساده داریم

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
<body>
	
</body>
</html>

بریم یکم با foundation کار کنیم! برای این کار ابتدا یه سری به صفحه ی داکیومنت های Foundation میزنیم.

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

Foundation ابزار های خیلی زیادی در اختیار شما قرار میده، از Grid گرفته تا Typography ها و Button ها و Form ها و خیلی چیز های دیگه که شما در کنار صفحه میتونید اون ها را مشاهده کنید. دقت کنید که اگر حالتش عادی بود، یعنی اون یه امکان css هست، ولی اگه کنار اسمش JS نوشته شده بود، یعنی که برای استفاده از این امکان، شما باید از JS مربوط به Foundation استفاده کنید که در ادامه به بررسی اون ها میپردازیم.

بهتره ابتدا با قسمت Grid شروع کنیم.

در ادامه ما میخواهیم از این امکان Grid و صفحه بندی های Foundation استفاده کنیم.

همونطور که توی صفحه ی داکیومنت گفته، برای استفاده از این امکان، ابتدا باید المنت های صفحه ی ما در یک div با کلاس row قرار داشته باشه و داخل اون، به المنت های خودمون کلاس column بدهیم.

پس شروع میکنیم

<div class="row">
        
</div>

حالا بریم سراغ صفحه بندی Foundation. سیستم Foundation (همانند سیستم Bootstrap) اینه که صفحه را (دقیق تر المنت با کلاس row را) به 12 بلوک تقسیم میکنه و ما میتونیم تعیین کنیم که اندازه ی هر المنت داخل row، چند بلوک باشه. مثلا اگه بگیم 6 بلوک باشه، یعنی این المنت ما از 12 بلوک، 6 بلوک را اشغال کنه که دقیق ترش یعنی این که width اون 50 درصد باشه. به همین منوال اگه بگیم 3 بلوک باشه، یعنی width اون 25 درصد باشه.

کار دیگه ای هم که میشه باهاش کرد اینه که بهش بگیم تعداد بلوک های اشغال شده، در صفحات بزرگ (دسکتاپ ها) با صفحات متوسط (تبلت ها) با صفحات کوچیک (گوشی ها) تفاوت داشته باشه و براشون تفاوت اندازه قائل بشیم.

بریم این کار ها را بکنیم!

پس ابتدا داخل المنت row خودمون، سه تا div میسازیم با کلاس column که داخل هر کدوم یه متن ساده باشه

<div class="row">
    <div class="column">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
    <div class="column">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
    <div class="column">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
</div>

حالا ما میخواهیم که این سه تا div، توی صفحات بزرگ اندازه شون یک سوم صفحه باشه و توی صفحات خیلی کوچیک، اندازه شون تمام صفحه باشه. برای این کار کافیه کلاس large-4 و small-12 را بهشون بدیم. به همین سادگی

<div class="row">
    <div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
    <div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
	<div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
</div>

و نتیجه اش

به همین سادگی، بدون نیاز و دغدغه برای اضافه کردن کلی شرط و max-width و از این جور چیزا به css هامون، میتونیم Layout صفحه مون را تنظیم کنیم و از اونجایی که Foundation کاملا ریسپانسیو هست، کار ریسپانسیو کردن صفحاتمون را به سادگی انجام میده

بهتره سراغ یکی دیگه از قسمت های Foundation بریم. بد نیست همونطور که توی bootstrap به Progress bar ها سری زدیم، اینجا هم نگاهی به Progress bar بندازیم.

همونطور که توی کدهای داکیومنت هست، با زدن یه کد ساده مثل این، میتونیم یه Progress bar ایجاد کنیم

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
	<div class="progress-meter" style="width: 50%"></div>
</div>

به همین سادگی!

میتونیم یه سری هم به قسمت Breadcrumbs بزنیم

برای داشتن یه breadcrumb خوشگل، همونطور که توی داکیومنت گفته، کافیه فقط کد زیر را بزنیم

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>

دقت کنید که توی breadcrumb بالا، داشتن کلاس disabled باعث میشه که لینک غیرفعال باشه .

بهتره یه سری هم به قسمت Buttons بزنیم.

همونطور که توی داکیومنت میبینید، خیلی راحت میشه با چند تا کلاس، اندازه، رنگ، شکل و... ی دکمه ی خودمون را تغییر بدیم

مثلا یه دکمه با کد زیر داشته باشیم

<button class="alert hollow button" href="#">Alert Color</button>

فک کنم کار کردن با css های Foundation کافی باشه. الان بهتره یه سری به قسمت و امکانات JS مربوط به Foundation بزنیم

همونطور که اینجا گفته، برای استفاده از امکانات JS مربوط به Foundation نیاز به استفاده از Jquery هست. به طور پیش فرض، توی پوشه ی js یه نسخه از JQuery وجود داره و شما میتونید از این کد که پیشنهادی خود Foundation هست استفاده کنید

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>

توجه داشته باشید که فایل app.js به طور پیشفرض تنها دارای یه خط کد هست و اون هم

$(document).foundation()

هست. این کد باعث میشه که توابع مربوط به foundation شروع به کار کنند و شما میتونید توی فایل app.js کدهای اختصاصی خودتون را وارد کنید.

ولی شاید شما نخواهید که از این ورژن جی کوئری استفاده کنید، یا شاید هم این ورژن قدیمی باشه یا ... در این صورت شما میتونید آدرس فایل JQuery را عوض کنید و یه نسخه ی جدید تر را وارد کنید (همچنین میتونید از CDN هایی مثل این استفاده کنید.)

حالا در صورتی که هنوز فایل های JS را وارد نکرده اید، کد زیر را قبل از بسته شدن تگ body بزارید

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>

خب بزارید از یکی از پلاگین های جاوااسکریپت Foundation هم استفاده کنیم.

بزارید از پلاگین Reveal (یا همونطور که توی بوت استراپ و بقیه ی جاها صداش میزنند، Modal ) استفاده کنیم

همونطور که توی داکیومنت گفته، برای داشتن یه Modal یه لینک (a) میخواهیم برای باز کردن Modal و یه div که توش محتوای Modal قرار داشته باشه

این از لینک ما

<p><a data-open="exampleModal1">Click me for a modal</a></p>

و این هم از محتوای Modal ما

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

دقت کنید که مقدار محتوای خصیصه ی data-open در لینک و id در div مربوط به محتوا باید یکسان باشه

به همین سادگی ما میتونیم یه Modal بسازیم

البته این Modal میتونه Option های بسیار زیاد دیگه ای هم داشته باشه که کار کردن با اونها به عهده ی خود شما

خوبی داشتن این Modal اینه که با توجه به ریسپانسیو بودن Foundation، دیگه لازم نیست نگران اندازه و مشکلات Modal توی دیوایس های مختلف باشیم

و به عنوان آخرین مثال، بهتره مثل بوت استراپ، یه Tooltip هم بسازیم

برای داشتن یه Tooltip، خیلی ساده میتونیم از این کد استفاده کنیم

<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span>

و همونطور که داکیومنت میگه، برای اینکه Tooltip ما از بالا باز بشه، خیلی راحت کافیه که کلاس top را به tooltip خودمون اضافه کنیم

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
<body>
	<div class="row">
		<div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
		<div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
		<div class="column large-4 small-12">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design</div>
	</div>
	<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
	 	<div class="progress-meter" style="width: 50%"></div>
	</div>
	<nav aria-label="You are here:" role="navigation">
	 	<ul class="breadcrumbs">
	    	<li><a href="#">Home</a></li>
	    	<li><a href="#">Features</a></li>
	    	<li class="disabled">Gene Splicing</li>
	    	<li>
	     		<span class="show-for-sr">Current: </span> Cloning
	    	</li>
	 	</ul>
	</nav>
	<p><a data-open="exampleModal1">Click me for a modal</a></p>
	<span class="top" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span>
	<div class="reveal" id="exampleModal1" data-reveal>
		<h1>Awesome. I Have It.</h1>
	 	<p class="lead">Your couch. It is mine.</p>
	 	<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
	 	<button class="close-button" data-close aria-label="Close modal" type="button">
	    	<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

فک کنم برای معرفی یه فریم ورک، همین قدر صحبت درباره اش کافی باشه

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

و در نهایت، فک کنم خودن این مطلب هم خالی از لطف نباشه

یه مقایسه بین فریم ورک های ریسپانسیو Bootstrap، Foundation و یه فریم ورک دیگه به اسم Skeleton