20 впечатляющих CSS3 примеров, техник и библиотек
85 308 любопытных // 25 июля 2014 года
В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
Спасибо http://tutorialzine.com и рекомендую:
- Навигация, элементы форм, кнопки и ещё несколько полезностей на HTML и CSS
- 20 CSS3 генераторов которые облегчат жизнь дизайнеру
- Как сделать удобные модальные окна на CSS3 и JavaScript
- Несколько полезных и разнообразных CSS библиотек для веб мастера
- Как сделать анимацию при прокрутке страницы для блока с помощью JQuery и CSS
Размытое меню
Это действительно красивое и качественно выполненное меню на чистом CSS.
Правильный и удачный пример использования новых технологий CSS.
Демо Ι Скачать
CSS 3D облака
В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Перейти
Логотипы на чистом CSS
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Перейти
Алфавит с CSS анимацией
Отличный и художественный пример использования CSS в алфавите
Перейти
3D навигация для сайта
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Перейти
Дудл от Google на CSS
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Перейти
Слайдер
Хорошо и качественно сделанный слайдер для картинок.
Плюс 4 примера в демо.
Перейти
Двойное анимированное кольцо
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Перейти
Размытие на CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Перейти
Полное руководство по Flexbox
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Перейти
Красочное и анимированное меню на CSS3
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
Перейти
CSS фильтры
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
Перейти
CSS формы
Пост о CSS формах с многочисленными примерами
Перейти
Прогресс бары на CSS
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией.
Также Вы можете посмотреть пример и скачать исходники.
Перейти
Анимация — Animate.css
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Перейти
Индикаторы загрузки — Spinkit
Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.
Перейти
Кнопки
Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант
Перейти
Генератор для создания переключателей
Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.
Перейти
Всплывающие подсказки
CSS библиотека бесплатных всплывающих подсказок — Hint.css
Перейти
Цветовые схемы
Схемы цветов для людей, которые не любят копаться в коде
Перейти
Различные бесплатные и полезные фишки на HTML и CSS
Здесь Вы сможете совершенно бесплатно скачать несколько кнопок, разнообразных форм, модальных окон, таблиц, и ещё нескольких классных вещей уже свёрстанных в HTML и CSS.
Их только нужно скачать и использовать на сайте.
Рекомендуем также посмотреть:
- Новые и бесплатные шаблоны на HTML5
- Подборка бесплатных HTML и CSS шаблонов для Ваших новых проектов и сайтов
- Самые популярные и бесплатные HTML редакторы для веб — разработчиков
1. Кнопки войти на CSS
Скачать
2. Красивая регистрационная форма на HTML
Скачать
3. Таблица с ценами на сайт
Скачать
4. Красивые выключатели на HTML и CSS
Скачать
5. Кнопки скачать на CSS3
Скачать
6. Классный лист с задачами
Скачать
7.Тёмная корзина для интернет магазина на HTML
Скачать
8. Простая форма входа на CSS
Скачать
9. Простой виджет с табами
Скачать
10.
Тёмные кнопки на CSSСкачать
11.Тёмный календарь для сайта бесплатно
Скачать
12. Стильные часы
Скачать
13. Стеклянные и разноцветные кнопки на CSS
Скачать
14. Таблицы с ценниками
Скачать
15. Социальные кнопки
Скачать
16. Форма входа в стиле Facebook на CSS и HTML
Скачать
17. Металлический прогресс бар
Скачать
18. Форма контактов в модальном окне
Скачать
19. Навигация с уведомлениями на CSS
Скачать
20. Красивый блокнот
Скачать
21. Красивые окна уведомлений
Скачать
22. Аналитический виджет в тёмном оформлении
Скачать
23.
Разноцветные и красивые кнопки на CSSСкачать
24. Тёмная навигация по страницам на сайт
Скачать
25. Тёмный и светлый выпадающие списки
Скачать
26. Кнопки поделиться в социальных сетях
Скачать
27. Панель с настройками
Скачать
28. Тёмный калькулятор
Скачать
29. Бумажный блокнот
Скачать
Узнать больше интересного:
Найкращі кольорові схеми та естетичні ідеї Instagram
Photoshop Action, щоб додати старовинні ефекти до вашої фотографії
Векторная коллекция на тему Рыбалки
Потужний набір спортивних іконок
Затишні осінні візерунки для поповнення вашої колекції
Найкращі шрифти трафарету для дизайнерів (безкоштовно та преміум)
Як створити власний шрифт: поради, підказки та ресурси
Повна колекція генераторів CSS
Екстравагантна колекція квіткових візерунків для дизайнерських потреб
Створіть колаж з 3D -ефектом в Adobe Photoshop
Конфіденційність і файли cookie: цей сайт використовує файли cookie.
Продовжуючи використовувати цей веб-сайт, ви погоджуєтесь на їх використання.
Щоб дізнатися більше, включно з тим, як контролювати файли cookie, див. тут:
Політика використання файлів Cookie
Новые статьи
Преобразование токенов дизайна в переменные CSS с помощью Node.
jsНедавно я преобразовывал токены дизайна JavaScript в переменные CSS. У меня был файл JS с различными аспектами веб-сайта, хранящимися в свойствах объекта: размеры шрифта, пробелы, цвета и т. д. Он выглядел примерно так, как этот фрагмент.
1//tokens.js
2
3module.exports = {
4 шрифт: {
5 семейство: {
6 заголовок: "''Источник 9003', sans Pro',
7 корпус: "'Roboto', без засечек",8},
9 Вес: {
10 Нормальный: "400",
11 Семиболд: "500",
12},
13},
14 Цвет: {
15 Фоны: фоновый "#ffffff",
16 основных: {
17 светлых: "#4266b3",
18 по умолчанию: "#16233f",
19 темных: "#06080f",
20 },
3 2 },
3 2 ,
22 //больше токенов
23}
Я хотел использовать переменные CSS, поэтому скопировал и вставил свойства из файла JS в файл CSS. Вот эффект.
1/* tokens.css */
2
3: root {
4 --font-family-heading: "'Source Sans Pro', sans-serif";
5 --font-family-body: "'Roboto', без засечек";
6 --font-weight-normal: "400";
7 --полужирный шрифт: "500";
8 --color-background: "#ffffff";
9 --color-primary-light: "#4266b3";
10 --color-primary-default: "#16233f";
11 --цвет-основной-темный: "#06080f";
12 /* больше переменных */
13}
Внезапно я перенесся в конец 90-х.
Мой сайт выглядел так, будто его сделал сам Тим Бернерс-Ли. Стилистики почти не было. Макет был выключен. Я также внес другие изменения и подумал, что возникла проблема с фазой сборки или стилизованными компонентами. Я решал проблему около часа. . .просто обнаружить, что я забыл удалить ненужные двойные кавычки в файле CSS. Да, styled-components не будут работать с недействительными переменными. Я перестану ставить себя в неловкое положение публично и воспользуюсь этой ошибкой, чтобы публично чему-то научиться.
Цель
Я хочу автоматизировать этот процесс преобразования токенов JS в токены CSS. Сценарий узла будет принимать файл JS с вложенными свойствами темы и возвращать файл CSS с правильно названными переменными CSS. Я хочу что-то вроде фрагментов выше. Но без лишних двойных кавычек. Я знаю, что, возможно, где-то есть такой парсер, но я хочу написать его с нуля и немного изучить node.js. А если нет — буду чувствовать себя лучше, не изобретая велосипед. Вы можете учиться со мной.
Небольшие знания JavaScript и CSS будут полезны для продолжения.
Среда узла
На моей машине уже установлен Node.js. Если у вас нет этой среды выполнения, вот ссылка для скачивания. Вы также можете использовать nvm для управления несколькими версиями узла. Для этого проекта я буду использовать последнюю версию — 18.3.0. Вы можете проверить версию своего узла с помощью node -v или nvm ls .
Установив узел, давайте запустим новый проект с помощью npm init . Мы, вероятно, не будем использовать какие-либо сторонние пакеты, но запуск нового не помешает. После настройки npm мы должны получить файл package.json.
Скрипт для преобразования токенов дизайна
После настройки среды создадим наш первый файл — index.js. Если все работает, запуск скрипта должен вывести «привет» в наш терминал.
1console.log("Hello")
Во-первых, давайте импортируем модули узлов, которые мы будем использовать.
Я буду использовать синтаксис require() для динамического импорта. Но вы также можете использовать стандартные модули ES — для этой цели добавьте поле "type": "module" в package.json.
1//index.js
2
3const { argv } = require("узел:процесс")
4const { анализ, формат, нормализация } = require("узел:путь")
5const { writeFile } = require("node:fs/promises")
Затем нам нужно импортировать токены стилей из файла JS. Мы можем снова использовать require, но на этот раз с локальным путем к стилям в качестве аргумента.
1const tokens = require("./tokens.js")
Импортировав объект со стилями, пришло время для более сложной части — преобразования их в стили CSS. Все токены находятся в (вложенных) объектах. Например, размер шрифта основного текста последовательно вложен в шрифт, размер и основной текст. Мы хотим преобразовать его в переменную CSS, которая выглядит следующим образом: --font-size-body: 1. . Итак, давайте подумаем, что нам нужно сделать. Нам нужно объединить ключи от объектов с помощью дефисов, а когда вложенных объектов больше нет, нам нужно добавить строковое значение в нашу только что созданную переменную CSS.
5rem
1const tokensToCss = (object, base = `-`) =>
2 Object.entries(object).reduce((css, [key, value]) => {
3 let newBase = base + ` -${key}`
4 if (typeof value !== "object") {
5 return css + newBase + `: ${value};\n`
6 }
7 return css + tokensToCss(value, newBase)
8 }, ``)
Этот короткий фрагмент может немного сбить с толку, так что потерпите меня. Мы создали функцию разбора с двумя параметрами: объект для разбора и текущая база. С помощью метода Object.entries() мы возвращаем пары ключ-значение внутри массива. В возвращаемом массиве мы используем метод reduce() . Он принимает два параметра: функцию обратного вызова для выполнения с каждым элементом массива и начальное значение — пустую строку.
Упомянутый обратный вызов принимает два параметра: предыдущее значение, где мы будем хранить накопленные переменные, и текущее значение — массив (деструктурированный на ключ и значение). Внутри обратного вызова мы сразу создаем новую базу. Это старая база, объединенная дефисом и текущим ключом. Мы определяем переменные CSS с двумя дефисами, поэтому по умолчанию в основе лежит дефис. Мы всегда хотим объединить ключ объекта. Мышление идет к значению. Есть только две возможности: значение может быть другим вложенным объектом или примитивом. Если значение является объектом, мы также хотим его проанализировать. Итак, в этом случае мы возвращаем аккумулятор плюс результат вызова самой функции. Но на этот раз функция синтаксического анализа принимает значение как объект. Вложенный объект может иметь несколько свойств, поэтому функция синтаксического анализа должна взять новую базу и применить ее ко всем им. Если вложенных объектов больше нет, мы хотим обернуть нашу переменную CSS значением, точкой с запятой и новой строкой.
Результатом является список переменных CSS — одна под другой — созданный из переданного объекта.
1const {имя} = parse("./tokens.js")
2const cssVariables = tokensToCss(токены)
3const cssClass = `:root {\n${cssVariables.replaceAll("--", " --")}}\n`
4
5writeFile(`${name}.css`, cssClass)
Переменные CSS должны быть в каком-то классе, поэтому я поместил их в псевдоним :root -class, чтобы быть глобально доступным. Я также добавил новые строки и пробелы для форматирования. Я записал класс в файл CSS с помощью 9009.1 метод writeFile() . Первый аргумент — это имя исходного JS-файла, но с расширением .css . Вторая — это наша подготовленная строка. Вот вывод файла CSS.
1: root {
2 --font-family-heading: "Source Sans Pro", без засечек;
3 --font-family-body: "Roboto", без засечек;
4 --font-weight-normal: 400;
5 --полужирный шрифт: 500;
6 --color-background: #ffffff;
7 --color-primary-light: #4266b3;
8 --color-primary-default: #16233f;
9 --цвет-основной-темный: #06080f;
10}
Наш скрипт работает, но путь жестко запрограммирован.
Я изменил его на переменную. Затем я использовал свойство argv для получения аргументов командной строки. Я их нарезал, потому что первый аргумент — это путь к нод-команде, а второй — путь к исполняемому файлу. Нам нужны пользовательские аргументы от пользователя. Я нормализовал и отформатировал переданный аргумент, потому что методу require() требуется косая черта в начале для локального файла. Таким образом, не имеет значения, передает ли пользователь в качестве аргумента имя скрипта tokens.js или относительный путь ./tokens.js . В конце концов, я деструктурировал имя из исходного пути, чтобы использовать его в новом файле CSS.
1const args = argv.slice(2)
2const tokensPath = format({ root: "./", base: normalize(args[0]) })
3const tokens = require(tokensPath)
4const { имя } = анализ (путь маркеров)
Теперь скрипт можно выполнить так: node index.js tokens.js .
Окончательный сценарий
Я немного переработал окончательный сценарий. Я добавил базовую обработку ошибок с пользовательскими сообщениями. Я также извлек логику сохранения в асинхронную функцию, потому что метод writeFile() в нашем примере основан на обещаниях.
1const { argv } = require("узел:процесс")
2const { анализ, форматирование, нормализация } = require("узел:путь")
3const { writeFile } = require("node:fs/promises")
4
5const tokensToCss = (object = {}, base = `-`) =>
6 Object.entries(object).reduce ((css, [key, value]) => {
7 let newBase = base + `-${key}`
8 if (typeof value !== "object") {
9 return css + newBase + `: ${value};\n`
10 }
11 return css + tokensToCss(value, newBase)
12 }, ``)
13
14const saveTokens = async (name, tokens) => {
15 try {
16 await writeFile(`${name}.css`, tokens)
17 } catch (e) {
18 console.
log ("Произошла ошибка при сохранении файла.\n", e)
19 }
20}
21
22try {
23 const args = argv.slice(2)
24 constPath format({ root: "./", base: normalize(args[0]) })
25 константных токенов = require(tokensPath)
26 const { name } = parse(tokensPath)
27
28 const cssVariables = tokensToCss(tokens)
29 const cssClass = `:root {\n${cssVariables-replace All-("---replace All-("---replace All) -")}}\n`
30 saveTokens(name, cssClass)
31} catch (e) {
32 console.log(
33 "Укажите правильный аргумент - относительный путь к токенам дизайна.\ n",
34 e
35 )
36}
log ("Произошла ошибка при сохранении файла.\n", e) Систематизация проектирования компонентов
Презентация в Front End North в в Шеффилд, Великобритания Стюарт Робсон
Маркеры дизайна и CSS Систематизация дизайна ваших компонентов
@стуробсон | всегда твистед.
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 2
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 3
Маркеры дизайна и CSS Систематизация дизайна ваших компонентов @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 4
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 5
» Токены дизайна — это визуальные атомы системы дизайна, в частности, это именованные объекты, в которых хранятся атрибуты визуального дизайна. Мы используем их вместо жестко закодированных значений, чтобы поддерживать масштабируемую и непротиворечивую визуальную систему. — Джина | @jina @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 6
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
7
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 8
” Выигрывает то, что лучше всего работает для этой команды. Переменные, суперпеременная, константы, токены дизайна, параметры стиля, словарь стилей, примитивы, субатомные частицы, выражения стиля. — Джина | @jina @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 9
Что @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 10
Размеры | Семейства шрифтов | Стили шрифтов | Вес шрифта | Размеры шрифта | Высота линии | Стили границы | Цвета границы | Радиус границы | Цвета горизонтальной линейки | Цвета фона | Градиенты | Фоновые градиенты | Коробчатые тени | Цвета текста | Текстовые тени | Время | Медиа-запросы | индекс Z | Иконки @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 11
Цвет
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
Цвет @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 13
Типография @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 14
Типография @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 15
Типография @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 16
Иконография @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 17
Расстояние @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 18
Бордюры @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 19
Тени @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 20
Время @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 21
Точки останова
@стуробсон | всегда твистед.
com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
22
Как @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 23
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 24
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 25
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 26
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 27
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 28
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 29
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 30
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 31
@sturobson | всегда твистед.
com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
32
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 33
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 34
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 35
Почему @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 36
Консистенция @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 37
Постоянство Ремонтопригодность @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 38
Непротиворечивость Ремонтопригодность Масштабируемость @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 39
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 40
@sturobson | всегда твистед.
com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
41
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 42
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 43
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 44
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 45
Варианты — Типографика — Палитра — Границы — Тень — Интервал — Взаимодействие: наведение, фокус, активные состояния @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 46
Типография — семейство шрифтов — размер шрифта — толщина шрифта — преобразование текста @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 47
Цвет — цвет текста — цвет фона
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
48
Границы — цвет границы — стиль границы — ширина границы — радиус границы @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 49
Интервал — отступ сверху — отступ снизу — отступ слева — отступ справа — отступ сверху — отступ снизу — отступ слева — отступ справа @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 50
Интерактивные состояния — цвет текста при наведении — цвет фона при наведении — тень поля при наведении — цвет текста в фокусе — цвет фона в фокусе — тень окна в фокусе — цвет границы фокуса — ширина границы фокуса @sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 51
Timing — длительность перехода — свойство перехода — функция времени перехода @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 52
» Когда происходит обновление цветов или типографики нашего бренда, токены могут помочь упростить процесс редизайна.
— Майя Кинг | @HiMaya
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
53
Давайте жить кодом. ! @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 54
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 55
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 56
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 57
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 58
» В дизайн-системах всегда есть внутренняя борьба: насколько гибким вы хотите быть, насколько последовательным вы хотите быть, и какие ограничения вы хотите ввести. — Сара Федерман | @СараФедерман @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 59
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
60
” Предоставляя токены всем цифровым командам, мы можем позволить им создавать пользовательские интерфейсы, соответствующие текущим визуальным стандартам, когда компонент отсутствует (или не будет) в системе дизайна. — Майя Кинг | @HiMaya @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 61
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 62
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 63
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 64
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 65
Будь там, где авторы @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 66
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 67
@стуробсон | всегда твистед.
com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
68
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 69
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 70
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 71
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 72
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 73
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 74
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 75
Давайте жить кодом. ! @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 76
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г.
77
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 78
@стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 79
@sturobson | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 80
Маркеры дизайна и CSS Систематизация дизайна ваших компонентов @стуробсон | всегда твистед.com | Маркеры дизайна и CSS | ФронтЭндСевер | февраль 2020 г. 81
Разве токены дизайна не являются просто пикантными переменными Sass?
Токены дизайна позволяют вам определять низкоуровневые значения атрибутов дизайна в вашей системе дизайна, чтобы они могли стать частью общего словаря среди всех пользователей системы и использоваться во всех продуктах в системе дизайна.
В этом выступлении Стюарт расскажет, какие типы атрибутов дизайна вы можете найти в наборе токенов дизайна, как вы можете создать их один раз и поделиться ими где угодно, выйти за рамки их общего использования в разных организациях и как они могут дать каждому возможность внести свой вклад в общую систему дизайна.
Дизайнерские жетоны для чайников
Comet — Система дизайна Discovery Education — Цветные жетоны
Система проектирования Formstack — Цветовые токены
Система Lightning Design — токены Salesforce Design
Система дизайна EOS — Iconrs
Токены системы дизайна Shopify
Жетоны минерального интерфейса
Орбитальная система дизайна — Kiwi
Система проектирования протоколов Mozilla
Тео
Словарь стилей
Драгоман
Хроматический
Стилизованная система
Утилиты дизайн-системы
DesignTokens.
devДиез
Дизайн-системы в масштабе — слайды
Системы проектирования в масштабе — видео
Простая библиотека компонентов
Стайлинт
Плагин объявления stylelint со строгим значением
Создание служебных классов с токенами дизайна с использованием Sass
Пример служебных классов — Sassmeister
Таблицы Google Тео
Пример Google и Тео
Суперпозиция
Ресурс токенов Awesome Design
Группа сообщества дизайнерских токенов W3C
Slack-сообщество Design Systems
Информационный бюллетень о дизайн-системах
devЧто нужно учитывать при разработке кнопок для Design System? Всего несколько вещей 🙃 Отличный список от @StuRobson @FrontEndNorth pic.
— Педро Мартинс (@opedromm) 7 февраля 2020 г. twitter.com/vSPQgXZ3S6«Сделав токены доступными для всех цифровых команд, мы можем позволить им создавать пользовательские интерфейсы, соответствующие текущим визуальным стандартам, когда компонент отсутствует (или не будет) в системе дизайна» — @HiMaya@StuRobson #FrontEndNorth pic.twitter.com/u1xnGt7WlY
— Front End North (@FrontEndNorth) 7 февраля 2020 г.Загляните прямо в @AtomEditor на @FrontEndNorth, чтобы показать нам свою систему дизайна #Fractal YAML configs — @StuRobson получает здоровую четверку + по шкале храбрости #FrontEndNorth
— devolute (@devolute) 7 февраля 2020 г.Действительно интересно наблюдать, как @StuRobson рассказывает о дизайнерских токенах, с добавлением живого кодирования.
— Jumptwenty4 (@jumptwenty4) 7 февраля 2020 г. pic.twitter.com/O3ylUmBHTyЖивой код! Он смелый человек, этот @StuRobson #FrontEndNorth pic.twitter.com/Mz5qz9j7X4
— Front End North (@FrontEndNorth) 7 февраля 2020 г.Зачем использовать дизайнерские токены, если у нас уже есть Sass?
За согласованность, ремонтопригодность и масштабируемость. @StuRobson #FrontEndNorth pic.twitter.com/NxYeiHGRwA
— Front End North (@FrontEndNorth) 7 февраля 2020 г.Маркеры дизайна могут быть разными, включая размер, семейство шрифтов, стили границ, цвета фона, текстовые тени и значки @StuRobson #FrontEndNorth pic.
twitter.com/vSPQgXZ3S6
pic.twitter.com/O3ylUmBHTy