هدف اصلی همه توسعه دهندگان، توسعه سریعتر، به ویژه راه اندازی سریع است. ده‌ها فریمورک در چند سال گذشته در دسترس هستند که هدفشان این است که نمونه‌های اولیه ما را در عرض چند دقیقه آماده کنند.

متأسفانه بسیاری از این چارچوب‌ها به سرعت تاریخ‌گذاری می‌شوند، زیرا نیازمندی‌های پروژه تکامل می‌یابند، و باید به‌روزرسانی یا جایگزین شوند.

اگر به دنبال یک چارچوب جدید هستید که مشکلاتی را که راه‌حل‌های قدیمی‌تر در حال حاضر با آن‌ها روبرو می‌شوند، حل کند، در حالی که گردش کار شما را به حداکثر می‌رساند، نمی‌توانید در این مورد اشتباه کنید. HTML Kickstart.

شبکه

گرید یکی از مهم ترین جنبه های هر چارچوبی است، به خصوص که یک شبکه انعطاف پذیر تعیین می کند که یک سایت چقدر می تواند پاسخگو باشد.

HTML Kickstart گزینه یک شبکه انعطاف پذیر یا یک شبکه استاندارد (غیر قابل انعطاف) را در اختیار ما قرار می دهد – اگرچه با توجه به تسلط روزافزون دستگاه های تلفن همراه مشخص نیست که چه زمانی از شبکه دوم استفاده می کنید.

برای ایجاد یک شبکه منعطف با دو ستون هم اندازه، از موارد زیر استفاده می کنیم:

<div class="grid flex">
 <div class="col_6 column">Content Here</div>
 <div class="col_6 column">Content Here</div>
</div>

همانطور که می بینید، تمام کاری که ما انجام داده ایم این است که چند کلاس ساده را به سه div اضافه کنیم. اگر شبکه غیر قابل انعطاف را ترجیح می دهید، تنها کاری که باید انجام دهید حذف آن است خم شدن نام کلاس از قسمت بیرونی.

(توجه داشته باشید که شبکه انعطاف پذیر به عرض کل صفحه کشیده می شود، در حالی که شبکه غیر منعطف حداکثر عرض 1024 پیکسل دارد.)

علاوه بر کلاس های مبتنی بر بالا، تعدادی کلاس کمکی وجود دارد که می توانیم از آنها استفاده کنیم، به عنوان مثال:

• نمایش دسکتاپ و مخفی دسکتاپ با این کلاس ها می توانید تصمیم بگیرید که آیا می خواهید آن شبکه قابل مشاهده باشد یا خیر روی یک کامپیوتر رومیزی
• نمایش تبلت و مخفی کردن تبلت همین مفهوم در اینجا صدق می کند، اما برای دستگاه های تبلت.
• نمایش تلفن و مخفی کردن تلفن بار دیگر، این کلاس‌ها دید را دیکته می‌کنند، این بار برای تلفن‌های هوشمند.

اگر بخواهیم شبکه دو ستونی خود را پنهان کنیم روی برای مثال در گوشی های هوشمند از کدی مانند زیر استفاده می کنیم:

<div class="grid flex hide-phone">...</div>

جهت یابی

HTML Kickstart سه گزینه منو به ما می دهد: چپ عمودی، راست عمودی و افقی.

نسخه ای که اغلب می خواهید، منوی افقی است. برای کدنویسی آن، فقط به لیست های نامرتب نیاز داریم:

<ul class="menu">
 <li class="current"><a href="">Item 1</a></li>
 <li><a href="#">Item 2</a>
 <ul>
 <li><a href="#">Sub Item</a></li>
 <li><a href="#">Sub Item</a></li>
 </ul>
 </li>
 <li><a href="#">Item 3</a></li>
</ul>

اگر منوی سمت چپ عمودی می خواهید، فقط اضافه کنید عمودی به ul افتتاحیه، و اگر می‌خواهید یک منوی راست عمودی داشته باشید، اضافه کنید راست عمودی، مانند:

<ul class="menu vertical">...</ul>
<ul class="menu vertical right">...</ul>

کدنویسی منوهای پاسخگو با HTML Kickstart واقعاً به همین سادگی است.

سبک های پیش فرض

HTML Kickstart چند سبک پایه عالی را از حالت خاموش به شما می دهد. بدیهی است که شما می خواهید آنها را برای پروژه خود اصلاح کنید، اما برای نمونه سازی سریع، آنها بیش از حد کافی هستند.

وقتی صحبت از تایپوگرافی می شود، HTML KickStart از استیو متسون استفاده می کند آریمو فونت به صورت پیش فرض می توانید طیف کاملی از تنظیمات نوع را مشاهده کنید اینجا.

سبک‌های دکمه‌ها همیشه در هر چارچوبی مرکز توجه زیادی هستند و HTML Kickstart با دکمه‌هایی در اشکال و اندازه‌ها عرضه می‌شود. شما حتی نیازی به استفاده از کلاس ها برای این کار ندارید، فقط یک برچسب دکمه ایجاد کنید و استایل ها به طور خودکار اعمال می شوند.

اگر ترجیح می‌دهید استایل دکمه‌ها روی یک تگ لنگر اعمال شود، فقط باید آن را اضافه کنید دکمه کلاس به آن:

<a href="https://www.webdesignerdepot.com/" class="button">WDD</a>

ما همچنین می توانیم رنگ ها را به راحتی اعمال کنیم. فقط نام رنگ مورد نظر خود را اضافه کنید:

<button class="blue">Blue</button>

همچنین تعدادی سبک مختلف وجود دارد که می توانیم اعمال کنیم:

<!-- Pill Style -->
<button class="pill">Pill</button>
<!-- Pop -->
<a class="button pop" href="#">Pop</a>
<!-- Inset Button-->
<button class="inset">Inset</button>
<!-- Square Button-->
<button class="square">Square</button>

در نهایت، ما همچنین گزینه ایجاد یک نوار دکمه، با نحوی شبیه به منوی افقی را داریم:

<ul class="button-bar">
 <li><a href="">New</a></li>
 <li><a href="">Upload File</a></li>
 <li><a href="">Delete</a></li>
</ul>

تصاویر

HTML Kickstart با ایجاد پنجره‌های بازشو برای گالری‌ها و تصاویر برای شما به بهبود UX کمک می‌کند. این راه حل بسیار بهتر از باز کردن یک پنجره جدید است.

برای ایجاد یک گالری پاپ آپ کاملاً کاربردی مبتنی بر جاوا اسکریپت تنها چیزی که نیاز داریم کد زیر است:

<div class="gallery">
 <a href="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/image1.jpg">
 <img src="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/thumb1.jpg" width="100" height="100" />
 </a>
 <a href="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/image2.png">
 <img src="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/thumb2.png" width="100" height="100" />
 </a>
</div>

پیاده سازی آن ساده است و به یک خط جاوا اسکریپت نیاز ندارید.

تصاویر همچنین دارای کلاس های کمکی عالی هستند، مانند عنوان این کلاس اعمال شده روی یک تصویر نشان می دهد عنوان تصویر به عنوان یک کپشن مدل دار:

<img class="caption" title="My Caption" src="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/image.png"/>

ما همچنین داریم تراز-راست و تراز چپ کلاس هایی که می توانیم برای شناور کردن تصاویر به چپ و راست استفاده کنیم. (HTML Kickstart کمی حاشیه اضافه می کند تا تصاویر در مقابل متن قرار نگیرند.)

<img class="align-left" src="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/align.jpg"/>

و البته، HTML Kickstart همچنین اسلایدشوهای ساده ای را در اختیار ما قرار می دهد. استفاده می کند BXSlider نوار لغزنده برای رسیدگی به این.

کد یک اسلایدر ساده چیزی شبیه به این خواهد بود:

<ul class="slideshow">
 <li><img src="https://www.webdesignerdepot.com/2014/01/how-to-kickstart-your-html/img/image1.png”/></li>
 <li><img src="img/image2.png”/></li>
 <li>
 <h3>A Content Slider</h3>
 <p>This slider handles HTML content as well as images.</p>
 </li>
</ul>

نوار لغزنده برای دستگاه های تلفن همراه با لمس فعال است و بار دیگر، شما نیازی به یک خط جاوا اسکریپت ندارید.

تشکیل می دهد

آخرین چیزی که می خواهم به شما معرفی کنم فرم ها هستند. فرم ها برای هر چارچوبی حیاتی هستند، زیرا یکی از سخت ترین چیزها برای استایل دادن هستند روی یک وب page.

HTML Kickstart در مورد فرم ها سادگی خود را حفظ می کند و یک فرم عمودی را می توان به سادگی ایجاد کرد:

<form class=”vertical”>
 <label for="name">Name</label>
 <input id="name" type="text" placeholder=”Your Name” />
 <label for="age">Age</label>
 <select id="age">
 <option value="0">-- Choose --</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 </select>
 <textarea id="notes" placeholder="Some Notes"></textarea>
</form>

همانطور که می بینید، من به سختی مجبور به استفاده از هیچ کلاسی برای این فرم شده ام. تمام کاری که انجام دادم اضافه کردن کلاس است عمودی در بالا به طوری که عناصر فرم به صورت درون خطی در نظر گرفته نشوند.

یکی از بخش های مورد علاقه من در HTML Kickstart، اعلان های خطای ساده ای است که در فرم ها استفاده می شود:

<!-- Error -->
<div class="notice error">Error Notice <a href="#close" class="icon-remove"></a></div>
<!-- Warning -->
<div class="notice warning">Warning Notice <a href="#close" class="icon-remove"></a></div>
<!-- Success -->
<div class="notice success">Success Notice <a href="#close" class="icon-remove"></a></div>

نتیجه

هزاران گزینه وجود دارد که با HTML Kickstart ارائه می شود، ما واقعاً فقط سطح را خراشیده ایم. مجموعه عظیمی از نمادها، نکات ابزار و حتی برگه ها وجود دارد.

نقطه قوت واقعی HTML Kickstart سادگی کد آن است. فقدان div ها و کلاس های اضافی آن را به صرفه جویی در زمان عالی تبدیل می کند، کد کمتر به معنای خطاهای کمتر است. اگر به دنبال این هستید که کدنویسی HTML خود را از ابتدا شروع کنید، یا اگر به دنبال یک چارچوب ساده برای نمونه سازی سریع یک طراحی HTML هستید، Kickstart یک گزینه عالی است.

آیا از HTML Kickstart استفاده کرده اید؟ آیا چارچوب متفاوتی را ترجیح می دهید؟ در نظرات به ما اطلاع دهید.