CSS 탐색: 마이크로 프레임(Plume)
이것은 이 시리즈의 첫 번째 문장으로, 나는 Plume라는 마이크로 프레임을 소개할 것이다.우류는:
A lightweight and highly themeable CSS Micro-Framework. Plume is meant to be the lowest CSS layer on your app. [Plume is great for] working on a small to medium application, if you feel that you don't need all the larger frameworks' features, or if you just want to code and grow all the style by yourself. Plume offers a solid, highly customizable and extendable start point.
저한테는 좋은 출발점이에요!
뭘 좋아해요?
설정
우선, Plume는 매우 간단하고 가동과 운행이 매우 빠르다.이 라이브러리를 다운로드(또는 설치)하고 HTML에 링크를 추가하고
class=”plume”body 탭에 추가하면 시작할 수 있습니다.원하는 경우 HTML에 역할 영역이 있으므로 행class="plume"이 필요한 일부 깃털 컨테이너를 사용할 수도 있습니다.이 경우 바디 표시가 아닌 포장기 요소에 포함시키기만 하면 된다.맞춤형 구성
다음은 맞춤형 제작입니다.내가 Bootstrap 같은 것에 대해 가장 큰 문제는 과자 절단기와 유사한 사이트를 만들었는데 거기에는 진정으로 두드러진 것이 없다는 것이다.우류그러나, 이 모든 것은 사용자 정의 테마를 만드는 데 관한 것이고, 매우 쉽다. (심지어는 CSS를 알 필요도 없다.)네가 필요로 하는 모든 것은 Plume webpage 에 있다. 맞아. 한 페이지.지원하는 속성 목록을 훑어보고 취향에 따라 속성을 사용자 정의할 수 있습니다.모든 옵션을 사용할 때, 페이지에서 그 모습을 볼 수 있습니다.테마를 함께 놓으면 단추를 누르면 내용을 CSS 파일의 맨 위에 복사하거나 붙여넣을 수 있습니다. 이것은 일련의 CSS 변수이기 때문입니다.나중에 바꾸고 싶으세요?CSS로 넘어가서 변수의 값을 변경한 다음에 전체 사이트의 변화를 관찰하여 이를 반영하기만 하면 됩니다!
이런 가변 방법의 또 다른 장점은 무엇입니까?사용자 정의 테마를 설정하는 것은 빠르고 간단하기 때문에 당신은 당신의 사이트에 다양한 테마를 설치할 수 있습니다!다른 종류의 용기에 다른 색깔과 글꼴을 원하거나 사용자가 다른 테마 옵션을 선택할 수 있기를 원할 수도 있습니다.이것은 쉽게 할 수 있습니다. 간단한 자바스크립트로 CSS
:root의 관련 변수를 변경하면 됩니다.사실 Plume는 사이트에 자신의 테마 선택기를 가지고 이 개념을 보여준다.나는 개성화된 맞춤형 요소를 첨가하는 것이 매우 멋있고 깃털 모양의 물건을 사용해도 먼지를 털지 않는다고 생각한다.구성 요소
그리고 너는 너의 사이트를 세울 수 있다.Plume는 기본적인 사이트 구조를 신속하게 구축하고 이를 자제하고 일치하는 주제와 연결시키는 데 적합하다는 사실이 증명되었다.다양한 종류의 폼 입력과 단추 같은 기본적인 스타일 구성 요소를 추가합니다. 사용자 정의 테마와 자동으로 동기화됩니다. 이 CSS 변수에 연결된 모든 것에 감사를 드립니다.또한 기본 컨테이너 스타일(크기, 정렬, 간격 등)을 설정하므로 컨텐트 중심의 작업을 수행할 필요가 없습니다.
모든 구성 요소는 HTML 요소에 클래스를 추가하여 추가됩니다.너는 다른 일을 할 필요가 없다.단락 텍스트를 제외한 모든 것이 중간에 있는 요소를 원한다고 가정해 보세요.HTML만 쓰면 됩니다:
<div class="pm-container pm-ground pm-text-center">
<h2>Example</h2>
<p class="pm-text-left">Some Text</p>
<p class="pm-text-left">Some Text</p>
<button class="pm-btn-success">Push Me!</button>
</div>
반응은 민첩했다
마지막으로 우류 부품의 호응은 상자를 열면 바로 사용할 수 있다는 것이 큰 승리였다.그것은 당신의 사이트 구조 (격자, flexbox, 레이아웃 템플릿 등) 에 큰 도움이 되지 않지만, 적어도 내가 보기에 이런 마이크로 프레임워크는 이런 것들을 하는 데 쓰이는 것이 아니다.너는 스스로 사이트의 구조를 설정할 수 있다. 그리고 너는 앉아서 그것을 괜찮아 보일 수 있다.
뭘 좋아해요?
제한성
선택이 매우 제한적이다.그러나 어셈블리 패밀리는 약 12개만 포함됩니다.Plume만 사용하면 저는 한 시간 안에 제 사이트의 기본적인 레이아웃이 상당히 좋아 보일 수 있지만 여전히 많은 단독 요소가 맞춤형으로 만들어져 있기 때문에 이 점에 추가하고 싶습니다.물론 고의였다.기억해라. 크리에이터는 "Plume는 튼튼하고 고도로 맞춤형 제작과 확장 가능한 출발점을 제공했다."라고 말했다.그래서 당신의 사이트를 충실하게 한 후에도 맞춤형 CSS 작업을 해야 한다는 것을 알기만 하면 됩니다.
판결하다
처음 평가한 거라 지금 말하기 어려워요.하지만 깃털 자체의 장점만으로 다른 어떤 것과도 비교하지 않고 나는 그것을 좋아한다!내가 공백 페이지를 뚫어지게 쳐다볼 때, 나는 절대로 이것을 출발점으로 삼을 것이다.이 틀은 나의 접시에서 대량의 무미건조한 물건을 가져갔고, 나의 사이트에 매우 일치하는 템플릿을 제공했다.
다음은 저의 간단한 테스트 레이아웃입니다. 깃털만 사용합니다.
물론 다음은 코드입니다.
// HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="plume-css/lib/plume-all.css"> <!-- Add Plume as a Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body class="plume"> <!-- Apply Plume to full site -->
<div class="pm-container pm-surface">
<article class="pm-text-center pm-container pm-ground">
<figure class="pm-text-center">
<h3 class="pm-font-secondary">Project 1</h3>
<img src="http://placekitten.com/g/600/300" alt="Visual Store"/>
<figcaption>
<p class="pm-font-primary">This is the first project in the list.</p>
</figcaption>
</figure>
<p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
<p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
<p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built. Make sure to include Plume!</p>
<button class="pm-btn-gradient">Cool Button</button>
<button class="pm-btn-success">Good News!</button>
<button class="pm-btn-error">Bad News!</button>
</article>
<article class="pm-text-center pm-container pm-ground">
<figure class="pm-text-center">
<h3 class="pm-font-secondary">Project 2</h3>
<img src="http://mrmrs.github.io/photos/whale.jpg" alt="Visual Store"/>
<figcaption>
<p class="pm-font-primary">This is Number 2.</p>
</figcaption>
</figure>
<p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
<p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
<p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built. Make sure to include Plume!</p>
<button class="pm-btn-gradient">Cool Button</button>
<button class="pm-btn-success">Good News!</button>
<button class="pm-btn-error">Bad News!</button>
</article>
<article class="pm-text-center pm-container pm-ground">
<figure class="pm-text-center">
<h3 class="pm-font-secondary">Project 3</h3>
<img src="http://mrmrs.github.io/photos/cpu.jpg" alt="Visual Store"/>
<figcaption>
<p class="pm-font-primary">Third entry is the charm.</p>
</figcaption>
</figure>
<p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
<p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
<p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built. Make sure to include Plume!</p>
<button class="pm-btn-gradient">Cool Button</button>
<button class="pm-btn-success">Good News!</button>
<button class="pm-btn-error">Bad News!</button>
</article>
</div>
</body>
</html>
// CSS
:root { /* downloaded from Plume Site */
--pm-primary-color: #309AFD;
--pm-secondary-color: #00004b;
--pm-app-surface-color: #F1F2F3;
--pm-app-ground-color: #fff;
--pm-mark-border-radius: 0px;
--pm-button-border-radius: 0px;
--pm-input-border-radius: 0px;
--pm-input-border-width: 1px;
--pm-pre-code-border-radius: 0px;
--pm-app-text-color: #848586;
--pm-app-base-font-size: 19px;
--pm-app-line-height: 1.2rem;
--pm-app-container-padding: 1rem 2rem;
--pm-app-container-max-width: 900px;
}
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
Reference
이 문제에 관하여(CSS 탐색: 마이크로 프레임(Plume)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhintz89/exploring-css-micro-frameworks-plume-3di8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
