Recipes
Recipes
Fomantic UI를 더 깊이 활용하고 싶은 고급 사용자를 위한 통합 경로들을 담은 문서예요. gulp 파이프라인 커스터마이징부터 개별 컴포넌트 사용, LESS 임포트, 로컬 문서 실행까지 다룹니다.
출처: Recipes
본문
고급 사용자를 위한 추가 통합 경로들
커스텀 파이프라인 (Custom Pipelines)
Gulp 태스크 임포트하기
우리의 gulp 파이프라인을 사용할 필요 없이, 태스크를 자신의 gulpfile로 임포트하면 돼요.
var
gulp = require('gulp'),
watch = require('./semantic/tasks/watch'),
build = require('./semantic/tasks/build')
;
// import task with a custom task name
gulp.task('watch ui', watch);
gulp.task('build ui', build);
Semantic.json 설정
자동 설치 (Auto-Install)
보통 npx gulp install을 실행하면 대화형 설치 프로그램이 시작돼요. 이 설치 프로그램이 사용자 상호작용 없이 실행되고 대신 semantic.json의 모든 설정을 사용하게 하려면, semantic.json 파일에 특수 플래그 autoInstall: true을 포함시키세요.
{
// install will now automatically build your project files without user interaction
"autoInstall": true,
// these settings may be different
"base": "",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"rtl": false,
}
오른쪽에서 왼쪽으로 쓰는 언어 (RTL)
플래그 rtl:true를 포함하면 RTLCSS를 사용해 Fomantic UI를 빌드해요.
{
// builds both LTR and RTL version
"rtl": "both",
// these settings may be different
"base": "",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
}
Fomantic UI로 프로토타이핑하기
Sketch 파일
Fomantic UI와 함께 Sketch를 사용해 레이아웃을 프로토타이핑하고 싶다면 Semantic UI Sketch Files를 확인해보세요.
단일 컴포넌트 (Single Components)
CDN 릴리즈
개별 컴포넌트는 jsDelivr에서 제공돼요.
View All CDN Files
태그 릴리즈 (Tagged Releases)
컴포넌트 저장소는 NPM에 릴리즈되고 GitHub에서는 태그된 릴리즈로 제공돼요.
npm install semantic-ui-component
서버 사이드 렌더링 (Server-Side Rendering)
개별 컴포넌트 저장소에는 NodeJS에서 require 사용을 간편하게 해주는 자동 생성된 index.js 파일이 포함돼 있어요. 서버 사이드 렌더링이나 Browserify에서 사용할 수 있죠.
npm install semantic-ui-dropdown
var
dropdown = require('semantic-ui-dropdown')
;
foo.dropdown();
LESS 임포트하기
LESS 전용 배포
커스텀 통합을 사용하고 빌드 도구가 필요 없는 프로젝트를 위해 특별한 배포판 Fomantic-UI-LESS가 제공돼요.
Semantic 임포트하기
semantic.less는 모든 릴리즈에서 다른 LESS 파일에서 여러 컴포넌트를 임포트하기 위한 진입점으로 사용할 수 있어요.
/* Import all components */
@import 'src/semantic';
컴포넌트 임포트하기
개별 컴포넌트를 임포트해야 한다면, 상속 문제를 피하기 위해 각 임포트를 범위(scope) 안에 넣어야 해요.
/* Import specific components with scope */
& { @import 'src/definitions/elements/button'; }
& { @import 'src/definitions/elements/list'; }
로컬에서 문서 실행하기
문서 서버 다운로드
Fomantic UI 문서를 얻는 가장 쉬운 방법은 저장소를 클론하는 것이에요.
git clone https://github.com/fomantic/Fomantic-UI-Docs.git
의존성 설치
Fomantic UI의 문서는 NodeJS로 만들어진 훌륭한 정적 사이트 생성기인 Docpad로 작성돼요.
cd docs/
npm install
경로에 대한 참고 사항
Fomantic UI의 빌드 도구에는 문서와 함께 사용하기 위한 build-docs와 serve-docs라는 두 가지 특수 명령이 포함돼 있어요. 이 명령들은 ui/ 폴더의 변경 사항을 라이브 문서 서버로 직접 전달해요.
ui/
Files from fomantic ui repo
docs/
Files from docs repo
UI 빌드하기
문서를 처음 실행할 때는 전체 프로젝트를 한 번 빌드해야 해요.
cd ui/
npx gulp build-docs
Docpad 서버 실행하기
Docpad
cd docs/
# initial build may take several minutes
docpad run
UI를 문서에 서빙하기
그런 다음 UI를 계속 수정하고 이 파일들을 라이브 문서 인스턴스에 "서빙"해 변경 사항을 즉시 확인할 수 있어요.
cd ui/
gulp serve-docs
호스팅된 문서
자체 문서를 관리한다면 내장된 docpad gh-pages 플러그인을 사용해 GitHub Pages로 자동 배포할 수 있어요.
docpad deploy-ghpages --env static
커스텀 문서 경로
문서 태스크 경로는 tasks/config/docs.js 파일에 지정되며 프로젝트에 필요한 어떤 폴더 구성으로도 조정할 수 있어요.
더 알아보기
이 문서는 Fomantic UI를 프로젝트에 깊이 통합하고 싶은 고급 사용자를 위한 레시피 모음이에요. 빌드 도구의 기본 개념은 Build Tools 문서에서, 테마 커스터마이징은 Theming 가이드에서 확인하세요.