Skip to content

Add the demo about at-rules #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ramazanmak wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add the demo about at-rules #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b29109c
feat: add at-rules tutorial
Ramazanmak Mar 15, 2026
0eb536b
fix: fix style.scss file
Ramazanmak Mar 17, 2026
026730d
fix: add scrollbar to the at-rules demo
Ramazanmak Mar 18, 2026
ddef7b2
Merge branch 'master' into feat/at-rules
Ramazanmak Mar 18, 2026
f346b1e
feat: add more @-rules and @supports
Ramazanmak Aug 8, 2026
03ddd87
fix: remove extra styles
Ramazanmak Aug 8, 2026
c319382
fix: correct the text of the textarea
Ramazanmak Aug 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added at-rules/-1/img/json.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions at-rules/-1/img/sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added at-rules/-1/img/wallpaper.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 123 additions & 0 deletions at-rules/-1/index.html
View file
Open in desktop

@mr150 mr150 Aug 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не рассмотрены диапазоны и max-width в брейкпоинтах, а это важная тема

@mr150 mr150 Aug 7, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно еще попробовать media от высоты с ключевыми словами (gMd) куда-то впихнуть. Они в новом дизайне mlut недавно пригождались

Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="Bgc-white C-$accent900 Fnf-mUss -HeaderH13u M0">

<div class="Ps-a W100p H100vh Bgc-grey D-f Jc-c Ai-c">

<div class="Ps-a Mxw600 -Sz100p @:h<=gMd_H100vh @:h>=gMd_H160u @:h>=gMd_M-a md_Mxh90vh Bgc-black md_M-a @:w>=600_Bdrd5u Ovy-s P0;0;5u Ctnn-form Ctnt-is">

@mr150 mr150 Aug 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@:w>=600_Bdrd5u - лучше не повторять 600 больше 1 раза, иначе будет плохой пример. При таком повторении, надо эту константу в конфиг добавить, но в демке это проблематично

<!-- Header -->

<header class="P2u @c:form:w>=600_P2u;3u H-$headerH Ps-f Mxw600 W100p Bgc#000*50p Bgc#000*0.5 @:w>=600_-Bdtrd5u Zi20">
<div class="D-f Ai-str Jc-fs -Sz100p">
<!-- Close button-->
<div class="W10p H100p ">
<button class="btn Bd-n C-$accent900 Bgc-tp H100p Apcr1 D Bdrd100p -Ts @:hv_Bgc-$secondary900_h @:hv-n_Bgc-$secondary900_a ">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#cross"></use>
</svg>
</button>
</div>

<!-- Caption-->
<div class="W90p @c:form:w<540_P0;3u H100p Fnw700 Fns4.5u md_Fns5.5u D-f Ai-c">
<span> Edit profile</span>
</div>

<div class="H100p P0.5u;0">
<!-- Save button -->
<button class="btn Ml-a Bgc-$accent900 @:hv_Bgc-$secondary850_h @:hv-n_Bgc-$secondary850_a D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 -Ts ">
<span class="Lnh100p"> Save </span>
</button>
</div>
</div>
</header>

<!-- Form's main part -->

<main class="P0 Ps">

<!-- Profile wallpaper-->
<div class="Mt-$headerH H35u md_H50u Ov-h Ps D-f Jc-c Ai-c Mb15u md_Mb20u">
<!-- Wallpaper-->
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps" alt="wallpaper">
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u @:hv_Bgc-$secondary200_h Bgc-$secondary400 -Ts -Ctx-wallpaper">

<!-- Change wallpaper button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#photo"></use>
</svg>
</button>

<!-- Delete wallpaper button -->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#cross"></use>
</svg>
</button>

</div>
</div>

<div class="Ps-a Zi10 H25u md_H30u D-ib Bd2;s;black Bdrd100p Apcr1 T23u md_T35u L5u">
<!-- Profile photo-->
<img src="img/json.jpg" class="D Bdrd100p Mxw100p" alt="profile-photo">

<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$secondary200 @:hv_O0 @:hv_O1_h O1 -Ts">
<!-- Change profile photo button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a C-$accent900 -Ts Bdrd100p P2u">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#photo"></use>
</svg>
</button>
</div>
</div>

<!-- The part with the inputs -->
<div class="Mb6u_:div P0;2u_:div sm_P0;3u_:div md_P0;5u_:div -Ts_:input,:textarea C-$accent500_:input,:textarea ">

<!-- Name -->
<div>
<label class="D Ps <md_Fns3u @:w>=gMd:w<=gLg_Fns3.5u lg_Fns4u Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">

@mr150 mr150 Aug 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Зачем @:w>=gMd:w<=gLg_Fns3.5u, если это же можно в брейкпоинтах прописать: md:lg_Fns3.5u. Именно про эти диапазоны и шла речь: показать мощь синтаксиса для брейкпоинтов

<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Name</span>
<input maxlength="50" class="D <md_Fns4u Fns4.5u W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Json Statement">
</label>
</div>

<!-- Bio-->
<div>
<label class="D <md_Fns3u @:w>=gMd:w<=gLg_Fns3.5u lg_Fns4u Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Bio</span>

<textarea class="D <md_Fns4u Fns4.5u Fds-c @s:!Fds-c_H2lh W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900 Txw-w Rs-n " type="text">A professional Frontend dev and killer-feature maker with 20 years of experience</textarea>

@mr150 mr150 Aug 9, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В at-rules утилиты всегда с маленькой буквы. И там возможно хватит @s:!fds_H2lh, ведь поддержку свойства проверяем, а не конкретное значение

</label>
</div>

<!-- Location -->
<div>
<label class="D <md_Fns3u @:w>=gMd:w<=gLg_Fns3.5u lg_Fns4u Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Location</span>
<input maxlength="100" class="D <md_Fns4u Fns4.5u W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Planet Earth">
</label>
</div>

<!-- Website -->
<div>
<label class="D <md_Fns3u @:w>=gMd:w<=gLg_Fns3.5u lg_Fns4u Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Website</span>
<input maxlength="100" class="D <md_Fns4u Fns4.5u W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="https://mlut.style/">
</label>
</div>
</div>

</main>
</div>
</div>
</body>
</html>
Loading