() translation by (you can also view the original English article)
اليوم، ونحن سوف يكون جعل جميلة، لوحة أجهزة القياس الحد الأدنى باستخدام نقية (عرض المشروع على جيثب)، مكتبة وحدة مصغرة مصغرة كس من ياهو !. وسوف نتحدث عن واستخدام بعض مبادئ سماكس (قابلة للتطوير والعمارة وحدات ل كس). سنقوم أيضا باستخدام الرموز من WeLoveIconFonts.com.
ملاحظة: قبل أن نذهب أبعد من ذلك، هناك الحد الأدنى من التركيز على الرسوم البيانية للوحة القيادة سنكون خلق. يتم تنفيذ أفضل الرسوم البيانية مع شيء أكثر جافا سكريبت الثقيلة، ومن أجل الحفاظ على التركيز على كس والحد الأدنى جافا سكريبت، وهذا البرنامج التعليمي عموما تجنب تقنيات الرسم البياني الرسم.
قليلا حول نقية
تم بناء بيور من قبل الفريق في ياهو! و يوي لتكون مجموعة خفيفة الوزن جدا من وحدات (أقل من 6K). التفكير في هذا كما تطبيع الموسعة التي تشمل أيضا أنماط لأشياء شائعة جدا مثل الشبكات والأشكال والأزرار والجداول والقوائم.
فريق يوي بنيت نقية لتكون نقطة انطلاق، وليس حلا كاملا. بدءا من نقطة البداية هذه، يتوقعون من المطورين توسيع نطاق كس الخاص بهم وإضافته كإضافة لهذه القاعدة.
لهذا السبب، والكثير من ما نعلمه في هذا البرنامج التعليمي هي تقنيات لتوسيع مكتبة أساسية الأساسية مثل نقية لتتناسب مع تطبيق التفاعل، مثل عند استخدام لوحة القيادة.
قليلا حول سماكس
سماس، اختصار للعمارة القابلة للتطوير و وحدات ل كس، والطفل في الدماغ من جوناثان سنوك، هو مجموعة من الممارسات المصممة لبناء كس التي يسهل فهمها، من السهل تمديد، ويتجنب الحرب خصوصية كس.
هذا هو أكثر فوثر بمساعدة عدم استخدام معرفات لتصميم والحد من التعشيش من محددات قدر الإمكان. والفكرة الأساسية هي أن كس يمكن تصنيفها على أنها قاعدة، تخطيط، وحدات، الولايات، والمواضيع. هيكلة كس حول هذه الفئات واتباع اتفاقيات التسمية التي تلمح إلى هذه الفئات يجعل سمكس للقراءة وعلى الفور ذات مغزى. هذا يتجنب أسماء الفئة التي لديها أنماط التعسفية المرتبطة بها. وتتبع الفكرة الأساسية للتصنيف هذه التسمية.
- قاعدة: لا يوجد اسم (العناصر الافتراضية، لا الطبقات)
- التخطيط
- الوحدات النمطية
- الدولة
- ثيم
تصف هذه الأنواع من الفئات وظائفها وفئتها. قواعد سماكس هي أكثر "المبادئ التوجيهية" وطرق التفكير. ننظر من خلال مصدر كس النقي لرؤية أمثلة من سماس في العمل.
الغوص في
أولا، دعونا إنشاء دليل مشروع بسيط باستخدام HTML5 النمطية، وإسقاط نقية في مكان Normalize.css. لهذا البرنامج التعليمي، ونحن سوف تستخدم بيور يوي كدن الارتباط، سنقوم أيضا إسقاط في الخط رهيبة، وجمع الخط رمز تويتر، وإضافة خط لدينا كس (تعليمات مأخوذة من ويلوفيكونفونتس). طوال الترميز، سترى الرموز المعرفة مع فئات مثل "فونتاويسوم التقويم".
1 |
/* in main.css */
|
2 |
|
3 |
[class*="fontawesome-"]:before { |
4 |
font-family: 'FontAwesome', sans-serif; |
5 |
}
|
1 |
<!-- in index.html, in place of normalize -->
|
2 |
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.1.0/pure-min.css"> |
3 |
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome"> |
نحن على استعداد للبدء في استخدام هذه الأدوات في التصميم! دعونا نبدأ من خلال تعريف بعض كس الهيكل العظمي لعقد عناصر لدينا في. دعونا نضع هذا في 'الجسم' لدينا.
1 |
<header>
|
2 |
<nav></nav><!-- this is where our nav menu will go --> |
3 |
</header>
|
4 |
<section class="dashboard"> |
5 |
<!-- our dashboard pieces will go here -->
|
6 |
</section>
|
7 |
<footer>
|
8 |
<!-- copyright information can go here-->
|
9 |
</footer>
|
لقد قررنا استخدام لوحة الألوان وجدنا على كولورلوفرز دعا الأصفر الضفدع شجرة من قبل المستخدم لك.
في الوقت الحالي، سنقوم بالإشارة إليها في تعليق في أعلى ملف كس.
1 |
/*
|
2 |
red: #E73F3F
|
3 |
orange: #F76C27
|
4 |
yellow: #E7E737
|
5 |
blue: #6D9DD1
|
6 |
purple: #7E45D3
|
7 |
*/
|
نصيحة: يمكنك الاستفادة من البدء باستخدام الكلمات الرئيسية للون كس وإيجاد / استبدال الرموز السداسية في وقت لاحق بحيث لا يلزمك نسخ الرمز اللداسي ولصقه باستمرار.
تحديد القائمة
بوريس يعطينا وحدة القائمة المنسدلة التي يمكننا استخدامها لتحديد قائمة لوحة أجهزة القياس لدينا. نبدأ باستخدام بيور على أساس الطبقة النمطية تسمية، في أعقاب المبادئ التوجيهية من سماكس.
1 |
<nav class="pure-menu pure-menu-open pure-menu-horizontal"> |
2 |
<a href="#" class="pure-menu-heading">WebDesignTuts</a> |
3 |
<ul>
|
4 |
<li class="pure-menu-selected"><a href="#">Dashboard</a></li> |
5 |
<!-- other items ... -->
|
6 |
</ul>
|
7 |
</nav>
|
لاحظ أن هذه القائمة لن تكون وظيفية لهذا البرنامج التعليمي. عرض الصفحة، يمكننا أن نرى تم إنشاء القائمة لدينا مع التصميم الأفقي الافتراضي. دعونا نمضي قدما وتغيير خلفية القائمة إلى الأسود شبه شفافة.
1 |
.pure-menu { |
2 |
font-weight: lighter; |
3 |
}
|
4 |
.pure-menu.pure-menu-fixed { |
5 |
position: fixed; |
6 |
}
|
7 |
.pure-menu.pure-menu-blackbg { |
8 |
background: #222; |
9 |
}
|
10 |
.pure-menu.pure-menu-blackbg .pure-menu-heading:hover { |
11 |
color: #efefef; |
12 |
}
|
13 |
.pure-menu.pure-menu-blackbg a { |
14 |
color: #fff; |
15 |
}
|
16 |
.pure-menu.pure-menu-blackbg a:hover { |
17 |
background: #666; |
18 |
}
|
19 |
.pure-menu.pure-menu-blackbg .pure-menu-selected a { |
20 |
background: #7E45D3; |
21 |
}
|
22 |
.pure-menu.pure-menu-blackbg .pure-menu-selected a:hover { |
23 |
color: #efefef; |
24 |
}
|
هنا، نرى اعتماد الاتفاقيات التي تستخدمها سماس و بيور. نحن نحدد فئتين جديدتين، 'نقية-القائمة-بلاكبج' و 'نقية القائمة ثابتة'، ثم الأنماط الفرعية اللازمة لدعم تلك الفئة. ونحن نرى أيضا بعض تجاوز الطبقات الأساسية (مثل الطبقة القائمة "القائمة نقية" للتغيير إلى وزن الخط أخف وزنا).
إنشاء وحدة لوحة التحكم
بعد ذلك، سنقوم بإنشاء وحدة نمطية للوحة التحكم. سنستخدم بعض الأنماط الأساسية في لوحة التحكم على مستوى القاعدة "بلوك".
1 |
.dashboard-piece { |
2 |
min-height: 300px; |
3 |
-webkit-box-sizing: border-box; |
4 |
-moz-box-sizing: border-box; |
5 |
box-sizing: border-box; |
6 |
color: #fff; |
7 |
text-align: center; |
8 |
position: relative; |
9 |
padding-bottom: 40px; |
10 |
}
|
الآن بعد أن لدينا هذه الوحدة الأساسية المعرفة، ونحن سوف تمتد من خلال إنشاء فئات جديدة مع "لوحة القيادة قطعة". أولا، سوف نقوم بإنشاء الطبقات لون الخلفية.
1 |
.dashboard-piece-redbg { |
2 |
background-color: #E73F3F; |
3 |
}
|
4 |
.dashboard-piece-orangebg { |
5 |
background-color: #F76C27; |
6 |
}
|
7 |
.dashboard-piece-yellowbg { |
8 |
background-color: #E7E737; |
9 |
}
|
10 |
.dashboard-piece-bluebg { |
11 |
background-color: #6D9DD1; |
12 |
}
|
13 |
.dashboard-piece-purplebg { |
14 |
background-color: #7E45D3; |
15 |
}
|
16 |
.dashboard-piece-graybg { |
17 |
background-color: #798388; |
18 |
}
|
بعد ذلك، سنحدد الترميز لقطع لوحة التحكم المختلفة. نحن تشمل سفغ مضمنة للشعار إنفاتو، والتي سوف تمتد عرض كامل للشبكة.
1 |
<section class="dashboard pure-g-r clearfix"> |
2 |
<div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo"> |
3 |
<h1>
|
4 |
<svg x="0px" y="0px" width="132.89669167px" height="120px" viewBox="0 0 73.351 82.791" enable-background="new 0 0 73.351 82.791" xml:space="preserve"> |
5 |
<g><path fill="#FFFFFF" d="M7.372,27.487C-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423,26.14-55.114 |
6 |
C21.514,16.159,12.19,21.405,7.372,27.487z M73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216C71.4,0.204,70.53-0.084,69.612,0.021
|
7 |
c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268
|
8 |
c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g> |
9 |
</svg>
|
10 |
</h1>
|
11 |
</div>
|
12 |
<div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg"> |
13 |
<div class="dashboard-content"> |
14 |
<h2><i class="fontawesome-twitter"></i></h2> |
15 |
<p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p> |
16 |
</div>
|
17 |
</div>
|
18 |
<div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg"> |
19 |
<div class="dashboard-content"> |
20 |
<h2><i class="fontawesome-github"></i></h2> |
21 |
<p class="dashboard-metric"> |
22 |
142 Commits |
23 |
<div class="light bar-horizontal"> |
24 |
<div class="bar-horizontal-bar" style="width:57%"> |
25 |
57% Capacity |
26 |
</div>
|
27 |
</div>
|
28 |
</p>
|
29 |
</div>
|
30 |
</div>
|
31 |
<div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg"> |
32 |
<div class="dashboard-content"> |
33 |
<p class="dashboard-metric"> |
34 |
<h2><i class="fontawesome-check"></i></h2> |
35 |
<div class="dashboard-metric"> |
36 |
<strong>63 / 90</strong><br><small>Tasks Complete</small> |
37 |
</div>
|
38 |
</p>
|
39 |
</div>
|
40 |
<div class="bar-vertical" style="height:70%;"></div> |
41 |
</div>
|
42 |
</section>
|
هناك الكثير لتغطيه في هذا الترميز. أولا، نحن نستخدم "نقية u-1-3" (وغيرها من الطبقات نقية u- *) داخل عنصر صف الشبكة، "نقية- -". هذه الطبقات هي جزء من نظام الشبكة الصرفة. لفهم هذه تماما، تحقق من كامل يوي الشبكة الوثائق؛ والمفهوم الأساسي هو أن الطبقة الشبكة نقية u-1-3 هو 1/3 عرض الشبكة بالكامل، فئة من نقية u-3-4 سيكون 3 / 4th عرض الشبكة. وحدة مع الشعار في ذلك لديه الطبقة نقية u-1، والذي يسمح لتمتد العرض الكامل للشبكة.
يتم استخدام العناصر الأخرى من قطع لوحة التحكم لإظهار أنواع مختلفة من المقاييس. يتم استخدام قواعد كس التالية لعرض هذه المقاييس والأجزاء الداخلية الأخرى من قطع لوحة التحكم.
1 |
.dashboard-piece-logo h1 { |
2 |
line-height: 100px; |
3 |
}
|
4 |
.dashboard-piece-logo svg { |
5 |
margin-top: 80px; |
6 |
}
|
7 |
.dashboard-piece h1 { |
8 |
line-height: 300px; |
9 |
font-size: 3.6em; |
10 |
margin: 0; |
11 |
}
|
12 |
.dashboard-content { |
13 |
position: relative; |
14 |
z-index: 999; |
15 |
}
|
16 |
.dashboard-content p { |
17 |
font-weight: lighter; |
18 |
}
|
19 |
.dashboard-content .light { |
20 |
opacity: 0.4; |
21 |
display: block; |
22 |
}
|
23 |
.dashboard-content h2 i { |
24 |
font-size: 4em; |
25 |
opacity: 0.4; |
26 |
}
|
27 |
.dashboard-metric { |
28 |
text-transform: uppercase; |
29 |
font-size: 1.6em; |
30 |
line-height: 1; |
31 |
}
|
32 |
.dashboard-metric i { |
33 |
margin-right: 0.6em; |
34 |
}
|
كما نقوم بتعريف فئات الشريط الأفقي والرأسي بشكل منفصل عن الوحدات النمطية لمحتوى لوحة التحكم.
1 |
.bar-horizontal { |
2 |
height: 36px; |
3 |
background-color: rgba(255,255,255,0.4); |
4 |
position: relative; |
5 |
display: block; |
6 |
margin-top: 20px; |
7 |
}
|
8 |
.bar-horizontal-bar { |
9 |
background: #fff; |
10 |
height: 36px; |
11 |
line-height: 36px; |
12 |
color: #444; |
13 |
text-transform: uppercase; |
14 |
font-weight: bold; |
15 |
font-size: 0.8em; |
16 |
letter-spacing: 0.2em; |
17 |
position: absolute; |
18 |
top: 0; |
19 |
left: 0; |
20 |
}
|
21 |
.bar-vertical { |
22 |
position: absolute; |
23 |
bottom: 0px; |
24 |
left: 0px; |
25 |
width: 100%; |
26 |
background: rgba(200,200,200,0.5); |
27 |
}
|
وأخيرا، فإننا نستخدم أكثر من وحدات بيور المدمج في إنشاء جدول على غرار وحدة "الأحداث"، ونحن إعادة استخدام الطبقة شريط الأفقي لوحدة الطقس. ونحن نقدم هذه الطبقات مع كس مخصصة كذلك. هنا هو الترميز للوحدتين الأخيرتين.
1 |
<section class="dashboard pure-g-r clearfix"> |
2 |
<div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events"> |
3 |
<div class="dashboard-content"> |
4 |
<p class="dashboard-metric"> |
5 |
<h2><i class="fontawesome-calendar"></i></h2> |
6 |
<h3>Upcoming Events</h3> |
7 |
<table class="pure-table pure-table-center pure-table-horizontal pure-table-dark"> |
8 |
<thead>
|
9 |
<tr>
|
10 |
<th>With:</th> |
11 |
<th>Where:</th> |
12 |
<th>When:</th> |
13 |
</tr>
|
14 |
</thead>
|
15 |
<tbody>
|
16 |
<tr>
|
17 |
<td>John Smith</td> |
18 |
<td>WDTuts Office</td> |
19 |
<td>Jun 20, 9:30AM</td> |
20 |
</tr>
|
21 |
<tr class="pure-table-odd"> |
22 |
<td>George Bluth</td> |
23 |
<td>Sudden Valley</td> |
24 |
<td>Jun 23, 4PM</td> |
25 |
</tr>
|
26 |
<tr>
|
27 |
<td>Michael Scott</td> |
28 |
<td>Scranton, PA</td> |
29 |
<td>Jun 24, 2:45PM</td> |
30 |
</tr>
|
31 |
</tbody>
|
32 |
</table>
|
33 |
</p>
|
34 |
</div>
|
35 |
</div>
|
36 |
<div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain"> |
37 |
<div class="dashboard-content"> |
38 |
<p class="dashboard-metric"> |
39 |
<h2><i class="fontawesome-umbrella"></i></h2> |
40 |
<div class="dashboard-metric"> |
41 |
<strong>80% Chance</strong><br><small>of Precipitation</small> |
42 |
<div class="light bar-horizontal"> |
43 |
<div class="bar-horizontal-bar" style="width:80%">80%</div> |
44 |
</div>
|
45 |
</div>
|
46 |
</p>
|
47 |
</div>
|
48 |
</div>
|
49 |
</section>
|
50 |
<footer>
|
51 |
© 2013 Envato
|
52 |
</footer>
|
وفصول الجدول نقية الموسعة.
1 |
.pure-table-center { |
2 |
margin: 0 auto; |
3 |
}
|
4 |
.pure-table-dark { color: #ddd; } |
5 |
.pure-table-dark .pure-table-odd { color: #444; } |
وأخيرا، نحن نريد أن سادة قليلا الجزء العلوي من وحدة الطقس بحيث تناسبها أكثر انسجاما مع وحدة الأحداث. ونحن نفعل ذلك ببساطة عن طريق الاستفادة من اضافية "الطقس" الطبقة وضبط الحشو العلوي. جنبا إلى جنب مع هذه القطع الأخيرة، سنقوم بإضافة بعض التصميم تذييل بسيط لتتناسب مع القائمة أعلى الملاحة.
1 |
.weather { |
2 |
padding-top: 60px; |
3 |
}
|
4 |
footer { |
5 |
background: rgb(20,20,20); |
6 |
color: #aaa; |
7 |
padding: 10px; |
8 |
font-size: 0.6em; |
9 |
font-weight: bold; |
10 |
}
|
توسيع الاستجابة
يأتي نقي مع المدمج في عناصر الشبكة استجابة. يتم تعريفها مع محدد التالية.
1 |
.pure-g-r>[class ^="pure-u"] |
هذا هو محدد يبحث صعبة (نلقي نظرة على 30 كس محددات يجب عليك حفظ لتفسير عميق) الذي يشير أولا إلى الأطفال مباشرة من عناصر ".pure-g-r". يجب أن يكون لدى هؤلاء الأطفال سمة الطبقة التي تبدأ مع البادئة "نقية ش". تفو.
وهو يشير، على سبيل المثال، إلى هذا القسم:
1 |
<section class="dashboard pure-g-r clearfix"> |
2 |
<div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events"> |
يتم استخدام هذا محدد داخل استفساراتmedia لانهيار الشبكة. ومع ذلك، تنهار عناصر الوحدة هذه إلى 100٪ أقل من 767 بكسل. نحن نريد تغيير هذا للسماح للعناصر أن تنهار إلى 50٪ بين 480 و 767. ونحن نفعل ذلك مع استفساراتmedia التالية.
1 |
@media only screen and (max-width:767px) { |
2 |
.pure-g-r>[class ^="pure-u"]{width:50%; float: left;} |
3 |
}
|
4 |
@media only screen and (max-width:480px) { |
5 |
.pure-g-r>[class ^="pure-u"]{width:100%; } |
6 |
}
|
سبلاش من جافا سكريبت
في ، سنكتب بعض جافا سكريبت للتأكد من أن جميع الوحدات على صف واحد هي نفس الارتفاع.
1 |
(function(){
|
2 |
var to; |
3 |
|
4 |
function pieceHeights(){
|
5 |
to = setTimeout(function(){
|
6 |
$(".pure-g-r").each(function(i,el){
|
7 |
var contentPieces = $(el).find(".dashboard-piece");
|
8 |
var max = 0; |
9 |
contentPieces.css("min-height","");
|
10 |
$.grep(contentPieces, function(el,i){
|
11 |
max = Math.max($(el).outerHeight(),max); |
12 |
}); |
13 |
contentPieces.css("min-height", max);
|
14 |
}); |
15 |
}, 400); |
16 |
} |
17 |
|
18 |
$(window).on("resize", function(){
|
19 |
clearTimeout(to); |
20 |
pieceHeights(); |
21 |
}).trigger("resize");
|
22 |
|
23 |
}()); |
وتعرف جافا سكريبت هذه الدالة التي تدور عبر كل عنصر من عناصر فئة "لوحة التحكم" في كل صف، وتبحث لاحقا عن أطول وحدة في هذا الصف. ثم تعيين كافة العناصر في هذا الصف إلى ارتفاع أطول عنصر في الصف.
استنتاج
هذا البرنامج التعليمي يظهر فقط بعض الوحدات المعرفة في بيور. باستخدام أنماط مثل تلك المستخدمة في هذا البرنامج التعليمي، يمكنك إنشاء كس بسهولة قابلة للقراءة، وقابلة للتطوير. استخدام مكتبة صغيرة مثل بيور يسمح لك للاستفادة قوية، اختبارها، وتوثيقها جيدا حل للمشاكل المشتركة.
ماذا تفعل مع بيور؟ اسمحوا لنا أن نعرف في التعليقات!
