سبد (0)

آموزش foundation-شروع کار

foundation چیست؟ 

  • foundation یک فریم ورک سمت کاربر است که از آن برای طراحی سریع و آسان وب استفاده می شود
  • foundation قالب های طراحی شده ای را برای نگارش، دکمه ها، جدول ها و ناوبری ها و خیلی چیزهای دیگر را ارائه می دهد که به خوبی پلاگین های جاوااسکریپت هستند
  • foundation پاسخ گرا به موبایل می باشد و به شما این امکان را می دهد تا قالب های واکنش گرا را طراحی کنید
  • هر دوی مبتدی ها و حرفه ای ها می توانند از فریم ورک foundation استفاده کنند
  • foundation توسط Facebook، eBay، Samsung،Amazon،Disney و ... مورد استفاده قرار گرفته است
Note

طراحی واکنش گرا چیست؟ 
طراحی واکنش گرا عبارت است از ایجاد وب سایت هایی که به طور اتوماتیک خودشان را تنظیم می کنند تا در تمام دستگاه ها، از موبایل های کوچک گرفته تا رایانه های رومیزی، به خوبی نمایش داده شوند. 

فریم ورک foundation را از کجا دریافت کنیم؟

دو راه برای استفاده از foundation در وب سایت شما وجود دارد.

شما می توانید:

  • فریم ورک foundation را از سایت foundation.zurb.com دانلود کنید
  • فریم روک foundation را از یک CDN اضافه کنید

دانلود کردن فریم ورک foundation

اگر قصد دارید خودتان فریم ورک foundation را دانلود کرده و ذخیره کنید، به آدرس foundation.zurb.com بروید و طبق دستورالعمل های آنجا، عمل نمایید. 

دریافت فریم ورک foundation از یک CDN

در صورتی که نمی خواهید فریم ورک foundation را خودتان دانلود کرده و ذخیره نمایید، می توانید آن را از یک CDN اضافه نمایید. 

سایت Cloudflare از فایل های CSS و جاوااسکریپت فریم ورک foundation پشتیبانی می کند(فراموش نکنید که برای کارایی کامپوننت ها، جی کوئری را نیز اضافه نمایید):

Cloudflare:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">

<!-- jQuery library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>

<!-- Latest compiled modernizr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
Note

 یکی از مزیت های استفاده از CDN در فریم ورک foundation:
بسیاری از کاربران قبلا هنگام مشاهده ی سایت های دیگر، فریم ورک foundation را دانلود کرده اند. پس هنگامی که از سایت شما بازدید کنند، این فریم ورک را که در کش ذخیره شده است را گویی دانلود کرده اند و دارند. و این باعث افزایش سرعت لود خواهد شد. علاوه براین، بیشتر CDN ها هنگامی که درخواست شما به آنها ارسال می شود، درخواست را از سروری که به شما نزدیک تر است پاسخ می دهند. که این نیز سرعت لود شدن را افزایش می دهد. 
آیا می دانید چرا فریم ورک foundation از modernizr استفاده می کند؟

برخی از کامپوننت های فریم ورک foundation از ویژگی های پیشرفته ی HTML5 و CSS3 استفاده می کنند که ممکن است در تمام مرورگرها پشتیبانی نشوند. Modernizr یک کتابخانه ی جاوااسکرپت است که این مشکل را حل می کند و آن ویژگی های یاد شده را برای مرورگرهایی که از آنها پشتیبانی نمی کنند، به ارمغان می آورد. و باعث می شود که تمام کامپوننت ها در تمام مرورگرها کار کنند. 

ایجاد یک صفحه به وسیله ی فریم ورک foundation

1. اعلان doctype از HTML5 را اضافه کنید

فریم ورک foundation از عناصر HTML و خصوصیات CSS ی استفاده می کند که استفاده از اعلان doctype از HTML5 را ضروری کرده اند. 

همواره اعلان doctype از HTML5 را در شروع صفحه، اضافه کنید. همچنین از خصوصیت lang و مجموعه کاراکترهای صحیح(بعنوام مثال utf-8) استفاده کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2. فریم ورک foundation پاسخ گر به موبایل می باشد

فریم ورک foundation 5 طوری طراحی شده است که در دستگاه های موبایل واکنش گرا باشد. استایل های پاسخ گرا به موبایل، جزو هسته ی این فریم ورک هستند.

برای اطمینان از ارائه ی مناسب و زوم کردن لمسی، تگ <meta> زیر را درون عنصر <head> اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1">

عبارت width=device-width باعث می شود که عرض صفحه ی وب، به اندازه ی عرض صفحه ی نمایش دستگاه دربیاید.

عبارت initial-scale میزان زوم اولیه را هنگامی که صفحه ی وب برای اولین بار توسط مرورگر بارگذاری می شود را مشخص می کند.

3. مقدار دهی اولیه به کامپوننت ها

برخی از کامپوننت ها در فریم ورک foundation برای کار کردن نیاز به جی کوئری دارند. برای این قبیل کامپوننت ها(مانند منوی کشویی و modal ها) کد زیر را به صفحه ی خود اضافه کنید:

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

ایجاد یک صفحه ی ابتدایی در فریم ورک foundation

آموزش ایجاد یک صفحه ی مقدماتی در فریم ورک foundation:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Foundation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
</head>
<body>

<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation Page</h1>
      <p>Resize this responsive page to see the effect!</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum..</p>
  </div>
</div>

</body>
</html>
خودتان امتحان کنید »
نوشته شده توسط احسان عباسی
بازدید: 9482

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه