Add the tutorial about states #1
Conversation
Ramazanmak
force-pushed
the
feat/states
branch
from
99d4bb2 to
5116aa7
Compare
There was a problem hiding this comment.
На первом шаге слишком много стилей. Должен быть минимум - смотри предыдущую демку
There was a problem hiding this comment.
Я намеренно оставил столько стилей в начале. Подумал, что в первом уроке какие-то основы простого синтаксиса усвоили, а в этом уроке нужно сосредоточиться именно на states. А если минимум стилей оставить, то придётся объяснять, как делать простую вёрстку => сдвинется акцент урока.
There was a problem hiding this comment.
Как раз наоборот: надо, чтобы немного повторили базу. Совсем голое делать не нужно, но можно так, чтобы элементы со states надо было сначала чуть стилизовать. Надо так рассчитать, что шагов на 10 набралось материала
states/0/index.html
Outdated
| <link rel="stylesheet" href="style.css"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH13u"> |
There was a problem hiding this comment.
Зачем -ShortTsd200ms? Используй дефолтный
states/0/index.html
Outdated
| </head> | ||
| <body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH13u"> | ||
|
|
||
| <div class="Ps-a W100p H100vh Bgc#242d34 D-f Jc-c Ai-c"> |
There was a problem hiding this comment.
Вернее, раз он тут чисто одноразовый для подложки, можно использовать дефолтный цвет из браузера. Там же их много, типа grey и тд. Просто hex в утилитах указывать - особый случай, который в образцовой демке не стоит без надобности юзать
states/0/index.html
Outdated
| </div> | ||
|
|
||
| <!-- Caption--> | ||
| <div class="Flg0.9 H100p Fnw700 Fns5.5u D-f Ai-c"> |
There was a problem hiding this comment.
Flg0.9 - это что-то странное. Нельзя проще?
There was a problem hiding this comment.
Fns5.5u - зачем дробное? У нас же не pixel perfect верстка
states/0/index.html
Outdated
| <div class="Flg0.1 H100p P0.5u;0"> | ||
| <!-- Save button --> | ||
| <button class="btn Ml-a Bgc-$accent900 D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd "> | ||
| <span class="Lnh100p"> |
There was a problem hiding this comment.
Это для того, чтобы слово "Save" было в кнопке по центру, а не чуть ниже центра. Там просто по умолчанию высота строки чуть больше, чем размер шрифта, поэтому сам находится в середине по вертикали, а вот текст прижат к низу этого блока, поэтому в итоге текст чуть ниже середины.
There was a problem hiding this comment.
Убрал Lnh100p в девтулзах обоих браузеров - ничего не поменялось
There was a problem hiding this comment.
Вот с Lnh100p:
А вот без него:
Мне кажется, что разница есть - без него надпись ниже)
states/0/index.html
Outdated
|
|
||
| <!-- Name --> | ||
| <div> | ||
| <label for="name" class="D Ps-r Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx"> |
There was a problem hiding this comment.
Если input внутри label, то связывать через for не надо
states/0/index.html
Outdated
| <div> | ||
| <label for="location" class="D Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx"> | ||
| <span class="D Mb1u">Location</span> | ||
| <input maxlength="100" id="location" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Planet Earth"> |
There was a problem hiding this comment.
Если placeholder пустой, то и указывать его не надо
states/0/index.html
Outdated
| <label for="Bio" class="D Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx"> | ||
| <span class="D Mb1u">Bio</span> | ||
|
|
||
| <textarea id="Bio" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900 Txw-w Rs-n" type="text" placeholder="" >A professional Frontend dev and killer-feature maker with 20 years of experience</textarea> |
There was a problem hiding this comment.
Ol-n раньше времени. Надо убирать только при назначении states
states/-1/index.html
Outdated
| </div> | ||
|
|
||
| <!-- The part with the inputs --> | ||
| <div class="Mb5u_:div P0;5u_:div Tsd-$shortTsd_:label Tsd-$shortTsd_:span"> |
There was a problem hiding this comment.
На названия тегов завязываться не надо. В крайнем случае, допустимо на input для css only интерактивности
states/-1/index.html
Outdated
|
|
||
| <!-- Name --> | ||
| <div> | ||
| <label for="name" class="D Ps-r Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h"> |
There was a problem hiding this comment.
Ps-r - можно использовать дефолтное значение утилиты, оно такое же
states/-1/index.html
Outdated
|
|
||
| <!-- Name --> | ||
| <div> | ||
| <label for="name" class="D Ps-r Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h"> |
There was a problem hiding this comment.
Bd1;s;$accent600 - вижу, что меняется только цвет. Есть же Bdc
states/0/index.html
Outdated
| <div class="Mt-$headerH H50u Ov-h Ps-r D-f Jc-c Ai-c Mb20u"> | ||
| <!-- Wallpaper--> | ||
| <img src="img/wallpaper.jpg" class="D P0;1 W100p Ps-r" alt="wallpaper"> | ||
| <div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u Bgc-$hover400 Tsd-$shortTsd -Ctx-wallpaper"> |
There was a problem hiding this comment.
hover - не самое подходящее название для цвета
states/0/index.html
Outdated
|
|
||
| <!-- Change wallpaper button--> | ||
| <div class="Bgc-$hover400 Tsd-$shortTsd Bdrd100p P2u O0"> | ||
| <svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" > |
There was a problem hiding this comment.
Чтобы каждый раз не писать у svg Fi-cc, надо вставить в самом спрайте у иконок fill="currentColor"
There was a problem hiding this comment.
И зачем P0.5u, если padding у родителя есть?
states/0/index.html
Outdated
| <div class="Ps-a Mxw600 W90p H160u Mxh90vh Bgc-black T5p Bdrd5u Ovy-s P0;0;5u"> | ||
| <!-- Header --> | ||
|
|
||
| <header class="P2u;3u H-$headerH Ps-f Mxw600 W90p Bgc#000*0.5 -Bdtrd5u Zi20"> |
There was a problem hiding this comment.
Bgc#000*0.5 - прозрачность лучше через 50p указывать
No description provided.