Gulp 이하의 맞춤형 Uikit 테마를 만듭니다

키 테이크 아웃

Uikit의 커스터마이저는 웹 사이트에 고유 한 테마와 테마 변형 (스타일)을 만드는 데 사용하여 군중에서 눈에 띄게 할 수 있습니다. 프로세스는 간단하지만 합병증을 최소화하기 위해 적절한 워크 플로가 필요합니다. 사용자 정의를 설정하려면 Uikit 저장소를 다운로드하거나 복제하고 노드 및 Gulp를 설치하고 Uikit의 개발 종속성을 설치해야합니다. 그런 다음 루트 디렉토리에서 테마의 폴더를 생성하고 필요한 파일을 추가하고 수정할 수 있습니다. uikit은보다 복잡한 사용자 정의를위한 후크를 제공하므로 개발자는 코어를 깨지 않고 새로운 규칙을 추가하거나 기존 규칙을 변경할 수 있습니다. 각 구성 요소에는 후크가 있으며 새 선택기를 생성하거나 기존 선택기를 수정하는 데 사용할 수 있습니다. GUI Customizer는 더 간단한 수정에 직접 사용할 수 있습니다. 이를 통해 개발자는 변수를 수정하고 테마의 최종 CSS 파일을 가져 오며 테마 변형을 만들 때 스타일을 자동으로 생성 할 수 있습니다. 또한 커스터마이저의 왼쪽 패널에서 변수의 가시성 및 가용성을 제어 할 수 있습니다.

모두가 독특하기를 원합니다. 주변 환경에 많은 사람들이 당신처럼 보이는 사람들이 있다면 정말 행복하지 않을 것 같아요? 이것은 다른 사람들에게도 마찬가지입니다. 친구들은 또한 어디에서나 당신의 클론을 보는 것을 기쁘게 생각하지 않을 것입니다. 우리 웹 사이트에서도 마찬가지입니다.

요즘에는 프론트 엔드 프레임 워크가있는 웹 사이트를 구축하는 것이 일반적입니다. 그러나 문제는 많은 사람들이 모든 웹 사이트를“동일하게 보이게하는”것에 대한 그러한 프레임 워크를 비난한다는 것입니다. 그러나 개발자가 필요한 사용자 정의를 기꺼이하지 않으면 도구가 비난하지 않습니다. 당신이 구축하는 웹 사이트가 군중에서 눈에 띄기를 원하는 사람들을 위해 Uikit의 커스터마이저를 사용하여 다른 테마와 테마 변형 (스타일)을 만드는 방법을 보여줄 것입니다. 프로세스는 간단하지만 최소한의 두통으로 수행하려면 적절한 워크 플로가 필요합니다.

사용자 정의 설정 주황색으로 오렌지를 가진 웹 사이트의 어두운 테마를 만들고 싶다고 가정 해 봅시다. 또한 파란색과 녹색 악센트 색상으로 그 테마의 두 가지 변형을 원합니다. 우리가 어떻게 할 수 있는지 봅시다. (참고 : Brevity를 위해서는 프로세스를 보여주기 위해 버튼 만 사용합니다). 다음 단계가 완료되도록 시작해야합니다.
• Uikit 저장소를 다운로드하거나 복제하십시오 이미가없는 경우 노드와 덩어리를 설치하십시오.
Uikit의 개발 종속성을 설치하십시오. Uikit 루트 디렉토리를 탐색하고 터미널에서 NPM 설치를 실행 하여이 작업을 수행 할 수 있습니다.
• 이 모든 것이 올바르게 설정되면 테마를 만들 수 있습니다.
테마 만들기 여전히 루트 디렉토리에 있는데 "Custom"이라는 폴더를 만듭니다. 해당 폴더에서 "Dark"라는 다른 폴더를 만들고 내부에는 Uikit.less라는 파일을 만듭니다. 파일을 열고 다음을 추가하십시오

첫 번째 줄은 핵심 프레임 워크에서 파일이 모두 줄어들고 두 번째 줄은 기본 Uikit 버튼을 수정하는 데 사용할 파일을 가져옵니다. 파일을 저장하고 닫고 위에서 언급 한 버튼을 만듭니다. 추가 사용자 정의를 만들기 전에 커스터마이저에서 로컬로 테마를 사용할 수 있도록해야합니다. 그렇게하려면 Uikit 루트 디렉토리에서 터미널에서 다음을 실행하십시오.

이제 Uikit 웹 사이트 (설치 한 웹 사이트)의 로컬 사본을 시작하고 내비게이션 바에서 "Customizer"를 클릭하십시오. "테마 선택"드롭 다운 목록을 열면 끝에 "어두운"이 표시됩니다. 이 시점에서 선택하면 스타일이 없음을 알 수 있습니다. 왜 안 돼? 봅시다. Uikit의 문서에서 언급되지 않았으며 두통 비용이 많이들 수있는 한 가지는 테마에 uikit-customizer.less라는 파일이 필요하다는 것입니다. 파일을 만들고 다음 줄을 추가하십시오

당신은 위의 줄과 함께 테마의 루트 디렉토리에 해당 파일을 넣어야합니다 (우리의 경우 "어두운"폴더 내부). 이 파일이없는 경우 커스터마이저를 올바르게 사용할 수 없습니다. 테마 이름은 목록에 표시되지만 스타일이 누락됩니다. 참고 : 경험의 규칙으로 Uikit-Customizer.less 파일은 테마가 사용하는 모든 파일을 가져와야합니다. 이 예에서는 Uikit을 가져 오기 기본 Uikit 스타일과 사용자 정의 버튼 스타일이 모두 포함되어 있기 때문에이 요구 사항을 충족합니다. uikit-customizer.less 파일을 추가 한 후에는 이번에 모든 구성 요소가 올바르게 스타일이 적합하다는 것을 알 수 있습니다. 그래서 우리는 계속 진행할 준비가되었습니다.

구성 요소의 드롭 다운 목록에서 커스터마이저 오른쪽에있는 패널의 왼쪽 상단에 배치 된 "버튼"으로 전환하십시오. 이렇게하면 사용 가능한 모든 버튼 스타일을 볼 수 있습니다. 이제 버튼을 열 수 있고리스 파일을 열고 수정을 추가하기 시작합니다.

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

위 코드에서는 기본 버튼의 텍스트 및 배경색에 대한 변수를 정상, 호버링 및 활성 상태에서 수정했습니다. 다른 특정 버튼의 경우 이러한 변수도 변경해야합니다. <p> <in>에서 후크를 사용합니다 <u> Uikit 변수 수정은 간단한 수정을 처리 할 때 프레임 워크 구성 요소의 모양을 변경하는 가장 쉬운 방법입니다. 그러나 새로운 규칙을 추가하거나 핵심 규칙을 끊지 않고 기존 규칙을 변경하는 것과 같은보다 복잡한 사용자 정의의 경우 Uikit은 특별한 메커니즘을 제공합니다. <hook> 후크 <p>를 사용하여 변경 사항을 안전하게 추가합니다. 이것을 실제로 보자. 버튼 안에 변수 아래에 다음 코드를 넣습니다.</p> <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;@import &quot;../../src/less/uikit.less&quot;;&lt;/span&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;@import &quot;button.less&quot;;&lt;/span&gt;&lt;/span&gt;</pre> <hook> 여기서 버튼 구성 요소의 후크는 테두리 반경과 드롭 쉐이도 효과를 추가하는 데 사용됩니다. <p> <specific> 더 구체적인 변화를 위해 Uikit은 기타 고리를 제공합니다. 각 구성 요소에는 그러한 후크가 있습니다. 이는 새로운 선택기를 생성하거나 사용자 정의에 사용할 수있는 변수 나 후크가없는 선택기를 수정하는 데 유용합니다. 다음 코드를 추가하여이를 시연하겠습니다 </specific></p> <the> 여기서 우리는 비활성화되지 않은 모든 활성화 버튼에 대한 드롭 쉐이드를 제거합니다. 그런 다음 모든 주에서 링크의 밑줄을 제거합니다. 마지막으로, 우리는 버튼 링크의 개요를 제거하고 대신 링크가 집중 될 때 표시된 멋진 테두리를 추가합니다. 버튼을 저장합니다. 없음 파일. <p> <can> 참고 : 해당.없는 파일의 끝을 보면 특정 구성 요소에 사용 가능한 모든 후크를 볼 수 있습니다. 버튼 구성 요소의 예는 다음과 같습니다 </can></p> <main> 이제 메인 테마가 준비되었으며 커스터마이저에서 확인할 수 있습니다. 페이지를 다시로드하고 즐기십시오. <pre class="brush:php;toolbar:false">gulp indexthemes</pre> <p> </p> <les> 테마를위한 스타일 만들기 <ready> 이제 테마 스타일을 만들 준비가되었습니다. Dark Theme 디렉토리에서 "Styles"라는 새 폴더를 만들고 내부에는 "Blue"라는 다른 폴더를 만들 것입니다. 해당 폴더에서 빈 스타일을 만듭니다. 버튼에서 처음 세 줄의 코드를 복사하고 파일에 붙여 넣은 다음 @Button-Color의 값을 #09F로 변경하고 파일을 저장하십시오. 파일의 내용은 다음과 같습니다 </ready></les></main></the></hook></hook></u></in></p> <index> 새로 생성 된 스타일을 포함시키기 위해 터미널에서 Gulp Indexemes를 다시 실행 한 다음 커스터마이저로 돌아가서 페이지를 새로 고치십시오. 이제 테마 목록 끝에 "Dark-Blue"옵션이 표시됩니다. 그것을 선택하면 이제 버튼이 멋진 파란색 악센트로 나타납니다. 녹색 스타일의 경우 동일한 절차를 반복하고 대신 #9C0의 색상 값을 사용하십시오. <ied> 테마에 만족하면이 작업을 실행하여 테마를 구축 할 수 있습니다. <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;@import &quot;uikit.less&quot;&lt;/span&gt;&lt;/span&gt;</pre> <the> 이것은 어두운 테마를 구축하고 Uikit 루트 디렉토리의 "Dist"폴더에 넣습니다. 그런 다음 "CSS"폴더에는 uikit.dark.css 및 uikit.dark.min.css 파일이 있습니다. 불행히도이 파일에는 메인 테마의 스타일 만 포함되어 있습니다. 파란색과 녹색 스타일은 포함되어 있지 않습니다. 그러나 다음에 설명 하겠지만 GUI Customizer를 사용하여 CSS 파일도 얻을 수 있습니다. GUI Customizer 사용 <i> <how> 나는 특정 프로세스의 기본 메커니즘을 항상 아는 것이 좋기 때문에 테마를 수동으로 만드는 방법을 보여주었습니다. 그러나 복잡한 수정이 필요하지 않으면 GUI 사용자 정의기를 직접 사용할 수 있습니다. 필요한 단계를 살펴 보겠습니다. <p></p> <ul> <izer> Customizer로 이동하여 사용자 정의하려는 테마를 선택하십시오. <panel> 왼쪽 패널을 사용하여 변수를 수정하십시오. 일반적으로 글로벌 변수 만 표시됩니다. 구성 요소의 변수가 보이려면 "고급 모드"옵션을 활성화해야합니다. 기본적으로 다른 변수를 통해 값을 정의하는 변수가 숨겨져 있습니다. 고급 모드에서는 이러한 종류의 변수를 포함하는 그룹 옆에 "(more)"버튼을 볼 수 있습니다. <you> 원하는 변경 사항을 작성하고 "CSS GET"버튼을 누르십시오. 테마의 최종 CSS 파일을 제공합니다. 이 버튼을 사용하여 파란색 및 녹색 스타일의 CSS 파일을 얻을 수 있습니다. "다크 블루"또는 "어두운 녹색"을 선택하고 버튼을 클릭하십시오. <li> </li> <a> 최소화 버전을 원한다면 "CSS 미니"옵션을 확인하십시오. <left> 왼쪽에서 오른쪽으로 언어를 사용하는 경우 "RTL 모드"를 확인하면 전체 테마가 자동으로 변환됩니다. <li> </li> <the> "CSS get"버튼 대신 "get get"버튼을 누르면 출력 파일에는 변경된 변수 만 포함됩니다. 이런 식으로 테마 변형을 만들 때 스타일을 자동으로 만들 수 있습니다. <li> <br> 모든 테마는 Customizer.json 파일을 사용하여 기본적으로 또는 고급 모드에서만 표시되는 변수를 정의합니다. 이 파일을 수정하면 Customizer의 왼쪽 패널에서 변수의 가시성 및 가용성을 제어 할 수 있습니다. 이에 대한 자세한 내용은 Customizer.json 페이지를 참조하십시오 <you> 참고 : INDEXTheMES 작업을 실행할 때 테마가 고유 한 Customizer.json 파일이없는 경우 (새 테마를 생성하는 경우) Uikit은 기본 테마 (/Themes/에서 파일을 사용합니다. 기본/customizer.json). 이 파일을 사용자 정의하려면 테마의 루트 디렉토리에 복사하여 붙여 넣고 Gulp IndexTemes를 다시 실행하여 테마를 업데이트해야합니다. <ul>. <li> 결론 <custom> 당신은 특정 프론트 엔드 프레임 워크를 사용자 정의하는 것이 처음에 보일 수있는 것만 큼 어려운 작업이 아니라는 것을 알았습니다. Gulp에 대한 지식과 추가 노력으로 특정 프레임 워크로 구축 된 것으로 표시되지 않고 군중에서 눈에 띄는 웹 사이트를 독특하게 만들 수 있습니다. <questions> gulp and Less 와 함께 사용자 정의 Uikit 테마에 대한 질문 자주 질문을 자주 묻습니다. <create> gulp를 사용하여 사용자 정의 Uikit 테마를 만들 수있는 방법은 무엇입니까? <li> </li> Gulp를 사용하여 사용자 정의 Uikit 테마를 만들면 여러 단계가 포함됩니다. 먼저 컴퓨터에 node.js 및 npm을 설치해야합니다. 그런 다음 NPM을 사용하여 Gulp를 설치해야합니다. 그런 다음 Github에서 Uikit 저장소를 복제하고 종속성을 설치할 수 있습니다. 이 작업을 마치면 Theme.less 파일에서 더 적은 변수를 수정하여 사용자 정의 테마를 만들 수 있습니다. 그런 다음 Gulp를 사용하여 테마를 컴파일 할 수 있습니다. Gulp는 프로젝트에 포함시킬 수있는 CSS 파일을 생성합니다.<benefits> uikit 테마를 만드는 데있어 Gulp 사용의 이점은 무엇입니까? <h3> gulp는 Uikit 테마를 만드는 데 몇 가지 이점을 제공합니다. Gulp는 미니 화, 컴파일, 장치 테스트 및 라인과 같은 반복적 인 작업을 자동화 할 수있는 작업 러너입니다. 이것은 당신에게 많은 시간과 노력을 절약 할 수 있습니다. 반면에 CSS 사전 프로세서는 CSS, 믹스 인, 기능 및 CSS를보다 유지 관리 가능하고 확장 가능하게 만들 수있는 기타 기능을 사용할 수있는 CSS 사전 프로세서입니다. Uikit 테마를 만들기 위해 Sass 또는 Stylus와 같은 CSS 프리 프로세서? </h3> 예, Sass 또는 Sass와 같은 다른 CSS 프리 프로세서를 사용할 수 있습니다. 스타일러스는 Uikit 테마를 만듭니다. 그러나 Uikit은 적은 상태로 구축되었으므로 적은 코드를 Sass 또는 Stylus로 변환하기 위해 추가 작업을 수행해야 할 수도 있습니다. <p> 색상, 글꼴 및 글꼴을 사용자 정의하고 어떻게 사용자 정의 할 수 있습니까? Uikit 테마의 다른 요소? </p> 테마의 덜 변수를 수정하여 Uikit 테마의 색상, 글꼴 및 기타 요소를 사용자 정의 할 수 있습니다. 예를 들어 @1 차 컬러 변수를 수정하여 기본 색상을 변경할 수 있습니다. @font-family-base 변수를 수정하여 글꼴 패밀리를 변경할 수도 있습니다. <h3> Uikit 테마에 사용자 정의 구성 요소를 추가하려면 Uikit 테마에 사용자 정의 구성 요소를 추가 할 수 있습니다. 새로운 파일을 새로운 파일을 만들어 테마로 가져 오면 파일이 없습니다. 그런 다음 Uikit Mixins와 변수를 사용하여 구성 요소를 스타일링 할 수 있습니다. </h3> 사용자 정의 Uikit 테마를 어떻게 테스트 할 수 있습니까? <p> 생성 된 CSS 파일을 html 파일과 웹 브라우저에서 열 수 있습니다. 그런 다음 요소를 검사하고 예상대로 스타일이 있는지 확인할 수 있습니다. </p> <h3> 제작을 위해 사용자 정의 Uikit 테마를 최적화 할 수 있습니까? </h3> Gulp를 사용하여 제작을 위해 사용자 정의 Uikit 테마를 최적화 할 수 있습니다. CSS 파일을 조정합니다. 이렇게하면 파일 크기가 줄어들고 웹 사이트의로드 속도가 향상됩니다. <p> 테마 우림과 같은 마켓 플레이스에서 내 사용자 정의 Uikit 테마를 판매 할 수 있습니까? </p> 예, 마켓 플레이스에서 사용자 정의 Uikit 테마를 판매 할 수 있습니다. 테마 우림처럼. 그러나 테마가 마켓 플레이스의 품질 표준을 충족하고 판매하는 데 필요한 권한이 있는지 확인해야합니다. <h3> 새 버전의 Uikit이 출시 될 때 내 사용자 정의 Uikit 테마를 업데이트 할 수 있습니까? ? </h3> 새 버전의 변경 사항을 테마로 병합하여 새 버전의 Uikit이 출시 될 때 사용자 정의 Uikit 테마를 업데이트 할 수 있습니다. 그런 다음 테마를 테스트하여 새 버전에서 올바르게 작동하는지 확인할 수 있습니다. <p> WordPress 테마에서 내 사용자 정의 Uikit 테마를 사용할 수 있습니까? </p> 예, 사용자 정의 Uikit을 사용할 수 있습니다. WordPress 테마의 테마. WordPress 테마에 생성 된 CSS 파일을 포함시키고 템플릿에서 Uikit 클래스를 사용하면됩니다.</benefits></create></questions></custom> </li> </ul></you> </li></the></left></a></you></panel></izer> </ul></how></i></the></ied></index>

위 내용은 Gulp 이하의 맞춤형 Uikit 테마를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!