Add the tutorial about states by Ramazanmak · Pull Request #1 · mlutcss/tutorials

Ramazanmak · 2025-12-08T02:12:03Z

No description provided.

mr150 · 2025-12-12T12:25:52Z

states/0/index.html

На первом шаге слишком много стилей. Должен быть минимум - смотри предыдущую демку

Я намеренно оставил столько стилей в начале. Подумал, что в первом уроке какие-то основы простого синтаксиса усвоили, а в этом уроке нужно сосредоточиться именно на states. А если минимум стилей оставить, то придётся объяснять, как делать простую вёрстку => сдвинется акцент урока.

Как раз наоборот: надо, чтобы немного повторили базу. Совсем голое делать не нужно, но можно так, чтобы элементы со states надо было сначала чуть стилизовать. Надо так рассчитать, что шагов на 10 набралось материала

mr150 · 2025-12-12T12:26:42Z

states/0/index.html

+	<link rel="stylesheet" href="style.css">
+	<title>Document</title>
+</head>
+<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH13u">


Зачем -ShortTsd200ms? Используй дефолтный

mr150 · 2025-12-12T12:28:15Z

states/0/index.html

+</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">


Цвет лучше в переменной

Вернее, раз он тут чисто одноразовый для подложки, можно использовать дефолтный цвет из браузера. Там же их много, типа grey и тд. Просто hex в утилитах указывать - особый случай, который в образцовой демке не стоит без надобности юзать

mr150 · 2025-12-12T12:32:52Z

states/0/index.html

+					</div>
+
+					<!-- Caption-->
+					<div class="Flg0.9 H100p Fnw700 Fns5.5u D-f Ai-c">


Flg0.9 - это что-то странное. Нельзя проще?

Fns5.5u - зачем дробное? У нас же не pixel perfect верстка

mr150 · 2025-12-12T12:33:30Z

states/0/index.html

+					<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">


Lnh100p зачем это?

Это для того, чтобы слово "Save" было в кнопке по центру, а не чуть ниже центра. Там просто по умолчанию высота строки чуть больше, чем размер шрифта, поэтому сам находится в середине по вертикали, а вот текст прижат к низу этого блока, поэтому в итоге текст чуть ниже середины.

Убрал Lnh100p в девтулзах обоих браузеров - ничего не поменялось

Вот с Lnh100p:

А вот без него:

Мне кажется, что разница есть - без него надпись ниже)

mr150 · 2025-12-12T12:35:13Z

states/0/index.html

+
+					<!-- Name -->
+					<div>
+						<label  for="name" class="D Ps-r Bd1;s;$accent600 C-$accent600 Bdrd2u P2u -Ctx">


Если input внутри label, то связывать через for не надо

mr150 · 2025-12-12T12:35:46Z

states/0/index.html

+					<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">


Если placeholder пустой, то и указывать его не надо

states/0/index.html

mr150 · 2025-12-12T21:07:07Z

states/0/index.html

+						<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>


Ol-n раньше времени. Надо убирать только при назначении states

states/0/index.html

mr150 · 2025-12-13T15:26:49Z

states/-1/index.html

+				</div>
+
+				<!-- The part with the inputs -->
+				<div class="Mb5u_:div P0;5u_:div Tsd-$shortTsd_:label  Tsd-$shortTsd_:span">


На названия тегов завязываться не надо. В крайнем случае, допустимо на input для css only интерактивности

mr150 · 2025-12-13T15:30:45Z

states/-1/index.html

+
+					<!-- 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">


Ps-r - можно использовать дефолтное значение утилиты, оно такое же

mr150 · 2025-12-13T15:31:35Z

states/-1/index.html

+
+					<!-- 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">


Bd1;s;$accent600 - вижу, что меняется только цвет. Есть же Bdc

mr150 · 2025-12-13T23:03:33Z

states/0/index.html

+				<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">


hover - не самое подходящее название для цвета

mr150 · 2025-12-13T23:06:06Z

states/0/index.html

+
+						<!-- 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" >


Чтобы каждый раз не писать у svg Fi-cc, надо вставить в самом спрайте у иконок fill="currentColor"

И зачем P0.5u, если padding у родителя есть?

mr150 · 2025-12-13T23:10:02Z

states/0/index.html

+		<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">


Bgc#000*0.5 - прозрачность лучше через 50p указывать

mr150

!

Ramazanmak added 2 commits November 4, 2025 06:59

feat: add the repository for the states-step of the course

774974f

fix: rebuild css to add color palette

d7b0765

Ramazanmak requested a review from mr150 December 8, 2025 02:12

Ramazanmak self-assigned this Dec 8, 2025

fix: change some stylistical choices

5116aa7

Ramazanmak force-pushed the feat/states branch from 99d4bb2 to 5116aa7 Compare December 8, 2025 12:33

mr150 reviewed Dec 12, 2025

View reviewed changes

states/0/index.html Outdated Show resolved Hide resolved

mr150 reviewed Dec 12, 2025

View reviewed changes

states/0/index.html Outdated Show resolved Hide resolved

mr150 reviewed Dec 13, 2025

View reviewed changes

mr150 requested changes Dec 13, 2025

View reviewed changes

fix: reshape stylistics and change the initial stage

6bfb7cf

Ramazanmak requested a review from mr150 December 15, 2025 15:14

fix: add images to the basic's folder that I've accidentally deleted

3445d4c

Conversation

Ramazanmak commented Dec 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mr150 Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mr150 Dec 13, 2025 •

edited

Loading

mr150 Dec 12, 2025 •

edited

Loading

mr150 Dec 13, 2025 •

edited

Loading

mr150 Dec 13, 2025 •

edited

Loading