تصویر امیر حسین اکبری

ویژگی‌ها

  • Responsive Grid Down To Mobile

Skeleton بر مبنای Grid 960 می باشد و به وسیله آن قادریم برای تمامی وسایل مانند تبلت ها، گوشی‌های موبایل و ... برنامه نویسی کنیم.

  • Fast to Start

Skeleton ابزاری برای برنامه‌نویسی راحت‌تر و سریع‌تر می‌باشد بدین معنا که برای تمامی حالات مختلف (فرم ها، منوها، دکمه ها و ...) کدهایی را به صورت استاندارد دارد.

  • Style Agnostic

Skeleton تنها فریم ورکی برای UI نیست، بلکه ابزاری برای برنامه نویسان می باشد تا کدهایشان را استایل دهند.

Grid

سیستم Grid در Skeleton بر مبنای 960 می باشد. Skeleton به گونه ای طراحی شده است تا نسبت به طول مرورگرها حساس باشد. به گونه ای که نحوه نمایش اطلاعات داخل موبایل ها و تبلت ها مختلف است.

به عنوان مثال با تغییر اندازه بروزر و کوچک کردن آن چگونگی تغییر اندازه و نحوه نمایش داده ها را ببینید!

<html>
<head>
<style>
#grid .column, #grid .columns {
    background: #DDD;
    height: 25px;
    line-height: 25px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    color: #555;
    font-size: 12px;
    font-weight: bold;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.column.alpha, .columns.alpha {
margin-left: 0;
}
.column.alpha, .columns.omega {
margin-right: 0;
}
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }
</style>
</head>
<body>
<div id="grid">
    <div class="example-grid">
        <div class="one column alpha">One</div>
        <div class="eleven columns omega">Eleven</div>
        <div class="two columns alpha">Two</div>
        <div class="ten columns omega">Ten</div>
        <div class="three columns alpha">Three</div>
        <div class="nine columns omega">Nine</div>
        <div class="four columns alpha">Four</div>
        <div class="eight columns omega">Eight</div>
        <div class="five columns alpha">Five</div>
        <div class="seven columns omega">Seven</div>
        <div class="six columns alpha">Six</div>
        <div class="six columns omega">Six</div>
        <div class="seven columns alpha">Seven</div>
        <div class="five columns omega">Five</div>
        <div class="eight columns alpha">Eight</div>
        <div class="four  columns omega">Four</div>
        <div class="nine columns alpha">Nine</div>
        <div class="three columns omega">Three</div>
        <div class="ten columns alpha">Ten</div>
        <div class="two columns omega">Two</div>
        <div class="eleven columns alpha">Eleven</div>
        <div class="one column omega">One</div>
    </div>
</div>
</body>
</html>

نحوه پشتیبانی از مرورگرها

  • Latest Chrome (Mac/PC)
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Latest Safari
  • IE9, IE8, IE7
  • iPhone (Retina)
  • Droid (Charge/Original)
  • iPad

دانلود Skeleton

بعد از دریافت به نکات زیر توجه کنید

  • هرگز کدهای پیش فرض را تغییر ندهید.
  • تم را به گونه ای طراحی نمایید که در قالب Skeleton باشد بدین معنا که حداکثر طول تم 940PX و محدوده های داخل آن به گونه ای باشد که بتوانیم در قالب اندازه های از پیش تعیین شده بگنجانیم.
  • کدهای خود را برای پیاده سازی تم در فایل CSSای به نام Application.css نوشته و آن را به فایل HTML خود بیافزایید.
  • برای طراحی تم های فارسی، فایل تبدیل به RTL را دانلود کرده و به ابتدای فایل HTML خود بیافزایید. (فایل پیوست)
برچسب ها: 

دیدگاه‌ها

تصویر امیر حسین اکبری

امیر حسین اکبری

توصیه می کنم استفاده کنید.

افزودن نظر جدید