is_реклам:

пошук, категорії та ін. показати ▼

сніпети коду для швидкого старту веб проекту

сніпети коду для швидкого старту веб проекту
автор опубліковано

Кожен новий проект починається з налаштування середовища. У веб розробці кожна із сторінок починається з базової розмітки. Даний пост є свого роду підбіркою найбільш популярних і необхідних заготовок для швидкого старту веб проекту. Шматки коду можна навісити на гарячі клавіші своєї IDE і в подальшому не задумуватись де взяти ту чи іншу функціональність.

1. базовий HTML5 шаблон

Даний сніпет містить шаблон HTML5 сторінки, в ньому включено підключення зовнішніх файлів зі стилями та скриптами. Також є посилання на jQuery 1.9.1 із Goggle CDN, а для браузера компанії Microsoft присутня заготовка, що для ІЕ версії нижче 9 коректно підтримує HTML5 теги. Також до даного шаблону додано кілька мета тегів для якіснішого відображення мобільними пристроями, адже без них зараз нікуди, а адекватна робота сторінки на пристрої завжди буде плюсом.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Default Page Title</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">

  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>


  <script src="scripts.js"></script>
</body>
</html>

2. клас .clearfix для позиціонування float елементів

Кожному веб розробнику доводилось стикатись із ситуацією, коли бажаний блок елементів аж ніяк не хоче коректно позиціонуватись серед інших. Наприклад: блок футер не бажає ставати під контентом по центру, а прилипає до правої чи лівої границі або, ще гірше, іде в ряд із контентом, тому випадає із загальної картини. Для таких ситуації існує певна хитрість: долучіть даний шматок css коду до вашого файлу стилів, і навішайте клас на вередливий блок. Зручно даний стиль використовувати разом із reset.css файлом (про нього в наступному пункті).

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

3. reset.css

Не тільки розробники, а й користувачі знають, що будь-який сайт виглядає по-різному в різних браузерах. Підтверджую, що сьогодні підтримувати сучасні браузери набагато легше ніж раніше, з одного боку — вони краще стали підтримувати стандарти, з іншого — значна їх частина використовує схожий функціонал для відображення. Але проблема із початковими налаштуваннями залишилась. Мається на увазі, що, наприклад, в одному браузері будь-який заголовок має відступ 5 пікселів, в іншому ж — 10 і т.д. Для того, щоб якось звести все до одного, існують файли css, які скидають налаштування до встановлених у файлі, тому у різних браузерах початковий вигляд однаковий. Даних файлів в мережі є дуже багато, мій же варіант — об’єднання кількох різних варіацій, що потрапили до рук і використровувались в реальних проектах.

/*
	HTML5 Reset :: rest.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%; height: auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

4. користувацька гарнітура шрифта @font-face

Для підтримання корпоративного стилю на сторінках може бути використаний дизайнерський шрифт, наприклад для відображення заголовків статей, надписів на кнопках чи інших елементах. Кількість шрифтів на GoogleFonts звичайно ж вражає, але інколи необхідно використати гарнітуру клієнта, яку для нього малював дизайнер. В такому випадку на допомогу приходить CSS3.

Для підтримки більшої кількості браузерів, вам необхідно мати в наявності різні формати шрифта. Це як, наприклад, картинка у форматах .bmp, .jpg, .gif і т.д., так і в даному варіанті зі шрифтом. Для того, щоб згенерувати необхідні файли відвідайте Font2Web. Інструмент дивовижний, на вхід ви подаєте ваш шрифтовий файл, в результаті завантажуєте архів зі всіма необхідними форматами, адаптованими для максимальної сумісності із веб. Далі розміщуєте необхідні файли із архіву на своєму сервері, а в css додаєте наступний код:

@font-face{ 
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#webfont') format('svg');
}

h1 { font-family: 'MyFont', sans-serif; }
схоже за тегами

1 коментар

  1. Andrii пише: Відповіcти

    Щодо clearfix, можна content залишати порожнім, якщо використовувати display: table;

    А якщо не потрібна підтримка старих браузерів можна юзати скорочений варіант

    .сf:after {
    content:””;
    display:table;
    clear:both;
    }

Залишити коментар:

Яндекс цитирования UA TOP Bloggers