Jump to content
  • 0

Оцените заготовку для проектов

Zverushka

Asked by Zverushka,

 Share

Question

Zverushka Explorer

Zverushka

Posted
Posted

Перед тем, как начать верстать за деньги, решила сделать заготовку проекта.

Прошу оценить, поправить, посоветовать.

Папка: прототип проекта.

- папка css

- папка img

- папка js

- index.html

Содержание index.html:


<!doctype html>
<html lang="ru">
<head>
<title>Page</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="js/ie.js"> 
<![endif]-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css"> 
</head>
<body>
<div class="wrap">
  <header>
  </header>   
  <footer>
  </footer>
</div> <!-- wrap ends -->
</body> 
</html>

Содержание reset.css:


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Содержание style.css:


body {
}
/*  HEADER  */
header {}
/*  NAVIGATION  */
nav {
}
.menu {

}
/*  ARTICLE  */
article {}
/*  SECTION  */
section {
}
/*  ASIDE  */
aside {}
/*  FOOTER  */
footer {
}

Содеражение ie.css:


<script>
var e =
("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split
);
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
lexxcode Explorer

lexxcode

Posted
Posted

reset - зло :)

Установку кодировки стоит указывать перед указанием title, там есть некоторые особенности в плане безопасности, в гугле найдется, если что.

А так в целом нормально, для начала, в будущем дополните уже своими заготовками

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

а я смотрю и думаю что же это за такое? ;)

Хотя почти весь джс на DOM ready выполняется, но помню в хроме как-то был баг со скриптами перед стилями.

Стили до джса, потому что джс для ие может быть не только html5shiv(ну я имею ввиду джс для понимания новых тегов)

по поводу сброса -- раньше тоже думал что ресет это зло. Сейчас мнение такое:

лучше один раз применить сброс, чем постоянно что-то обнулять.

А для элементов которые будут вводится через визивиг написать свои стили. Для всех сразу не напишешь так как незнаешь что там будет, но для самых популярных можно.

Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted

А я раньше ресеты использовал, а потом понял, что сначала сбрасывать, а потом переопределять это бессмысленная трата ресурсов и времени. Да и вреда от этих сбросов немерено. Лучше выполнять целевое определение, чем сброс, а потом снова определение

  • Like 2
Link to comment
Share on other sites
  • 0
ILL-JAH Explorer

ILL-JAH

Posted
Posted (edited)
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub,

sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;

А не проще так:

* { margin: 0;padding: 0;border: 0; и тд.}?

var e =("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split);

А просто в массив нельзя запихнуть?

Charset определяется до title. Ибо если в title будут символы из любой многобайтовой кодировки (например кириллические), то могут возникнуть кракозяблы.

Edited by ILL-JAH
Link to comment
Share on other sites
  • 0
wwt Explorer

wwt

Posted
Posted (edited)

Опечатки в коде н а мой взгляд нужно вот так:

<script>
var e = "article,aside,figcaption,figure,footer,header,hgroup,nav,section,time".split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>

А не проще так:

* { margin: 0;padding: 0;border: 0; и тд.}?

...

Проще не значит лучше. В перебор попадают элементы для которых сброс не требуется.

А просто в массив нельзя запихнуть?

можно но не обязательно, плюс по количеству символов выходит меньше и код компактнее выглядит:


var e ="article,aside,figcaption,figure,footer,header,hgroup,nav,section,time".split(',');
var e = ["article","aside","figcaption","figure","footer","header","hgroup","nav","section","time"];

Zverushka посмотрите возможно переймете какието идеи и для себя http://html5boilerplate.com/

Edited by wwt
Link to comment
Share on other sites
  • 0
ILL-JAH Explorer

ILL-JAH

Posted
Posted
по количеству символов выходит меньше и код компактнее выглядит:

А по времени, насколько я знаю, больше. JS все ровно создаёт массив из подстрок. Просто на работу метода split() время уходит.

Я не задр, но имхо вариант со split() - это оверинжиниринг ради сэкономленных 10 символов.

Link to comment
Share on other sites
  • 0
wwt Explorer

wwt

Posted
Posted
по количеству символов выходит меньше и код компактнее выглядит:

А по времени, насколько я знаю, больше. JS все ровно создаёт массив из подстрок. Просто на работу метода split() время уходит.

Я не задр, но имхо вариант со split() - это оверинжиниринг ради сэкономленных 10 символов.

ну так я и написал, можно, но не обязательно ))) я не сказал что это не верно.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept