Monthly Archives: February 2019

سیستم grid فریمورک semantic

Category : semantic-ui , UI

در این مطلب فریم ورک سمانتیک رو به صورت مختصر معرفی کردیم

Grid

اما حالا می خواهیم نگاهی به سیستم grid این فریمورک بیندازیم . که به شما قابلیت کادربندی مناسب صفحات را می دهد . برخلاف bootstrap که فضا را به 12 قسمت تقسیم می کند semantic ui  فضا را به 16 قسمت تقسیم می کند در ادامه از یک مثال ساده استفاده می کنیم

<div class="ui grid" >

  <div class="four wide column" >

  </div>

  <div class="ten wide column" >

  </div>

  <div class="two wide column" >

  </div>

</div>

در مثال بالا ما سه div تعریف کردیم که div اول ما 4 واحد از 16 واحد و div دوم ده واحد از فضا را به خود اختصاص داده است

یک روش دیگر برای این کار

<div class="ui three column grid" >

  <div class="column" >1<div>
  <div class="column" >2<div>
  <div class="column" >3<div>

</div>

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

توجه کنید که در این مثال ها ما به هر div یک background اختصاص دادیم که بهتر بتوانید عملکرد کد ها را ببینید

در طراحی ساخت سایت شما باید صفحات سایت را ریسپانسیو ( واکنشگرا ) بسازید تا هم در مبایل و یا در مانیتور ها با سایز های مختلف به درستی نمایش داده شوند فریمورک semantic هم کلاس های مختلفی را برای این منظور در نظر گرفته است به نمونه کد زیر توجه کنید

<div class="ui centered grid">
  <div class="computer only row">
    <div class="column"></div>
  </div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
</div>

در نمونه کد بالا کار کلاس computer only آن هست که این div فقط در صفحات کامپیوتر و نمایشگر های بزرگتر نشان داده شود و در نمایش گر های کوچکتر hide می شود 

اما در کلاس های six wide tablet تعیین می کنیم که div ما در صفحه نمایش های دستگاه هایی مثل تبلت و مبایل 6 واحد و در صفحه نمایش های بزرگتر 8 واحد اشغال کنن به این صورت انعطاف بیشتری در ریسپانسیو کردن داریم

کلاس centered هم همان طور که از اسم آن مشخص است div های ما را در مرکز صفحه قرار می دهد 

اما یکی دیگر از کلاس های پرکاربرد کلاس stackable است اگر بخواهیم کاربرد این کلاس را به زبان ساده بیان کنیم در گوشی ها و تبلت ها و یا زمان که صفحه مرورگر خود را کوچک می کنیم این کلاس باعث می شود div های ما از حالت افقی به حالت لیست عمودی تغییر کنند تا سایت برای صفحه نمایش های کوچک مناسب تر شود

<div class="ui stackable four column grid">
  <div class="column"></div>
  <div class="column"></div>
</div>


معرفی فریمورک semantic-ui

امروزه توسعه دهندگان برای ساخت سایت و دیزاین صفحات سایت از فریمورک هایی که برای این منظور ساخته شده اند استفاده می کنند . فریم ورک های مختلفی وجود دارم اما دوتا از معروف ترین این فریم ورک ها bootstrap و semantic-ui هستند ( سمانتیک )

اما چرا باید از semantic-ui استفاده کنیم ؟ این فریمورک نسبت به bootstrap دارای کامپوننت های بیشتر و زیباتری هست و دست شما را برای توسعه سایت های مدرن باز میزارد همین طور کلاس های آن بسیار شبیه به زبان انسان نامگذاری شده

به مثال زیر توجه کنید :

<button class="ui green button" > NitroCode.ir </button>

به همین سادگی یک باتن به رنگ سبز ایجاد میکنید 🙂

در این فریمورک علاوه بر قابلیت های css دارای کتابخانه های جاوا اسکریپت هم هست که کار برا لیست ها و کامپوننت های آن را ساده می کند

این فریم ورک قابلیت های صفحه بندی و ریسپانسیو مناسبی هم دارد که کمی با فریمورک bootstrap فرق دارد . ویژگی دیگر و جالب این فریم ورک دارا بودن ایکون های مناسب در خود فریم ورک هست . همین حالا که در حال نوشتن این پست هستم اخرین ورژن منتشر شده این فریمورک نسخه 2.4.2 است

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

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script src="semantic/dist/semantic.min.js"></script>

 

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