🛠 Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков. Она не требует внешних зависимостей, имеет массу полезных функций и работает во всех современных браузерах и на сенсорных устройствах.

#инструменты #js

💡 Современные и эффективные CSS-раскладки

▍Часть 8

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой и седьмой частями.

▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)

Другой способ размещения дочерних элементов - использование ключевого слова span. В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13, а grid-columns: 2 / span 6 - аналогом grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

Видео-демонстрацию смотрите ниже под этим постом.

Продолжение следует...

#советы #coding #css

Выберите правильный вариант 👇🏼 #test #js

Обсудить тест можно в чате @webb_chat

💡 Современные и эффективные CSS-раскладки

▍Часть 9

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой и восьмой частями.

▍RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

В этом примере мы объединим некоторые из рассмотренных концепций создания отзывчивого интерфейса с автоматически позиционируемыми и гибкими дочерними элементами. Довольно удобно. Ключевые термины repeat, auto-(fit|fill) и minmax() можно запомнить с помощью акронима RAM.

Всё вместе это выглядит так:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

В следующей части продолжим данную тему.

Видео-демонстрацию смотрите ниже под этим постом.

Продолжение следует...

#советы #coding #css

🛠 Tina CMS — набор инструментов для редактирования сайтов на основе React. После подключения Tina к проекту Gatsby или Next.js ваш сайт становится полностью редактируемым, что дает возможность изменять текст, переупорядочивать элементы и многое другое.

#инструменты

🔥 Лучшее на канале за неделю

1. Современные и эффективные CSS-раскладки.

2. Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков.

3. 12-колоночная сетка: grid-template-columns: repeat(12, 1fr).

📑 Декларативный подход в Angular

Compliant-механизмы окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

#статьи #js #Angular #TypeScript

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

🛠 Gridsome — гибкий генератор статических сайтов на базе Vue.js. Фреймворк позволяет взять любую CMS, API или просто набор файлов разметки и преобразовать их в быстрый, современный веб-сайт с предварительной визуализацией.

#инструменты

💡 Современные и эффективные CSS-раскладки

▍Часть 10

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой и девятой частями.

Снова применяется функция repeat(), но на этот раз вместо числового значения используется ключевое слово auto-fit. Это активирует автоматическое расположение дочерних элементов, для которых базовая минимальная ширина равна 150px но может увеличиваться до 1fr. Это значит, что на маленьких экранах они будут занимать 1fr ширины, а при появлении достаточного пространства, элементы, расположенные ниже будут перетекать в первую строку.

Если в родительском элементе освобождается дополнительное место, в режиме auto-fit дочерние элементы будут растягиваться, чтобы это место заполнить. Если же изменить режим на auto-fill, элементы не будут превышать базовый размер из функции minmax(<baseWidth>, 1fr).

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

#советы #coding #css

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

📑 Таблицы и CSS-свойство float в современной веб-разработке

Больше двадцати лет тому назад таблицы были основным HTML-средством для оформления веб-страниц. Таблицы давали веб-мастерам стабильный механизм для создания сайтов, имеющих некие признаки «дизайна». Содержимое страниц больше не должно было идти строго сверху вниз. Материалы можно было размещать в ячейках таблиц, располагавшихся слева направо и сверху вниз. В те времена это казалось большим достижением.

#статьи #html #css