ניסוי: הדמיית iOS7 עם HTML ו-CSS בלבד

ניסוי בפיתוח: לדמות את מערכת ההפעלה החדשה של אפל באמצעות HTML ו-CSS בלבד.

מטרת הניסוי

לדמות את מערכת ההפעלה החדשה iOS7 באמצעות HTML ו-CSS בלבד.

completed

הציוד הדרוש

עורך טקסט, Node.js, Sass, Grunt.

רקע


מה זה Sass?

טכנולוגיה המאפשרת ליצור ולנהל CSS בנפחים גדולים, על-ידי שיטות הלקוחות מעולם התיכנות כמו:

  • הפרדת עניינים (Soc – Separation of Concerns) – על-ידי פיזור הקוד בקבצים שונים.
  • אל תחזרו על עצמכם (DRY – Don’t Repeat Yourself) – על-ידי שמירת בלוקים של CSS לשימוש חוזר בחלקים שונים.

מהו התחביר לכתיבת Sass?

התחביר דומה ל-CSS, בתוספת מרכיבים כמו: פונקציות, משתנים וקינון אלמנטים.


כיצד משתמשים ב-Sass?

לאחר כתיבת התחביר, מבצעים הידור (Compilation) אשר בין השאר:

  • בודק שגיאות תחביר.
  • ממיר את הקוד ל-CSS .
  • מאחד בין קבצים ומייצר מהם קובץ/י CSS.

אם כן, התוצאה הסופית היא קובץ CSS רגיל, אלא שמאחורי הקלעים הקוד מיוצר דינמית.


כיצד מתקינים Sass?

הוראות התקנה כאן.


כיצד מבצעים הידור (Compile) של קוד Sass?

  1. נתקין Node.js.
  2. ניצור 2 קבצי הגדרות בתיקיית השורש:

    package.json

    [javascript]
    ‭{‬
    ‭"‬name‭": "‬ios7-html‭",‬
    ‭"‬version‭": "‬0.0.1‭",‬
    ‭"‬devDependencies‭": {‬
    ‭"‬grunt‭": "‬0.4.1‭",‬
    ‭"‬grunt-contrib-watch‭": "‬0.4.3‭",‬
    ‭"‬grunt-contrib-sass‭": "‬0.4.0‭"‬
    ‭}‬
    ‭}‬
    [/javascript]

    Gruntfile.js

    [javascript]
    module.exports‭ = ‬function‭ (‬grunt‭) {‬
    ‭ ‬grunt.initConfig‭({‬
    ‭ ‬watch‭: {‬
    ‭ ‬sass‭: {‬
    ‭ ‬tasks‭: [‘‬sass:dist‭’],‬
    files‭: [‘‬sass‭/**/*.{‬scss,sass‭}’]‬
    ‭ }‬
    ‭ },‬
    ‭ ‬sass‭: {‬
    ‭ ‬dist‭: {‬
    ‭ ‬options‭: {‬
    ‭ ‬style‭: ‘‬expanded‭’‬
    ‭ },‬
    ‭ ‬files‭: {‬
    ‭ ‘‬css/style.css‭’: ‘‬sass/style.scss‭’‬
    ‭ }‬
    ‭ }‬
    ‭ }‬
    ‭ });‬

    ‭ ‬grunt.registerTask‭(‘‬default‭’, [‘‬watch‭’]);‬
    ‭ ‬grunt.loadNpmTasks‭(‘‬grunt-contrib-sass‭’);‬
    ‭ ‬grunt.loadNpmTasks‭(‘‬grunt-contrib-watch‭’);‬
    ‭};‬
    [/javascript]

  3. במסוף (Terminal) נריץ 3 פקודות:
    [javascript]
    $ npm install -g grunt-cli
    [/javascript]

    [javascript]
    $ npm install
    [/javascript]

    [javascript]
    $ grunt
    [/javascript]

    נשאיר את המסוף פועל.
    בהתאם לקובץ ההגדרות, Grunt מפעיל פלאגין בשם watch, אשר מהדר את קבצי ה-Sass מחדש בכל-פעם שמתבצע בהם שינוי.


כיצד מגדירים משתנים ב-Sass?

scss (לפני הידור)

[css]
$body_width: 800px;

body {
width: $body_width;
}
[/css]

css (לאחר הידור)

[css]
body {
width: 800px;
}
[/css]


כיצד כותבים פונקציות?

scss

[css]
@function getTenPixels() {
@return 10px;
}

img {
width: getTenPixels();
}
[/css]

css

[css]
img {
width: 10px
}
[/css]


כיצד עושים שימוש חוזר בסט תכונות?

scss

[css]
%header {
font-size: 48px;
text-decoration: underline;
}

h1{
@extend %header;
color: blue;
}
[/css]

css

[css]
h1 {
font-size: 48px;
text-decoration: underline;
color: blue;
}
[/css]


כיצד מבצעים חישובים מתמטיים ב-Sass?

scss

[css]
body {
margin: $body_width / 10;
}
[/css]

css

[css]
body {
margin: 80px;
}
[/css]

חישובים אפשריים:
+ חיבור
– חיסור
* כפל
/ חילוק
% שארית


כיצד כותבים תכונות מקוננות (אחת בתוך השנייה) ב-Sass?

אם ב-CSS היינו כותבים את מסלול האלמנט בכל הגדרה, למשל:

[css]
.top .network li {…}
.top .network:after {…}
[/css]

הרי שב-Sass ניתן להגדיר תכונות של אלמנטים, בתוך אלמנטים אחרים. לדוגמה:

[css]
.top {
.network {
li {

}
}
}
[/css]

הוספת & לפני שם האלמנט, תחליף אותו עם שם האלמנט. לדוגמה:

[css]
.network {
&:after {

}
}
[/css]

יהפוך לאחר ההידור ל-:

[css]
.network:after {

}
[/css]

מהלך הניסוי:

מבנה התיקיות:

.
├── css
   ├── style.css
├── sass
   ├── device.scss
   ├── global.scss
   ├── screen.scss
   └── style.scss
├── Gruntfile.js
├── package.json
└── index.html

index.html


נקשר את הדף ל-CSS שמתקבל כתוצאה מהידור קבצי ה-scss.

[html]
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>iPhone 5 HTML</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

</body>
</html>

[/html]


ניצור איזורים שיכללו את מרכיבי הטלפון השונים:

  1. מכשיר
  2. מסך
  3. חלק עליון
  4. חלק תחתון

[html]
<div class="iphone">
<div class="screen">
<div class="top">

</div>
<div class="bottom_bg"></div>
</div>
</div>
[/html]

full


נוסיף לחלק העליון את השעה, אחוז הסוללה ומצב הקליטה:

[html]
<div class="top">
<div class="network">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<div class="clock">15:21</div>
<div class="battery">53%</div>
</div>
[/html]

top


ניצור איזורים שיכללו 24 אפליקציות.
על-מנת לעצב כל אפליקציה בצורה שונה, האפליקציות תהיינה ממוספרות ב-Class שלהן:

[html]
<div class="application1">
<div class="icon"><i class="symbol"></i></div>
<div class="caption">מצלמה</div>
</div>
<div class="application2">
<div class="icon"><i class="symbol"></i></div>
<div class="caption">קריאה</div>
</div>
<div class="application3">
<div class="icon"><i class="symbol"></i></div>
<div class="caption">חברים</div>
</div>
// Continue with this pattern until ‘application24’

</div>
[/html]

style.scss

זהו קובץ המאחד את שאר קבצי ה-scss.
תזכורת: ב-Gruntfile.js הגדרנו שהקובץ הזה יהודר ל-style.css (שה-HTML מקושר אליו).

  1. global.scss – הגדרות CSS כלליות
  2. device.scss – עיצוב המכשיר.
  3. screen.scss – עיצוב המסך.

[css]
@import "global";
@import "device";
@import "screen";
[/css]

global.scss

בקובץ זה אין תחביר Sass.
הסיבה ליצירתו היא הרצון שהוא יהודר ביחד עם האחרים לקובץ css.

[css]
html{
-webkit-font-smoothing: antialiased;
}
body {
text-align: center;
font: bold 12px arial;
color: #fff;
background: #27657F;
}
[/css]

device.scss

נגדיר כמשתנה, את רוחב המכשיר:

[css]
$iphone_width: 284px;
[/css]

נעצב בעזרת תכונות מקוננות את החלק העליון של המכשיר ומרכיביו:

[css]
.top {
div {
position: absolute;
top: 0.5%;
}
.network {
left: 7%;
margin-top: 0.2%;
font-size: 0.8em;
li{
float: left;
margin-right: 0.5em;
font-size: 1.7em;
line-height: 65%;
}
&:after {
position: absolute;
left: 65%;
content: "OPERATOR";
font-weight: normal;
}
}
.clock {
left: 45%;
}
.battery {
right: 5%;
}
}
[/css]

נעצב את גוף המכשיר:

[css]
.iphone {
$shadow_color: #e6e6e6;

margin: 0 auto;
width: $iphone_width;
height: 100%;
overflow: hidden;
border-radius: $iphone_width / 10;
background: #ccc;
border: $iphone_width / 100 solid $shadow_color;
&:after {
content: "\2610";
text-align: center;
font-size: 2em;
color: $shadow_color;
line-height: 150%;
display: block;
background: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
margin: 0 auto;
position: relative;
top: -7px;
box-shadow: inset 0 0 20px $shadow_color;
}
}
[/css]

נעצב את החלק התחתון של המכשיר:

[css]
.bottom_bg {
position: absolute;
bottom: 0;
width: 100%;
height: 16%;
background: rgba(255,255,255,0.5);
}
[/css]

screen.scss

[css]
.screen {
position: relative;
overflow: hidden;
width: $iphone_width – 22;
margin-bottom: -35px;
padding: 7px 0;
border-width: 50px 10px;
border-color: #fff;
border-style: solid;
background: -webkit-linear-gradient(to bottom, #244279 0%, #6fa2b8 19%, #6fa2b8 30%, #7788c0 59%, #6b7ebf 73%, #40759d 100%);
background: -moz-linear-gradient(to bottom, #244279 0%, #6fa2b8 19%, #6fa2b8 30%, #7788c0 59%, #6b7ebf 73%, #40759d 100%);
background: -ms-linear-gradient(to bottom, #244279 0%, #6fa2b8 19%, #6fa2b8 30%, #7788c0 59%, #6b7ebf 73%, #40759d 100%);
background: -o-linear-gradient(to bottom, #244279 0%, #6fa2b8 19%, #6fa2b8 30%, #7788c0 59%, #6b7ebf 73%, #40759d 100%);
background: linear-gradient(to bottom, #244279 0%, #6fa2b8 19%, #6fa2b8 30%, #7788c0 59%, #6b7ebf 73%, #40759d 100%);
}
[/css]

ניצור סט תכונות לשימוש חוזר עבור האייקונים:

[css]
%icon {
$icon_size: 50px;

position: relative;
width : $icon_size;
height : $icon_size;
margin : $icon_size / 5 $icon_size / 10 $icon_size / 20;
border-radius : $icon_size / 5;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
box-shadow : 0 0 0 1px rgba(134, 254, 101, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
[/css]

ניצור פונקציה שמחזירה ריווח עליון, בהתאם למיקום האפליקציה במסך.
לארבעת האפליקציות הראשונות ניתן ריווח של 10 פיקסלים.
לארבעת האחרונות ניתן ריווח של 5 פיקסלים.

[css]
@function getTopPaddingByItem($item) {
@if $item <=4 {
@return 10px;
}
@if $item >=21 {
@return 5px;
}
@return 0;
}
[/css]

ניצור מערך צבעים עבור האייקונים (איברי המערך מופרדים ברווח):

[css]
$icon_colors_from: #ff2666 #333 #ffdb44 #fff #86fe65 #ff5b39;
[/css]

נגדיר לולאה בת 4 הפעלות על כל אחד מ-6 הצבעים שהגדרנו (סה”כ 24 הפעלות – אחת לכל אפליקציה):

[css]
$j: 1;
@for $i from 1 through 4{
@each $icon_color_from in $icon_colors_from {

}
}
[/css]

ע”מ לגוון מעט, נשנה את צבע האפליקציה בכל הפעלה של הלולאה, על-ידי 2 פונקציות Sass לשינוי צבעים:

  1. adjust-hue($color, $degrees)
  2. darken($color, $amount)

[css]
$j: 1;
@for $i from 1 through 4{
@each $icon_color_from in $icon_colors_from {
$icon_color_from: adjust-hue($icon_color_from, 90 * $j);
$icon_colors_to: darken($icon_color_from, 25%);
}
$j: $j + 1;
}
[/css]

נגדיר class בשם “application” ומספר בסדר עולה (זהו המונה j):

[css]
$j: 1;
@for $i from 1 through 4{
@each $icon_color_from in $icon_colors_from {
$icon_color_from: adjust-hue($icon_color_from, 90 * $j);
$icon_colors_to: darken($icon_color_from, 25%);
.application#{$j} {
padding-top: getTopPaddingByItem($j);
position: relative;
display: inline-block;
z-index: 1;
height: 70px;
}
}
$j: $j + 1;
}
[/css]

בתוך “application”, נגדיר 2 classes:

  1. “icon” – שישתמש בסט ההגדרות %icon שהגדרנו מוקדם יותר.
  2. “symbol” – סמל האפליקציה, ממוקם במרכז הקוביה.

[css]
$j: 1;
@for $i from 1 through 4{
@each $icon_color_from in $icon_colors_from {
$icon_color_from: adjust-hue($icon_color_from, 90 * $j);
$icon_colors_to: darken($icon_color_from, 25%);
.application#{$j} {
padding-top: getTopPaddingByItem($j);
position: relative;
display: inline-block;
z-index: 1;
height: 70px;
.icon {
@extend %icon;
background: -webkit-linear-gradient(top, $icon_color_from 0%, $icon_colors_to 100%);
background: -moz-linear-gradient(top, $icon_color_from 0%, $icon_colors_to 100%);
background: -ms-linear-gradient(top, $icon_color_from 0%, $icon_colors_to 100%);
background: -o-linear-gradient(top, $icon_color_from 0%, $icon_colors_to 100%);
background: linear-gradient(top, $icon_color_from 0%, $icon_colors_to 100%);
}
.symbol {
position: absolute;
width: 26px;
height: 24px;
top: 50%;
left: 50%;
margin: -25% 0 0 -25%;
background: url(https://www.mcterano.com/blog/tutorials/404/images/symbol#{$j}.png) no-repeat;
}
}
$j: $j + 1;
}
}
[/css]

תוצאות הניסוי

צפו בהדמיית ה-HTML של iOS 7 (עובד בכרום, ספארי ופיירפוקס):
http://jsfiddle.net/mcterano/C8dmF/embedded/result,css,html

שי מסיסטרנו

מפתח ווב מאז 2007, בעברו מרצה במכללת Ness מ-2009 עד 2012.

הגב

3 תגובות על "ניסוי: הדמיית iOS7 עם HTML ו-CSS בלבד"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
Ardethian
Guest

פאדיחה רצינית מה שיש לכם פה.
על שמעתם?

Ardethian
Guest

אוקיי, אז מסתבר שאפשר להכניס לכם תגיות כגון בתגובות.
טפלו בעניין הזה, ותתחילו להשתמש ב- במאמרים מהסוג הזה. :)

Tal Koren
Member

תגיות pre.
אלה התגיות שלא רואים בתגובות הקודמות שלי.

wpDiscuz

תגיות לכתבה: