Menu

主题
主题介绍

前言

进步的真实性

[渐进真实]也许是一个更好的方法来建立物理对象的模型...从一个模型开始,这是完全详细的,但只是类似于什么是想要的. 然后, 一个接着一个地调整属性, 让结果更接近新创造的精神愿景, 或者是真实物体的真实属性

...从具有一致性风格的范例开始,确保设计师能够失去这种一致性.

弗雷德里克·布鲁克斯- 设计中的设计

语义UI中的组件旨在帮助开发人员坚持 进步的真实性 在他们的发展.

而不是必须从一个空白的画布创建组件, 使用语义UI的开发人员只需要指定他们的组件应该如何不同于使用默认主题 CSS变量.

对于没有时间磨炼特定外观和感觉的开发人员来说,默认主题是优雅的、中立的、清晰的, 开源无衬线字体 Lato.

以身作则

重建GitHub

语义UI包括 示例项目 设计来展示主题. 这个项目包括创建打包主题的示例, 使用组件CSS覆盖, 和管理您的主题 主题.配置.

点击开始 油漆可以 右上方通知按钮旁边的图标

示例项目包括两个HTML文件, 指数.html 是设计来交换主题使用边栏,并使用预编译的CSS. 静态.html 使用由语义UI输出的文件,可以与365app的 喘不过气管道 来尝试修改主题.

一些特别的注意事项:

使用网站.变量 修改页面容器大小、默认字体和颜色
使用覆盖 用变量添加GitHub的特殊格式选项卡样式
将多个单独的组件主题组合在一起 主题.配置
查看主题演示

使用主题

网站wide违约

语义UI包括12种命名颜色. 具有颜色变化的组件在定义颜色应该如何显示时继承这些全局变量.

每一个 水平的继承 包含一个特殊文件 网站.变量 哪个定义了每个组件可以扩展的主题范围默认值.

全局变量使用更高层次的抽象, 避免为了改变元素的外观而修改多个属性的单调乏味.

其他按钮阴影像那些在 徘徊, 活跃的焦点 状态是通过修改颜色变量的饱和度和明度来创建的, 这些派生变量将自动调整到您的新调色板.

@primaryColor: @pink; @secondaryColor: @grey; @red : # B03060; @orange : # FE9A76; @yellow : # FFD700; @olive : # 32 cd32; @green : # 016936; @teal : # 008080; @blue : # 0 e6eb8; @violet : # EE82EE; @purple : # B413EC; @pink : # FF1493; @brown : # A52A2A; @grey : # A0A0A0; @black : # 000000;
所有的颜色

组件的默认值

组件从中继承默认值 网站.变量 它们可以为自己的组件重新定义哪些组件

例如, 你可以用它来代替默认的灰色复选框, 你希望你的颜色包括你的网站的品牌颜色. 这可以通过几个变量来实现.

/ * * /复选框 @checkboxActiveBackground: @primaryColor; @checkboxActiveBorderColor: @primaryColor; @checkboxActiveCheckColor: @white; /*聚焦的复选框*/ @checkboxActiveFocusBackground: @primaryColorFocus; @checkboxActiveFocusBorderColor: @primaryColorFocus; @checkboxActiveFocusCheckColor: @white; @checkbox过渡:没有; / *广播* / @radioActiveBackground: @white; @radioActiveBorderColor: @primaryColor; @radioActiveBulletColor: @primaryColor; /*聚焦无线电*/ @radioActiveFocusBackground: @white; @radioActiveFocusBorderColor: @primaryColorFocus; @radioActiveFocusBulletColor: @primaryColorFocus; / *滑块* / @sliderOnLineColor: @primaryColor; /*聚焦滑块*/ @sliderOnFocusLineColor: @primaryColorFocus;

使用包装的主题

当你下载语义UI时,所有组件都将被设置为使用默认主题. 语义使用一个特殊的文件 主题.配置 用于控制项目的打包主题配置.

打包主题应用于每个组件,而不是全局. 这意味着您可以为每个组件指定单独的主题, 混合和匹配从可用的主题.

默认的 主题.配置 是否将所有组件的值设置为默认. 要选择主题,只需更改组件以匹配主题名称.

例如:

/******************************* 主题选择 *******************************/ / * * / @网站 : 'material'; /* Loads material 网站 默认的s */ @reset:“违约”; * / / *元素 @button : 'github'; /* But uses them with GitHub Buttons */ @container:“违约”; @divider:“违约”; @flag : ' 默认的; @header:“违约”; @icon : ' 默认的; @image:“违约”; @input:“违约”; @label:“违约”; @ list : ' 默认的; @loader:“违约”; @rail : ' 默认的; @reveal:“违约”; @segment:“违约”; @step : ' 默认的; / * * /集合 @breadcrumb:“违约”; @form : ' 默认的; @grid : ' 默认的; @menu : 'chubby'; /* Other UI can use different 主题 as well */ @message:“违约”; @ table:“违约”; * / / *模块 @accordion:“违约”; @checkbox:“违约”; @dimmer:“违约”; @dropdown:“违约”; @embed:“违约”; @modal:“违约”; @nag : ' 默认的; @popup:“违约”; @progress:“违约”; @rating:“违约”; @search:“违约”; @shape:“违约”; @sidebar:“违约”; @sticky:“违约”; @tab : ' 默认的; @transition:“违约”; / * * /观点 @ad : ' 默认的; @card : ' 默认的; @comment:“违约”; @feed : ' 默认的; @item : ' 默认的; @statistic:“违约”;

浏览主题

每个UI定义在页面顶部都有一个下拉菜单,用于预览项目中包含的主题.

主题是 每个组件所以,虽然,例如,材料主题是可用的 menu, button, 网站, 将所有值更改为“material”将产生错误的组件不包括在该主题.

组成一个组件

定义文件

每个组件都包含一个源CSS和Javascript文件,用于声明组件变量应该如何影响其在屏幕上的显示. 语义UI的每个新版本都会更新定义文件, 其中可能还包括新变量.

对于熟悉CSS的开发人员来说,导航定义文件是了解主题如何影响组件显示的好方法.

这是删节版的 button 并对文件的每个部分进行解释.

/******************************* 主题 *******************************/ /*定义类型和元素来帮助定位主题文件*/ @type:“元素”; @element:“按钮”; /*处理变量继承*/ @ import(多个)../../主题.配置”; /*创建范围*/ & { /******************************* Button *******************************/ /*定义组件*/ .ui.按钮{ 光标:指针; 显示:inline-block; 最小高度:1 em; 大纲:没有; 边界:没有; vertical-align: @verticalAlign; 背景:@background; 颜色:@textColor; 字体类型:@fontFamily; margin: 0em @horizontalMargin @verticalMargin 0em; 填充:@verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); 首字母:@textTransform; 文本阴影:@textShadow; 粗细:@fontWeight; 行高:@lineHeight; 字体样式:正常; text-align:中心; 文字修饰:没有; border - radius: @borderRadius; 不必:@boxShadow; 用户选择:没有; 过渡:@transition; 将会改变:@willChange; -webkit-tap-highlight-color: @tapColor; } /*删除额外的CSS */ /*加载CSS覆盖和内联*/ .loadUIOverrides (); }

主题文件

主题由两个文件组成 .变量 文件和一个 .覆盖 文件. 主题可以同时包含变量和重写,或者只包含其中之一.

变量的文件

A .变量 File指定一个主题需要调整的变量.

主题的变量文件只需要包含不同主题的变量.

覆盖文件

An .覆盖文件指定要添加到主题定义中的其他CSS规则. 该文件还可以访问组件的所有继承变量.

级联继承

主题的继承

主题包含三个独立的变量继承级别.

每个继承级别对应一个变量的不同级别的持久性.

违约
UI违约
包装的主题
可分配的包
网站的主题
网站的具体变化

默认主题

默认主题为组件提供基线变量.

要理解主题中包含哪些变量,最好的方法是检查组件的默认值 .变量 文件.

包装的主题

打包主题是将主题捆绑在一个文件夹中以便发布. 这些文件可以从互联网上下载,或者在项目之间携带.

打包主题可以通过修改您的 主题.配置 文件.

网站的主题

一个站点主题,不要与之混淆 网站.变量 一个文件位于每个主题,是一个特殊的用户主题,可以加载在所有其他主题之上.

这是存储将在单个站点上使用的更改的最佳位置. 一个网站主题可以被认为类似于 儿童主题 在Wordpress.

网站主题文件 是可选的包括 如果不需要对项目上的组件添加额外更改,则可以安全地删除.

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9