Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

feat: update readme and adaptive files

Browse Source
This commit is contained in:
Max
2024-06-30 13:28:52 +03:00
parent c78962f147
commit 887968def7
7 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -11,6 +11,7 @@
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) + модификаторы отделяются от имения блока или элемента двумя дефисами (--)
+ значение модификатора отделяется от его имени двумя дефисами (--) + значение модификатора отделяется от его имени двумя дефисами (--)
* из конечного HTML-файла убрать все комментарии, если такие имеются * из конечного HTML-файла убрать все комментарии, если такие имеются
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила --> <!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила -->
@@ -26,7 +27,7 @@
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css 1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css 2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html" 3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html"
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" 3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css
### Примечания ### Примечания

2
assets/css/gp-style-desktop.css
View File

@@ -1,4 +1,4 @@
/* Стили для лептопов */ /* Стили для лептопов */
@media only screen and (max-width: 1720px) { @media only screen and (min-width: 992px) and (max-width: 1400px) {
} }

2
assets/css/gp-style-mobile.css
View File

@@ -1,5 +1,5 @@
/* Стили для мобильных устройств */ /* Стили для мобильных устройств */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 576px) {
} }

2
assets/css/gp-style-tablet.css
View File

@@ -1,5 +1,5 @@
/* Стили для планшетов */ /* Стили для планшетов */
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 992px) {
} }

4
assets/css/gp-style-ultra.css
View File

@@ -1,2 +1,4 @@
/* Стили для ультрашироких экранов */ /* Стили для ультрашироких экранов */
@media only screen and (min-width: 1720px) {} @media only screen and (min-width: 1400px) {
}

2
index.html
View File

@@ -8,11 +8,11 @@
<meta name="description" content="SEO Description"> <meta name="description" content="SEO Description">
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0"> <link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" media="screen and (min-width: 1720px)" href="/assets/css/gp-style-ultra.css?v=1.0"> <link rel="stylesheet" media="screen and (min-width: 1720px)" href="/assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 1720px)" href="/assets/css/gp-style-desktop.css?v=1.0"> <link rel="stylesheet" media="screen and (max-width: 1720px)" href="/assets/css/gp-style-desktop.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="/assets/css/gp-style-tablet.css?v=1.0"> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="/assets/css/gp-style-tablet.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/assets/css/gp-style-mobile.css?v=1.0"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="/assets/css/gp-style-mobile.css?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
</head> </head>
<body> <body>

4
ui_kit.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="/assets/css/style-core.css"> <link rel="stylesheet" type="text/css" href="/assets/css/style-core.css">
</head> </head>
<style> <style>
/* Стили для выравнивания UI-элеметнов */ /* Стили для выравнивания UI-элеметнов для данной страницы */
.ui__ui-wrapper{ .ui__ui-wrapper{
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@@ -24,6 +24,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */
</style> </style>
<body class="ui"> <body class="ui">
<div class="ui__ui-wrapper"> <div class="ui__ui-wrapper">