Skip to content
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

Добавляет статью про Псевдоприватные кастомные свойства #5577

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Добавляет статью про Псевдоприватные кастомные свойства #5577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
82c62dd
feat: Create article about virtual variables
Alex-Andr-19 Dec 6, 2024
c6ec4cb
fix: Some fixes
Alex-Andr-19 Dec 6, 2024
a47bbf1
Update recipes/virtual-variables/index.md
Alex-Andr-19 Dec 6, 2024
d108002
fix: Change concept of technology presentation
Alex-Andr-19 Dec 24, 2024
f39eb72
Добавляет мету, исправляет форматирование
TatianaFokina Dec 25, 2024
6e6fd67
Добавляет папку автора
TatianaFokina Dec 25, 2024
6d9fec9
Update recipes/pseudo-private-custom-property/index.md
Alex-Andr-19 Jan 9, 2025
12ecbe8
Update recipes/pseudo-private-custom-property/index.md
Alex-Andr-19 Jan 9, 2025
3a3a91d
feat: Change type of article
Alex-Andr-19 Jan 9, 2025
be7d585
fix: Content fix
Alex-Andr-19 Jan 9, 2025
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
50 changes: 50 additions & 0 deletions css/pseudo-private-custom-property/demos/products-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Products Demo</title>

<style>
* {
box-sizing: border-box;
}

.product-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;

.product-list__item {
width: 100%;
aspect-ratio: 4/5;
}
}

.product-card {
--_background-color: var(--background-color, #46ad8e);
--_border-color: var(--border-color, #ffffff);

background-color: var(--_background-color);
border: 1px solid var(--_border-color);
border-radius: 12px;

&.secondary {
--background-color: #999999;
}

&.advertisment {
--background-color: #efcf2f;
}
}
</style>
</head>
<body>
<section class="product-list">
<div class="product-list__item product-card primary"></div>
<div class="product-list__item product-card primary"></div>
<div class="product-list__item product-card secondary"></div>
<div class="product-list__item product-card advertisment"></div>
</section>
</body>
</html>
86 changes: 86 additions & 0 deletions css/pseudo-private-custom-property/demos/text-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

<link rel="stylesheet" href="./style.css" />

<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

.clamp-text-lines {
--_lines-count: var(--lines-count, 3);

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--_lines-count);
overflow: hidden;
}

body {
padding: 16px;
}

.article-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;

margin-top: 24px;

.article-item {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;

padding: 12px;

border: 2px solid #444444;
border-radius: 12px;

.article-item__description {
--lines-count: 4;
}
}
}
</style>
</head>
<body>
<h1 class="static-font__XL">Lorem, ipsum dolor.</h1>

<section class="article-list">
<article class="article-item">
<h2 class="static-font__L">Lorem ipsum dolor sit amet.</h2>

<p class="article-item__description static-font__M clamp-text-lines">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam unde
perspiciatis debitis corporis odit illo ducimus quasi qui saepe
consectetur, necessitatibus veritatis fugiat esse architecto delectus
exercitationem. Dolores recusandae officia quaerat illo.
</p>
</article>

<article class="article-item">
<h2 class="static-font__L">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h2>

<p class="article-item__description static-font__M clamp-text-lines">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit vero
aut, aliquid quas voluptatibus quos, libero soluta qui et odio
voluptatum dolor maiores veniam adipisci placeat facilis
necessitatibus ducimus hic repudiandae. Modi optio natus saepe
asperiores quos eligendi consequuntur, numquam fuga voluptatem sed
rerum.
</p>
</article>
</section>
</body>
</html>
57 changes: 57 additions & 0 deletions css/pseudo-private-custom-property/demos/text-demo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
* {
box-sizing: border-box;
}

[class*="static-font"] {
--_font-size: var(--font-size, 1em);
--_line-height: var(--line-height, calc(var(--_font-size) + 4px));

font-size: var(--_font-size);
line-height: var(--_line-height);
}

.static-font__XL {
--font-size: 36px;
--line-height: 42px;

@media (width <=1024px) and (width >=510px) {
--font-size: 30px;
--line-height: 36px;
}

@media (max-width < 510px) {
--font-size: 26px;
--line-height: 30px;
}
}

.static-font__L {
--font-size: 28px;
--line-height: 36px;

@media (width <=1024px) and (width >=510px) {
--font-size: 24px;
--line-height: 30px;
}

@media (max-width < 510px) {
--font-size: 18px;
--line-height: 20px;
}
}

.static-font__M {
--font-size: 20px;
--line-height: 26px;

@media (width <=1024px) and (width >=510px) {
--font-size: 18px;
--line-height: 22px;
}

@media (max-width < 510px) {
--font-size: 16px;
--line-height: 20px;
}
}

62 changes: 62 additions & 0 deletions css/pseudo-private-custom-property/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: "Псевдоприватные кастомные свойства"
descriptioin: "Как создать миксины на чистом CSS."
authors:
- alex-andr-19
related:
- tools/preprocessors
- css/layer
- css/cascade
tags:
- article
---

## Задача

В силу перехода CSS к встроенной вложенности, а также из-за естественного развития CSS многие преимущества препроцессоров стали отходить на второй план. Появились [кастомные свойства](/css/custom-properties/), произошёл взрыв CSS-функций (`color-mix`, [`counter`](/css/css-counters/), тригонометрические функции и другие).

Миксины — последняя причина держаться за препроцессоры. Некоторые особенности миксинов всё ещё заменить не получится. Но есть решение, которое заменит собой большую часть миксинов – _псевдоприватные кастомные свойства_.

## Решение

```html
<section class="product-list">
<div class="product-list__item product-card primary"></div>
<div class="product-list__item product-card primary"></div>
<div class="product-list__item product-card secodary"></div>
<div class="product-list__item product-card advertisment"></div>
<div class="product-list__item product-card advertisment"></div>
</section>
```

```css
.product-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;

.product-list__item {
width: 100%;
aspect-ratio: 4/5;
}
}

.product-card {
--_background-color: var(--background-color, #46ad8e);
--_border-color: var(--border-color, #ffffff);

background-color: var(--_background-color);
border: 1px solid var(--_border-color);
border-radius: 12px;

&.secondary {
--background-color: #999999;
}

&.advertisment {
--background-color: #efcf2f;
}
}
```

<iframe title="Пример использования кастомных свойств" src="demos/products-demo/" height="300"></iframe>
6 changes: 6 additions & 0 deletions people/alex-andr-19/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
name: 'Алекс'
url: https://github.com/Alex-Andr-19
badges:
- first-contribution-small
---
Loading