آموزش طراحی ماشین حساب با CSS Grid
در این مقاله می خواهیم ظاهر یک ماشین حساب را با Css Grid از اول طراحی کنیم. قبل از آمدن Css Grid، ما عموما روی استفاده از دستورات float, display: inline-block و همه دستورات این شکلی تمرکز می کردیم.از دستورات جدید مثل grid-template, grid-gap, و grid-column/grid-row ممنونیم چون با آنها می توانیم این ماشین حساب را با تعداد کدهای کمتری طراحی کنیم.
اگر دنبال اطلاعات بیشتری در مورد آموزش CSS Grid هستید حتما این مقاله را مطالعه کنید.
ما می خواهیم این ماشین حساب را با CSS Grid پیاده سازی کنیم.
کارمان را با کار روی HTML شروع می کنیم. همه بخش ها را داخل کلاس calculator قرار می دهیم:
<div class="calculator">
<!-- the input -->
<input type="number">
<!-- the buttons -->
<div class="calculator-buttons">
<!-- buttons go here -->
</div>
</div>
اضافه کردن دکمه های ماشین حساب
حالا ما پایه کار را داریم. پس می خواهیم دکمه های ماشین حساب را اضافه کنیم.به این موارد نیاز خواهیم داشت:
- ۱۰ عدد : ۰ تا ۹
- یک دکمه برای پاک کردن
- یک دکمه “مساوی است با” برای انجام محاسبه
- ۴ عمل اصلی : ÷, ×, −, +
این دکمه ها به ترتیبی که باید دیده شوند، اضافه می کنیم:
...
<!-- the buttons -->
<div class="calculator-buttons">
<button class="calc-button">C</button>
<button class="calc-button">÷</button>
<button class="calc-button">7</button>
<button class="calc-button">8</button>
<button class="calc-button">9</button>
<button class="calc-button">×</button>
<button class="calc-button">4</button>
<button class="calc-button">5</button>
<button class="calc-button">6</button>
<button class="calc-button">−</button>
<button class="calc-button">1</button>
<button class="calc-button">2</button>
<button class="calc-button">3</button>
<button class="calc-button">+</button>
<button class="calc-button">0</button>
<button class="calc-button">=</button>
</div>
...
توجه کنید که مقداری فاصله بین خطوط برای خواناتر شدن قرار دادم. این فاصله ها را جایی قرار می دهیم که تصور می کنیم ردیف های Grid آنجا قرار خواهند گرفت.
استایل دهی سریع ماشین حساب
فعلا ماشین حساب قصه ما هیچ شباهتی به یک ماشین حساب نداره!
پس بیاید مقداری CSS اضافه کنیم تا کمی ظاهر بهتر پیدا کنند. اول برای ظاهر کلی ماشین حساب:
/* quick reset so all our padding is the right size */
* {
box-sizing: border-box;
}
/* add some spacing */
body {
background: #F6F6F6;
padding-bottom: 30px;
padding-top: 30px;
}
/* limit the width and center */
.calculator {
max-width: 400px;
margin: 0 auto;
border: 2px solid #111;
border-radius: 5px;
}
حالا کمی تغییر در شکل و سایز ماشین حساب ایجاد شد:
CSS دادن به دکمه ها
حالا کمی به دکمه ها CSS می دهیم قبل از اینکه سراغ تفریح با CSS Grid برویم. فعلا کدهای CSS را برای هر دکمه به صورت مجزا اعمال می کنید یعنی با نگهدارنده کاری نداریم .calculator-buttons فعلا. اون رو برای جادوی CSS Grid نگه داشتیم.
.calc-button {
background: rgba(0, 0, 0, 0.5); /* light background with opacity 50% */
border: 1px solid #111; /* black border */
padding: 20px;
color: #EEE; /* white text */
border-radius: 5px; /* rounded corners */
font-size: 22px; /* larger fonts */
cursor: pointer; /* make it look clickable */
}
CSS دادن به فیلد Input
کمی هم استایل به فیلد ورودی اعداد می دهیم تا به ماشین حساب مان بیشتر بیاید:
.calculator input {
/* reset basic form styles */
background: none;
border: none;
box-shadow: none;
outline: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid #111;
color: #333;
text-align: right;
font-size: 40px;
border-radius: 0;
}
خوب حالا دکمه ها و فیلد ظاهر مناسبی پیدا کردند!
استفاده از CSS Grid برای موقعیت دهی به دکمه ها
آخرین بخش از طراحی ماشین حساب مان شاید ساده ترین بخش آن باشد.می خواهیم از CSS Grid برای موقعیت دهی به دکمه ها استفاده کنیم. برای استفاده از آن باید طرح بندی که می خواهیم به نگهدارنده اصلی مان اعمال کنیم که اینجا .calculator-buttons است.
می توانید با اعداد زیر بازی کنید و نتایج را بررسی کنید اما ما ۴ ستون ایجاد می کنیم.
.calculator-buttons {
/* small spacing within our container */
padding: 20px;
/* the grid stuff! */
display: grid;
/* create 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
از دستور display: grid استفاده کردیم تا مطمئن شویم نگهدارنده یک grid است. بعد چهار ستون با واحد fr (مخفف fractional unit) ایجاد کردیم.
این به این معنی است که CSS 4 ستون می سازد که هم عرض هم هستند. یعنی هر ستون عرض ۲۵% خواهد داشت.
حتی نیاز نیست تعداد ردیف ها را مشخص کنیم . دکمه ها به صورت خودکار چینش می شوند و در ردیف بعدی قرار می گیرند.
میانبر
یک نکته در مورد CSS Grid این است که می توانید از دستور repeat() استفاده کنید تا نیازی به نوشتن ستون ها / سطرها نباشد. بنابراین کد بالا را به این صورت می توان بازنویسی کرد:
grid-template-columns: repeat(4, 1fr);
این دستور خصوصا وقتی می خواهید ستون های زیادی ایجاد کنید، بدرد می خورد.
اضافه کردن فاصله بین ستون ها
فعلا دکمه ها به هم چسبیده اند و ما باید بین شان مقداری فاصله اضافه کنیم تا شبیه دکمه ماشین حساب واقعی شوند.
برای اضافه کردن فاصله می توانیم از دستور زیر استفاده کنیم:
.calculator-buttons {
...
/* add the grid gap */
grid-gap: 15px;
}
حالا دکمه ها هم فاصله دار شدند!
دکمه های عریض تر
برای دکمه های C (پاک کردن) و ۰ ، می توانیم به راحتی عرض شان را افزایش دهیم فقط باید به تنهایی دستوراتی بهشان اعمال کنیم (بوسیله Class). چون می خواهیم رنگ های متفاوتی نیز داشته باشند.
حالا کلاس های is-clear و is-zero را برای هر کدام از دکمه ها ایجاد می کنیم. اول این کلاس ها را به دکمه ها در HTML اضافه کنید بعد می توانید این کدهای CSS را اعمال نمایید:
/* span across 3 columns */
.is-zero,
.is-clear {
grid-column: span 3;
}
/* go blue */
.is-clear {
background: #3572DB;
}
رنگ آمیزی دکمه های مساوی
یک کلاس به دکمه های مساوی با هم اضافه کنید و آن را is-equals بنامید. این CSS را نیز برای آن اضافه کنید:
.is-equals {
background: #28D060;
}
فونت ماشین حساب
آخرین بخش از طراحی ماشین حساب این است که فونت مناسبی اعمال کنیم. می توانید به سایت fonts.google.com بروید و از بین فونت های Monospace فونتی که دوست دارید انتخاب کنید.من از فونت Space Mono استفاده کردم.
دستور @import را به بالای بخش CSS اضافه کنید و دستور font-face را به .calculator input و calc-buttons
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
.calculator input,
.calc-button {
font-family: 'Space Mono';
}
حله ! ماشین حساب مان طراحی شد.
