테마링
테마링 (Theming)
Fomantic UI의 모양을 사용자 정의 테마로 변경하는 방법을 소개하는 문서예요. 색상 변수, theme.config, 컴포넌트 구성과 상속 원리를 다뤄요.
출처: 문서
본문
테마링에 대한 소개예요.
서문 (Preface)
점진적 진실성 (Progressive Truthfulness)
[Progressive truthfulness]는 아마 물리적 객체의 모델을 만드는 더 나은 방법일 거예요... 완전히 상세하지만 원하는 것과 비슷한 모델로 시작하세요. 그런 다음 속성 하나씩 조정하면서, 결과를 새 창조물에 대한 정신적 비전이나 실제 객체의 실제 속성에 점점 더 가깝게 가져가세요.
Frederick Brooks - The Design of Design
예제로 이끌기 (Lead By Example)
GitHub 재현하기 (Recreating GitHub)
Fomantic UI에는 테마링을 선보이기 위해 설계된 예제 프로젝트가 포함되어 있어요. 이 프로젝트는 패키지된 테마 만들기, 컴포넌트 CSS 오버라이드 사용, theme.config로 테마 관리하기 등의 예시를 담고 있어요.
Using site.variables to modify page container sizes, default fonts, and colors
Using overrides with variables to add GitHub's specially formatted tab style
Combining multiple individual component themes together in one theme.config
Using a custom icon font, and modifying paths to assets.
View Theming Demo
site.variables를 사용해 페이지 컨테이너 크기, 기본 글꼴, 색상을 수정하고, 변수와 함께 overrides를 사용해 GitHub의 특별한 형식의 탭 스타일을 추가하며, 여러 개별 컴포넌트 테마를 하나의 theme.config로 결합하고, 사용자 정의 아이콘 글꼴과 에셋 경로 수정을 다룹니다.
테마 사용하기 (Using Themes)
사이트 전체 기본값 (Sitewide Defaults)
Fomantic UI에는 열두 개의 이름 있는 색상이 포함되어 있어요. 색상 변형이 있는 컴포넌트는 색상이 어떻게 보일지 정의할 때 이 전역 변수들을 상속해요.
Other button shades like those used in hover, active and focus states are created by modifying the saturation and lightness of color variables, these derived variables will automatically adjust to your new color palette.
@primaryColor : @pink;
@secondaryColor : @grey;
@red : #DB2828;
@orange : #FE9A76;
@yellow : #FFD700;
@olive : #32CD32;
@green : #016936;
@teal : #008080;
@blue : #0E6EB8;
@violet : #EE82EE;
@purple : #B413EC;
@pink : #FF1493;
@brown : #A52A2A;
@grey : #A0A0A0;
@black : #000000;
Primary Button
Secondary Button
All Colors
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
hover, active, focus 상태에 쓰이는 다른 버튼 색조는 색상 변수의 채도와 명도를 수정해 만든다. 이 파생 변수들은 새로운 색상 팔레트에 맞춰 자동으로 조정될 거예요.
컴포넌트 기본값 (Component Defaults)
컴포넌트는 site.variables의 기본값을 상속하며, 컴포넌트 특유의 값으로 재정의할 수 있어요.
/* Checkbox */
@checkboxActiveBackground: @primaryColor;
@checkboxActiveBorderColor: @primaryColor;
@checkboxActiveCheckColor: @white;
/* Focused Checkbox */
@checkboxActiveFocusBackground: @primaryColorFocus;
@checkboxActiveFocusBorderColor: @primaryColorFocus;
@checkboxActiveFocusCheckColor: @white;
@checkboxTransition: none;
/* Radio */
@radioActiveBackground: @white;
@radioActiveBorderColor: @primaryColor;
@radioActiveBulletColor: @primaryColor;
/* Focused Radio */
@radioActiveFocusBackground: @white;
@radioActiveFocusBorderColor: @primaryColorFocus;
@radioActiveFocusBulletColor: @primaryColorFocus;
/* Slider */
@sliderOnLineColor: @primaryColor;
/* Focused Slider */
@sliderOnFocusLineColor: @primaryColorFocus;
Checkbox
A
B
C
D
Slider
패키지 테마 사용하기 (Using Packaged Themes)
Fomantic UI를 다운로드하면 모든 컴포넌트가 기본 테마를 사용하도록 설정돼요. Semantic은 프로젝트의 패키지된 테마링 구성을 제어하는 특별한 파일 theme.config를 사용해요.
/*******************************
Theme Selection
*******************************/
/* Global */
@site : 'material'; /* Loads material site defaults */
@reset : 'default';
/* Text */
@placeholder: 'default';
@text : 'default';
/* Elements */
@button : 'github'; /* But uses them with GitHub Buttons */
@container : 'default';
@divider : 'default';
@emoji : 'default';
@flag : 'default';
@header : 'default';
@icon : 'default';
@image : 'default';
@input : 'default';
@label : 'default';
@list : 'default';
@loader : 'default';
@rail : 'default';
@reveal : 'default';
@segment : 'default';
@step : 'default';
/* Collections */
@breadcrumb : 'default';
@form : 'default';
@grid : 'default';
@menu : 'chubby'; /* Other UI can use different themes as well */
@message : 'default';
@table : 'default';
/* Modules */
@accordion : 'default';
@calendar : 'default';
@checkbox : 'default';
@dimmer : 'default';
@dropdown : 'default';
@embed : 'default';
@modal : 'default';
@nag : 'default';
@popup : 'default';
@progress : 'default';
@rating : 'default';
@search : 'default';
@shape : 'default';
@sidebar : 'default';
@slider : 'default';
@sticky : 'default';
@tab : 'default';
@toast : 'default';
@transition : 'default';
/* Views */
@ad : 'default';
@card : 'default';
@comment : 'default';
@feed : 'default';
@item : 'default';
@statistic : 'default';
테마 둘러보기 (Browsing for Themes)
각 UI 정의에는 프로젝트에 포함된 테마를 미리 볼 수 있는 드롭다운이 페이지 상단에 있어요.
컴포넌트 구성하기 (Composing a Component)
정의 파일 (Definition File)
각 컴포넌트에는 컴포넌트의 변수가 화면 표시에 어떻게 영향을 줘야 하는지 선언하는 소스 CSS와 Javascript 파일이 포함돼요. 정의 파일은 Fomantic UI의 새 릴리스마다 업데이트되며, 새 변수를 포함할 수도 있어요.
/*******************************
Theme
*******************************/
/* Define type and element to help locate theme files */
@type : 'element';
@element : 'button';
/* Processes Variable Inheritance */
@import (multiple) '../../theme.config';
/* Create scope */
& {
/*******************************
Button
*******************************/
/* Define Component */
.ui.button {
cursor: pointer;
display: inline-block;
min-height: 1em;
outline: none;
border: none;
vertical-align: @verticalAlign;
background: @background;
color: @textColor;
font-family: @fontFamily;
margin: 0 @horizontalMargin @verticalMargin 0;
padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
text-transform: @textTransform;
text-shadow: @textShadow;
font-weight: @fontWeight;
line-height: @lineHeight;
font-style: normal;
text-align: center;
text-decoration: none;
border-radius: @borderRadius;
box-shadow: @boxShadow;
user-select: none;
transition: @transition;
will-change: @willChange;
-webkit-tap-highlight-color: @tapColor;
}
/* Additional CSS removed for brevity */
/* Load CSS Overrides and Inline */
.loadUIOverrides();
}
테마 파일 (Theme Files)
테마는 두 파일로 구성돼요: .variables 파일과 .overrides 파일이에요. 테마는 변수와 오버라이드를 둘 다 포함하거나, 그중 하나만 포함할 수 있어요.
변수 파일 (Variables Files)
.variables 파일은 테마에 대해 조정해야 할 변수를 지정해요.
오버라이드 파일 (Override Files)
.overrides 파일은 테마의 정의에 추가할 추가 CSS 규칙을 지정해요. 이 파일은 컴포넌트에 대해 상속된 모든 변수에도 접근할 수 있어요.
캐스캐이딩 상속 (Cascading Inheritance)
테마 상속 (Theme Inheritance)
테마는 변수 상속의 세 가지 별도 수준을 포함해요.
Defaults
UI Defaults
Packaged Theme
Distributable Packages
Site Theme
Site Specific Changes
기본 테마 (Default Theme)
기본 테마는 컴포넌트에 대한 기준 변수를 제공해요.
src
themes
default
패키지 테마 (Packaged Theme)
패키지 테마는 배포를 위해 한 폴더에 묶여 있는 테마예요. 인터넷에서 다운로드하거나 프로젝트 간에 옮겨 쓸 수 있어요.
src
themes
theme-name
사이트 테마 (Site Theme)
사이트 테마는 모든 테마에 위치한 파일인 site.variables와 혼동하지 마세요. 사이트 테마는 다른 모든 테마 위에 로드할 수 있는 특별한 사용자 테마예요.
src
site