Настройка инструментов создания Semantic UI

Структура компонентов Semantic UI намного сложнее, чем Bootstrap, а также сложнее процесс установки. В то время как Bootstrap предоставляет только одну базовую тему, Semantic UI включает в себя более 20+ тем в своем базовом пакете, помимо файлов CSS, JS и шрифтов. Он также включает в себя конфигурационные файлы Composer, Bower и Gulp.

Семантические файлы пользовательского интерфейса

Да, вы можете просто скопировать файлы в свой проект и связать файлы .js и .css с кодом HTML и начать использовать его. Но рекомендуемый метод использования семантического интерфейса отличается от описанного выше. Прежде всего, лучше всего установить Gulp и Composer на ваш сервер, а не просто копировать файлы. Эти технологии помогут вам установить не только Semantic UI, но и смогут проверять все зависимости и добавлять их, если вы еще этого не сделали.

 

Семантический UI CSS

CSS-интерфейс Semantic-UI может быть более удобным для пользователя, чем Bootstrap, с CSS, который разработчикам проще читать, напоминая более семантический язык — отсюда и его название. Вот несколько примеров:

<div class="ui stackable inverted divided equal height stackable grid">

Вот пример с семантической сеткой (потому что «сетка» является одной из наиболее часто используемых функций любой интерфейсной системы). Мы хотим создать 3-столбцовый блок, поэтому мы используем следующий класс CSS:
 

<div class="three wide column">

Как вы можете видеть, все классы Semantic-UI используют человеческие слова. Он очень дружелюбный! Кодирование больше похоже на запись обычного текста.

Семантический пользовательский интерфейс JS

JavaScript — это необходимый навык, если вы хотите разрабатывать интерфейсы веб-сайта, используя Semantic UI. (Это будет сложно для младших разработчиков, любые разработчики на уровне среднего и старшего уровня должны хорошо разбираться в JS).

Почти все функции Semantic UI не будут работать без JS-скриптов: модальное окно, выпадающее меню, слайдеры и т. Д.

JS-код довольно прост. Вот пример:

<script> 
$(document) 
.ready(function() { 
$('.ui.sidebar') 
.sidebar('attach events', '.toc.item') 
;

}) 
; 
</script>

Большинство образцов элементов семантического интерфейса на его официальном сайте содержат подсказки JavaScript:

SemanticUI Modal

Следующим шагом после создания базового HTML-скелета вашего будущего проекта является создание одного файла main.js, который будет содержать код JavaScript для ваших элементов Semantic-UI.

Эта структура содержит несколько тем. Вы даже можете имитировать дизайн Bootstrap или сделать полную копию дизайна GitHub .

Для получения ссылок на скачивание семантического интерфейса просмотрите нашу страницу загрузки .

Semantic использует инструменты командной строки для создания вашего проекта во время сеанса. Получив Semantic, вам нужно будет установить nodejs и gulp для запуска процесса сборки.

Узел Linux должен быть установлен для работы без sudo. Вы можете сделать это, используя один из этих методов .

Для установки Windows требуется загрузка бинарного узла

Gulp

После установки узла Gulp можно установить глобально с помощью Node Package Manager (NPM)

npm install -g gulp

Зависимости проектов

Зависимости узлов управляются в каждом проекте в специальном файле package.jsonчтобы упростить установку зависимостей проекта.

Как только вы начнете работать. Перейдите в семантический каталог и установите зависимости npm.

# install semantic dependencies

npm install

Запуск установщика

Semantic использует gulp для компиляции ваших таблиц стилей при изменении вашей темы. В первый раз, когда вы запустите gulp, вас встретит интерактивный установщик

# install

gulp

Установщик позволит вам выбрать компоненты для включения и указать пути для вашего проекта.

Тип установки

автоматическая

Установка будет использовать пути по умолчанию, выводя файлы css для dist/ и упаковки всех компонентов вместе

экспресс

Позволит вам переместить папку своего сайта и папку dist и выбрать из списка компонентов, которые будут включены в ваш конкатенированный выпуск.

изготовленный на заказ

Выясните все доступные параметры

Процесс установки создаст два файла: semantic.json хранит пути для вашей сборки и находится на верхнем уровне вашего проекта, theme.config — это LESS- файл, который существует в src /, и позволяет централизованно устанавливать темы для каждого пользовательского интерфейса компонент.

Установщик также создаст специальную папку, содержащую темы вашего сайта. По умолчанию это src/site. Дополнительную информацию об использовании сайтов см. В нашем руководстве по настройке .

Ручная установка

Если вы предпочитаете, чтобы эти файлы и папки можно было перемещать вручную вместо использования установщика.

mv semantic.json.example semantic.json
mv src/theme.config.example src/theme.config
mv src/_site src/site vi semantic.json # modify paths vi src/theme.config # modify paths

Модернизация Semantic UI

Вы можете использовать обычные функции диспетчера пакетов для обновления вашего проекта, просто обязательно заново установите семантику после обновления. Повторная установка расширит ваш semantic.json но не перезапишет его

Метод обновления семантики будет зависеть от вашего диспетчера пакетов, но во всех случаях требуется только обновление исходных файлов и повторный запуск установщика gulp

Для получения полного списка настроек для semantic.json проверьте значения по умолчанию, на которые он наследует.

Использование инструментов Semantic Build

Команды Gulp

После настройки вашего проекта у вас есть доступ к нескольким командам для создания css и javascript.

gulp # runs default task (watch)
gulp watch # watches files for changes gulp build # builds all files from source
gulp install # re-runs install

Semantic создает в вашем источнике сжатые и несжатые файлы как для отдельных компонентов, так и для компонентов, указанных для вашей упакованной версии.

Имейте в виду, что семантика автоматически настраивает URL-адреса в CSS и добавляет префиксы поставщика как часть процесса сборки. Это означает, что определения и файлы тем не нужны префиксы поставщиков.

Workflow

Создание и просмотр семантики необходимо только при настройке пользовательского интерфейса. Это, как правило, первая часть создания нового проекта и отдельный процесс, чем создание страниц на вашем сайте.

На этом этапе архивации вы можете попробовать загрузить различные темы , настроить настройки сайта (семейство шрифтов, цвета и т. Д.) И настроить компоненты в переопределении компонентов вашего сайта.

Файлы в examples/ папках вашего проекта могут быть полезны для проверки изменений в пользовательском интерфейсе. Например, вы можете запустить gulp
watch
загрузки новой темы в src/site/themes/ затем theme.config файл theme.config с именем новой темы и обновите examples/kitchensink.html чтобы проверить изменения в теме.

Вам нужно будет использовать инструменты построения Semantic, улучшая свой пользовательский интерфейс, при разработке страниц вы можете полагаться на скомпилированные css и js в dist/ и на стандартную сборку вашего программного стека.

gulp
watch
автоматически перекомпилирует только необходимые файлы определений при обновлении файла semantic.config или любых .variables или .overrides .

Запуск локальных документов

Одним из полезных способов отслеживания модификаций ui для команды является запуск локального экземпляра документов пользовательского интерфейса для работы в команде «styleguide».

Вы можете захватить источник doc из GitHub .

git clone git@github.com: Semantic-Org / Semantic-UI-Docs.git обновление npm # запустить запуск docpad сервера

Самая простая настройка — сохранить источник семантики ui и источник документов в смежных каталогах и использовать Gulp для подачи файлов в документы.

Gulp включает в себя две специальные команды для подачи файлов во второе место

gulp serve-docs # часы для изменений только gulp build-docs # строит все файлы в документах

Путь к каталогу по умолчанию — ../docs . Вы можете настроить другое место для обслуживания документов, tasks/admin/docs.json значения в tasks/admin/docs.json

Принятие SUI в соответствии с вашими потребностями

Semantic предлагает несколько способов изменения элементов пользовательского интерфейса. Для крупных проектов, которые основаны на создании персонализированного визуального языка, ориентированного на бренд, темы сайта позволяют изменять базовые переменные, управляющие семантическим интерфейсом, а также указывать альтернативное переопределение css. Темы сайтов переносимы между проектами и влияют на скомпилированный код инфраструктуры.

Для небольших проектов, проектов с быстрыми сроками или для тех, кто предпочитает не входить в кодирование переднего конца, упакованные темы отлично подходят для заимствований из других проектов с открытым исходным кодом в этой области.

Для любого типа проекта важным местом для начала настройки Semantic является файл site.variables файл переменных, который наследует все другие файлы переменных.

Настройка глобальных переменных

site.variables содержит многие из наиболее важных переменных для вашего сайта.Настройка этих параметров мгновенно поможет сделать ваш сайт менее похожим на дизайн куки-резака и больше похож на ваш бренд.

Хорошим местом для начала настройки является настройка шрифтов, используемых в вашем проекте. Семантика включает в себя несколько переменных, которые позволяют вам указывать бесплатные шрифты, доступные в Google Fonts .

Например, вы можете указать собственный стек шрифтов для своего сайта, добавив в переменную файл темы вашего сайта несколько переменных src/site/globals/site.variables , src/site/globals/site.variables .

@headerFont        : 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; @pageFont          : 'Oswald', 'Helvetica Neue', Arial, Helvetica, sans-serif; @googleFontFamily  : 'Open+Sans:400italic,400|Oswald:400,700';

Переменные охватывают произвольные части дизайна элемента интерфейса. Лучший способ узнать, какие переменные могут быть изменены для элемента, — это посмотреть на главный файл, где определены значения по умолчанию элемента, файл темы по умолчанию элемента.

Каждый файл элемента UI, например src/themes/default/elements/button.variables
наследует многие его настройки по умолчанию из глобальных переменных сайта, указанных в site.variables .

Другие примеры общих глобальных унаследованных параметров включают @linkColor , @borderRadius , @selectedTextColor и @borderColor .

/*-------------------      Fonts --------------------*/ @headerFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; @pageFont          : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; @fontSmoothing     : antialiased; @importGoogleFonts : true; @googleFontName    : 'Lato'; @googleFontSizes   : '400,700,400italic,700italic'; @googleFontFamily  : '@{googleFontName}:@{googleFontSizes}'; /*-------------------     Base Sizes --------------------*/ @emSize      : 14px; @fontSize    : 14px; /*-------------------     Site Colors --------------------*/ /*---  Colors  ---*/ @blue             : #3B83C0; @green            : #5BBD72; @orange           : #E07B53; @pink             : #D9499A; @purple           : #564F8A; @red              : #D95C5C; @teal             : #00B5AD; @yellow           : #F2C61F; @black            : #1B1C1D; @grey             : #CCCCCC; @white            : #FFFFFF; /*---  Brand Colors  ---*/ @primaryColor        : @blue; @secondaryColor      : @black; /*-------------------       Sizes --------------------*/ /* Exact pixel values @ 14px em */ @mini        : 0.7142rem; @tiny        : 0.8571rem; @small       : 0.9285rem; @medium      : 1rem; @large       : 1.1428rem; @big         : 1.2857rem; @huge        : 1.4285rem; @massive     : 1.7142rem; /*-------------------       Page --------------------*/ @pageBackground      : #F7F7F7; @pageOverflowX       : hidden; @fontSize            : 14px; @lineHeight          : 1.33; @textColor           : rgba(0, 0, 0, 0.8); @headerMargin        : 1em 0em 1rem; @paragraphMargin     : 0em 0em 1em; @linkColor           : #009FDA; @linkUnderline       : none; @linkHoverColor      : lighten( @linkColor, 5); @highlightBackground : rgba(255, 255, 160, 0.4); @highlightColor      : @textColor; /*------------------- Background Colors --------------------*/ @subtleTransparentBlack : rgba(0, 0, 0, 0.03); @transparentBlack       : rgba(0, 0, 0, 0.05); @strongTransparentBlack : rgba(0, 0, 0, 0.10); @subtleTransparentWhite : rgba(255, 255, 255, 0.02); @transparentWhite       : rgba(255, 255, 255, 0.05); @strongTransparentWhite : rgba(255, 255, 255, 0.07); /*-------------------     Extra Colors --------------------*/ /*---  Light Colors  ---*/ @lightBlack:      : #CCCCCC; @lightBlue        : #54C8FF; @lightGreen       : #2ECC40; @lightOrange      : #FF851B; @lightPink        : #FF8EDF; @lightPurple      : #CDC6FF; @lightRed         : #FF695E; @lightTeal        : #6DFFFF; @lightYellow      : #FFE21F; @lightPrimaryColor   : @lightBlue; @lightSecondaryColor : @lightBlack; /*-------------------      Loader --------------------*/ @loaderSpeed: 0.6s; @loaderLineWidth: 0.2em; @loaderFillColor: rgba(0, 0, 0, 0.1); @loaderLineColor: @darkGrey; @invertedLoaderFillColor: rgba(255, 255, 255, 0.15); @invertedLoaderLineColor: @white; /*-------------------      Accents --------------------*/ /* 4px @ default em */ @relativeBorderRadius: 0.2857em; @absoluteBorderRadius: 0.2857rem; @defaultBorderRadius: @absoluteBorderRadius; /* Used for differentiating neutrals */ @subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); /* Used for differentiating layers */ @subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); /*-------------------       Grid --------------------*/ @columnCount: 16; /*-------------------    Breakpoints --------------------*/ @mobileBreakpoint            : 320px; @tabletBreakpoint            : 768px; @computerBreakpoint          : 992px; @largeMonitorBreakpoint      : 1400px; @widescreenMonitorBreakpoint : 1920px; /*******************************          Power-User *******************************/ /*-------------------       Paths --------------------*/ @imagePath : "../../themes/default/assets/images"; @fontPath  : "../../themes/default/assets/fonts"; /*-------------------      Icons --------------------*/ /* Maximum Glyph Width of Icon */ @iconWidth : 1.18em; /*-------------------      Easing --------------------*/ @defaultEasing: ease; /*---   Neutrals  ---*/ @fullBlack        : #000000; @lightBlack       : #333333; @darkGrey         : #AAAAAA; @lightGrey        : #DCDDDE; @offWhite         : #FAFAFA; @darkWhite        : #F0F0F0; /*--- Colored Backgrounds ---*/ @blueBackground   : #DFF0FF; @greenBackground  : #EBFFED; @orangeBackground : #FFEDDE; @pinkBackground   : #FFE3FB; @purpleBackground : #EAE7FF; @redBackground    : #FFE8E6; @tealBackground   : #E9FFFF; @yellowBackground : #FFF8DB; /*--- Colored Text ---*/ @blueTextColor    : @blue; @orangeTextColor  : @orange; @pinkTextColor    : @pink; @purpleTextColor  : @purple; @redTextColor     : @red; @greenTextColor   : #1EBC30; // Green is difficult to read @tealTextColor    : #10A3A3; // Teal text is difficult to read @yellowTextColor  : #B58105; // Yellow text is difficult to read /*--- Colored Headers ---*/ @blueHeaderColor   : darken(@blueTextColor, 5); @greenHeaderColor  : darken(@greenTextColor, 5); @orangeHeaderColor : darken(@orangeTextColor, 5); @pinkHeaderColor   : darken(@pinkTextColor, 5); @purpleHeaderColor : darken(@purpleTextColor, 5); @redHeaderColor    : darken(@redTextColor, 5); @tealHeaderColor   : darken(@tealTextColor, 5); @yellowHeaderColor : darken(@yellowTextColor, 5); /*-------------------   Emotive Colors --------------------*/ /* Positive */ @positiveColor           : @green; @positiveBackgroundColor : #EEFFE7; @positiveBorderColor     : #B7CAA7; @positiveHeaderColor     : #356E36; @positiveTextColor       : #3C763D; /* Negative */ @negativeColor           : @red; @negativeBackgroundColor : #FFF0F0; @negativeBorderColor     : #DBB1B1; @negativeHeaderColor     : #912D2B; @negativeTextColor       : #A94442; /* Info */ @infoColor              : #31CCEC; @infoBackgroundColor    : #E9FAFF; @infoBorderColor        : #AAD6DF; @infoHeaderColor        : #297187; @infoTextColor          : #337B92; /* Warning */ @warningColor           : #F2C037; @warningBorderColor     : #D9CAAB; @warningBackgroundColor : #FFFBE6; @warningHeaderColor     : #825C01; @warningTextColor       : #876A38; /*-------------------    Neutral Text --------------------*/ @darkTextColor               : rgba(0, 0, 0, 0.85); @lightTextColor              : rgba(0, 0, 0, 0.4); @unselectedTextColor         : rgba(0, 0, 0, 0.4); @hoveredTextColor            : rgba(0, 0, 0, 0.8); @pressedTextColor            : rgba(0, 0, 0, 0.8); @selectedTextColor           : rgba(0, 0, 0, 0.8); @disabledTextColor           : rgba(0, 0, 0, 0.2); @invertedTextColor           : rgba(255, 255, 255, 1); @invertedLightTextColor      : rgba(255, 255, 255, 0.8); @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); @invertedHoveredTextColor    : rgba(255, 255, 255, 1); @invertedPressedTextColor    : rgba(255, 255, 255, 1); @invertedSelectedTextColor   : rgba(255, 255, 255, 1); @invertedDisabledTextColor   : rgba(255, 255, 255, 0.2); /*-------------------    Brand Colors --------------------*/ @facebookColor   : #3B579D; @twitterColor    : #4092CC; @googlePlusColor : #D34836; @linkedInColor   : #1F88BE; @youtubeColor    : #CC181E; @instagramColor  : #49769C; @pinterestColor  : #00ACED; @vkColor         : #4D7198; /*-------------------     Borders --------------------*/ @circularRadius                : 500rem; @borderColor                   : rgba(39, 41, 43, 0.15); @selectedBorderColor           : rgba(39, 41, 43, 0.3); @solidBorderColor              : #D4D4D5; @solidSelectedBorderColor      : #BEBEBF; @whiteBorderColor              : rgba(255, 255, 255, 0.2); @selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8); @solidWhiteBorderColor         : #555555; @selectedSolidWhiteBorderColor : #999999; /*-------------------    Transitions --------------------*/ @transitionDuration : 0.2s; @transitionEasing   : ease; /*-------------------   Derived Values --------------------*/ /* Makes sure padded grid can fit at 320px */ @pageMinWidth        : (320px - (@fontSize * 3)); /* Used to match floats with text */ @lineHeightOffset    : ((@lineHeight - 1em) / 2); /* Positive / Negative Dupes */ @successColor           : @positiveColor; @errorColor             : @negativeColor; @successBackgroundColor : @positiveBackgroundColor; @errorBackgroundColor   : @negativeBackgroundColor; @successTextColor       : @positiveTextColor; @errorTextColor         : @negativeTextColor; @successBorderColor     : @positiveBorderColor; @errorBorderColor       : @negativeBorderColor; @successHeaderColor     : @positiveHeaderColor; @errorHeaderColor       : @negativeHeaderColor; /* Responsive */ @largestMobileScreen : (@tabletBreakpoint - 1px); @largestTabletScreen : (@computerBreakpoint - 1px); /* Columns */ @oneWide        : (1 / @columnCount * 100%); @twoWide        : (2 / @columnCount * 100%); @threeWide      : (3 / @columnCount * 100%); @fourWide       : (4 / @columnCount * 100%); @fiveWide       : (5 / @columnCount * 100%); @sixWide        : (6 / @columnCount * 100%); @sevenWide      : (7 / @columnCount * 100%); @eightWide      : (8 / @columnCount * 100%); @nineWide       : (9 / @columnCount * 100%); @tenWide        : (10 / @columnCount * 100%); @elevenWide     : (11 / @columnCount * 100%); @twelveWide     : (12 / @columnCount * 100%); @thirteenWide   : (13 / @columnCount * 100%); @fourteenWide   : (14 / @columnCount * 100%); @fifteenWide    : (15 / @columnCount * 100%); @sixteenWide    : (16 / @columnCount * 100%); @oneColumn      : (1 / 1 * 100%); @twoColumn      : (1 / 2 * 100%); @threeColumn    : (1 / 3 * 100%); @fourColumn     : (1 / 4 * 100%); @fiveColumn     : (1 / 5 * 100%); @sixColumn      : (1 / 6 * 100%); @sevenColumn    : (1 / 7 * 100%); @eightColumn    : (1 / 8 * 100%); @nineColumn     : (1 / 9 * 100%); @tenColumn      : (1 / 10 * 100%); @elevenColumn   : (1 / 11 * 100%); @twelveColumn   : (1 / 12 * 100%); @thirteenColumn : (1 / 13 * 100%); @fourteenColumn : (1 / 14 * 100%); @fifteenColumn  : (1 / 15 * 100%); @sixteenColumn  : (1 / 16 * 100%); /*******************************          States *******************************/ /*-------------------     Disabled --------------------*/ @disabledOpacity: 0.3; @disabledTextColor: rgba(40, 40, 40, 0.3); @invertedDisabledTextColor: rgba(225, 225, 225, 0.3); /*-------------------       Hover --------------------*/ /*---  Colors  ---*/ @primaryColorHover    : lighten( @primaryColor, 3); @secondaryColorHover  : lighten( @secondaryColor, 3); @blueHover            : lighten( @blue, 3); @greenHover           : lighten( @green, 3); @orangeHover          : lighten( @orange, 3); @pinkHover            : lighten( @pink, 3); @purpleHover          : lighten( @purple, 3); @redHover             : lighten( @red, 3); @tealHover            : lighten( @teal, 3); @yellowHover          : lighten( @yellow, 3); @lightBlueHover       : lighten( @lightBlue, 3); @lightGreenHover      : lighten( @lightGreen, 3); @lightOrangeHover     : lighten( @lightOrange, 3); @lightPinkHover       : lighten( @lightPink, 3); @lightPurpleHover     : lighten( @lightPurple, 3); @lightRedHover        : lighten( @lightRed, 3); @lightTealHover       : lighten( @lightTeal, 3); @lightYellowHover     : lighten( @lightYellow, 3); /*---  Emotive  ---*/ @positiveColorHover   : lighten( @positiveColor, 3); @negativeColorHover   : lighten( @negativeColor, 3); /*---  Neutrals  ---*/ @fullBlackHover       : lighten( @fullBlack, 3); @blackHover           : lighten( @black, 3); @lightBlackHover      : lighten( @lightBlack, 3); @lightGreyHover       : lighten( @lightGrey, 3); @greyHover            : lighten( @grey, 3); @darkGreyHover        : lighten( @darkGrey, 3); @whiteHover           : lighten( @white, 3); @offWhiteHover        : lighten( @offWhite, 3); @darkWhiteHover       : lighten( @darkWhite, 3); @facebookHoverColor   : lighten( @facebookColor, 3); @twitterHoverColor    : lighten( @twitterColor, 3); @googlePlusHoverColor : lighten( @googlePlusColor, 3); @linkedInHoverColor   : lighten( @linkedInColor, 3); @youtubeHoverColor    : lighten( @youtubeColor, 3); @instagramHoverColor  : lighten( @instagramColor, 3); @pinterestHoverColor  : lighten( @pinterestColor, 3); @vkHoverColor         : lighten( @vkColor, 3); /*-------------------   Down (:active) --------------------*/ /*---  Colors  ---*/ @primaryColorDown    : darken(@primaryColor, 7); @secondaryColorDown  : darken(@secondaryColor, 7); @blueDown            : darken(@blue, 7); @greenDown           : darken(@green, 7); @orangeDown          : darken(@orange, 7); @pinkDown            : darken(@pink, 7); @purpleDown          : darken(@purple, 7); @redDown             : darken(@red, 7); @tealDown            : darken(@teal, 7); @yellowDown          : darken(@yellow, 7); @lightBlueDown       : darken(@lightBlue, 7); @lightGreenDown      : darken(@lightGreen, 7); @lightOrangeDown     : darken(@lightOrange, 7); @lightPinkDown       : darken(@lightPink, 7); @lightPurpleDown     : darken(@lightPurple, 7); @lightRedDown        : darken(@lightRed, 7); @lightTealDown       : darken(@lightTeal, 7); @lightYellowDown     : darken(@lightYellow, 7); /*---  Emotive  ---*/ @positiveColorDown   : darken(@positiveColor, 7); @negativeColorDown   : darken(@negativeColor, 7); /*---  Neutrals  ---*/ @fullBlackDown       : darken(@fullBlack, 7); @blackDown           : darken(@black, 7); @lightBlackDown      : darken(@lightBlack, 7); @lightGreyDown       : darken(@lightGrey, 7); @greyDown            : darken(@grey, 7); @darkGreyDown        : darken(@darkGrey, 7); @whiteDown           : darken(@white, 7); @offWhiteDown        : darken(@offWhite, 7); @darkWhiteDown       : darken(@darkWhite, 7); @facebookDownColor   : darken(@facebookColor, 7); @twitterDownColor    : darken(@twitterColor, 7); @googlePlusDownColor : darken(@googlePlusColor, 7); @linkedInDownColor   : darken(@linkedInColor, 7); @youtubeDownColor    : darken(@youtubeColor, 7); @instagramDownColor  : darken(@instagramColor, 7); @pinterestDownColor  : darken(@pinterestColor, 7); @vkDownColor         : darken(@vkColor, 7); /*-------------------       Active --------------------*/ /*---  Standard  ---*/ @primaryColorActive    : darken(@primaryColor, 5); @secondaryColorActive  : darken(@secondaryColor, 5); @blueActive            : darken(@blue, 5); @greenActive           : darken(@green, 5); @orangeActive          : darken(@orange, 5); @pinkActive            : darken(@pink, 5); @purpleActive          : darken(@purple, 5); @redActive             : darken(@red, 5); @tealActive            : darken(@teal, 5); @yellowActive          : darken(@yellow, 5); @lightBlueActive       : darken(@lightBlue, 5); @lightGreenActive      : darken(@lightGreen, 5); @lightOrangeActive     : darken(@lightOrange, 5); @lightPinkActive       : darken(@lightPink, 5); @lightPurpleActive     : darken(@lightPurple, 5); @lightRedActive        : darken(@lightRed, 5); @lightTealActive       : darken(@lightTeal, 5); @lightYellowActive     : darken(@lightYellow, 5); /*---  Emotive  ---*/ @positiveColorActive   : darken(@positiveColor, 5); @negativeColorActive   : darken(@negativeColor, 5); /*---  Neutrals  ---*/ @fullBlackActive       : darken(@fullBlack, 5); @blackActive           : darken(@black, 5); @lightBlackActive      : darken(@lightBlack, 5); @lightGreyActive       : darken(@lightGrey, 5); @greyActive            : darken(@grey, 5); @darkGreyActive        : darken(@darkGrey, 5); @whiteActive           : darken(@white, 5); @offWhiteActive        : darken(@offWhite, 5); @darkWhiteActive       : darken(@darkWhite, 5); @facebookActiveColor   : darken(@facebookColor, 5); @twitterActiveColor    : darken(@twitterColor, 5); @googlePlusActiveColor : darken(@googlePlusColor, 5); @linkedInActiveColor   : darken(@linkedInColor, 5); @youtubeActiveColor    : darken(@youtubeColor, 5); @instagramActiveColor  : darken(@instagramColor, 5); @pinterestActiveColor  : darken(@pinterestColor, 5); @vkActiveColor         : darken(@vkColor, 5);

Проектирование для Long Now

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

Наследование темы пользовательского интерфейса Semantic позволяет сохранить долгосрочные изменения в дизайне пользовательского интерфейса, позволяя вам перемещать элементы интерфейса из проекта в проект и делиться ими с другими.Система наследования Semantic также помогает обеспечить единую структуру для изменения элементов, помогая вам избежать головных болей от поиска правил, которые влияют на ваш пользовательский интерфейс, разбросанный по вашей кодовой базе.

Настройка элементов пользовательского интерфейса

Любые изменения элементов пользовательского интерфейса, которые являются последовательными на вашем веб-сайте, должны применяться в качестве темы сайта поверх семантического интерфейса.

Темы сайтов позволяют определениям пользовательского интерфейса напрямую настраивать скомпилированный CSS семантики, избегая избыточного CSS, который переопределяет то, что установлено в рамках. Каждый элемент пользовательского интерфейса имеет индивидуальный override и variable файл в папке темы вашего сайта. Файлы переопределения используются для предоставления дополнительных правил CSS, которые изменяют определение базовой линии. Переменные файлы позволяют изменять многие базовые переменные Semantic. Любая произвольная часть определения определяется как переменная. В семантике для настройки элементов используется более 3000 переменных , и они обеспечивают наилучшие средства для постоянной настройки элементов.

Использование файлов-заглушек

Когда вы загружаете семантику, папка темы вашего сайта будет загружена пустым файлом-заглушкой для всех возможных переопределений тем.

При настройке тем вашего сайта вам не нужно добавлять все исходные переменные в файл темы, а только переменные, которые вы хотите изменить .

Лучший способ узнать, какие переменные доступны для изменения, — это перемещаться внутри src/themes/default/ и просматривать все переменные по умолчанию для Semantic.

Сохранение отдельной темы сайта гарантирует, что вы не потеряете никаких изменений при обновлении семантического интерфейса в новых версиях. Для получения более практических примеров создания тем ознакомьтесь с руководством по теме .

Настройка пользовательских интерфейсов

Переменные в отличие от правил CSS часто абстрагируются от многих сложных деталей реализации . Например, вы можете настроить цвет рамки кнопки, но добавление переопределения css нарушит наследование для других правил, которые также регулируют границу. Настройка значения @borderColor в файле переменных файла src/site/elements/button.variables изменит все другие переменные, которые должны ссылаться на цвет границы кнопки, который может быть довольно обширным.

/* Adjusting @borderColor actually modifies a ton of other variables */ @shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; @borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset; @boxShadow:   @borderBoxShadow,   @shadowBoxShadow ; @downBoxShadow:   @borderBoxShadow,   0px 1px 4px 0px @borderColor inset !important ; @basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset; @basicHoverBoxShadow:   0px 0px 0px @basicBorderSize @borderColor inset,   0px 0px 0px 0px @borderColor inset ; @basicDownBoxShadow:   0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,   0px 1px 4px 0px @borderColor inset ; @basicGroupBorder: 1px solid @borderColor; @basicGroupBoxShadow: 0px 0px 0px 1px @borderColor; @attachedBoxShadow: 0px 0px 0px 1px @borderColor;

Темы сайта — это последний уровень наследования для Semantic UI, который позволяет вам иметь окончательное слово в настройках и значения по умолчанию для элементов пользовательского интерфейса.

Проектирование в нужное время

Макет CSS

Semantic разработан, чтобы упростить быстрый прототип новых макетов, часто предоставляя большую часть стилей, необходимых для создания функционального дизайна. Однако могут быть случаи, когда элементы используются так, как не ожидала оригинальная библиотека, или где вам, возможно, придется массировать элементы, чтобы они правильно вписывались в дизайн страницы. В этих случаях совершенно нормально использовать дополнительный макет css поверх Semantic.

Semantic предназначен для предоставления базового визуального языка для веб-сайта, но не предназначен для полного использования для создания макетов для вашего сайта.Веб-сайты — это сложные звери, в которых задействовано множество специфических особенностей, которые не могут содержать рамки.

Например, если вам нужно развернуть поля на плавающем изображении для определенной страницы, измените размеры заголовков для определенной рекламной страницы, добавьте дополнительное дополнение к группе сегментов или используйте нестандартный цвет, вам не нужно для настройки темы вашего сайта, но вместо этого можно просто написать собственный CSS-код для переопределения значений по умолчанию в библиотеке.

/* This is all perfectly fine */

#profile .user .image { margin-right: 3em; }

#promo .page.grid > h1 { font-size: 3em; }

#faq .unusual.segment { border-top-color: #009FDA; }

Упакованные темы

Semantic включает в себя глобальный файловый файл src/semantic.config который позволяет вам установить, какую пакетную тему использовать каждый элемент пользовательского интерфейса.

Упакованные темы похожи по структуре на темы сайтов, но предназначены для загрузки и распространения через Интернет.

Чтобы добавить новую упакованную тему, просто извлеките тему в src/themes/theme-name/ и настройте файл semantic.config чтобы включить ссылку на новую тему.

Например, фишка пользовательского интерфейса предоставляет тему «Временная шкала» из коробки, которая значительно корректирует внешний вид фида для хронологического отображения. Настройка строкового значения для @feed внутри semantic.config позволит Semantic знать, чтобы скомпилировать элемент с другой упакованной темой.

/* My Themes */

@feed : ‘timeline’;

/* Global */

@site : ‘default’;

@reset : ‘default’;

/* Elements */

@button : ‘default’;

@container : ‘default’;

@icon : ‘default’;

@divider : ‘default’;

@flag : ‘default’;

@header : ‘default’;

@image : ‘default’;

@input : ‘default’;

@label : ‘default’;

@list : ‘default’;

@loader : ‘default’;

@progress : ‘default’;

@rail : ‘default’;

@reveal : ‘default’;

@segment : ‘default’;

@step : ‘default’;

/* Collections */

@breadcrumb : ‘default’;

@form : ‘default’;

@grid : ‘default’;

@menu : ‘default’;

@message : ‘default’;

@table : ‘default’;

/* Modules */

@accordion : ‘default’;

@chatroom : ‘default’;

@checkbox : ‘default’;

@dimmer : ‘default’;

@dropdown : ‘default’;

@modal : ‘default’;

@nag : ‘default’;

@popup : ‘default’;

@rating : ‘default’;

@search : ‘default’;

@shape : ‘default’;

@sidebar : ‘default’;

@sticky : ‘default’;

@tab : ‘default’;

@transition : ‘default’;

@video : ‘default’;

/* Views */

@card : ‘default’;

@comment : ‘default’;

@item : ‘default’;

@statistic : ‘default’;

Будущее Темы

Семантик предоставляет из коробки несколько первых партийных тем, которые предназначены для демонстрации того, насколько легко настраивать дизайн пользовательского интерфейса с помощью Semantic. Специализированный центр для семантических тем находится в работах, которые сделают упакованные темы более вездесущими.

Чтобы узнать больше об использовании тем, ознакомьтесь с нашим обзором.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *