ניסוי: הדמיית 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 Comments on "ניסוי: הדמיית iOS7 עם HTML ו-CSS בלבד"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
Ardethian
Guest

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

Ardethian
Guest

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

Tal Koren
Member

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

wpDiscuz

תגיות לכתבה: