feat: update readme and adaptive files

2024-06-30 13:28:52 +03:00
parent c78962f147
commit 887968def7
7 changed files with 12 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
    + модификаторы отделяются от имения блока или элемента двумя дефисами (--)
    + значение модификатора отделяется от его имени двумя дефисами (--)
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
+* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
 <!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила  -->


@@ -26,7 +27,7 @@
 1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css 
 2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
 3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html" 
-3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html"
+3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css


 ### Примечания
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1,4 +1,4 @@
 /* Стили для лептопов  */
-@media only screen and (max-width: 1720px) {
+@media only screen and (min-width: 992px) and (max-width: 1400px) {

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


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

    
 }
--- a/assets/css/gp-style-ultra.css
+++ b/assets/css/gp-style-ultra.css
@@ -1,2 +1,4 @@
 /* Стили для ультрашироких экранов  */
-@media only screen and (min-width: 1720px) {}
+@media only screen and (min-width: 1400px) {
+
+}
--- a/index.html
+++ b/index.html
@@ -8,11 +8,11 @@
        <meta name="description" content="SEO Description">
        <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 (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: 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>
    <body>

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