그누보드와 잘 맞는 CSS
보통 bootstrap이 CSS패키지로 유명한데, 그누보드랑 충돌이 좀 있어서 사용이 꺼려집니다.
Wordpress 분석 도중 그누보드랑 찰떡궁합인 CSS패키지를 찾아서 유용하게 쓰고 있는데, 단점은 제가 만든 웹사이트가 다 똑같은 CSS 모양입니다.
혹시 여러분이 아시는 CSS 패키지 중 그누보드와 궁합이 잘 맞는 패키지가 있을까요?
있다면 소개해 주시는건 어떨까요?
답변 미리 감사드립니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 16개
최신버전은 jquery도 사용하지 않아서 더 좋습니다.
최신버전을 한번 써볼께요. 이전 버전은 글쓰기하면 잘못된 접근이라고 뜨더라구요.
footer에서 수정하면 고쳐지긴 했었는데...
1년전 쯤 만들어준 사이트 대표가 아무 것도 모르면서 누구 말을 들었는지 꼭 부트스트랩으로 해달라고 해서 시늉만 내어 보았는데 충돌하는 부분은 없었어요.
너무 표본이 적어서 강력하게 주장은 못하겠지만요.
특히 이름이 같은 btn 클래스에서요
BTN도 그렇고,, padding 쪽, 특히 모바일 뷰에서는 그냥 다 지우고 새로 CSS 짜는게 빠를 정도더라구요.
좋은 정보 감사합니다. Bootstrap 보다 더 낳은거 같아요. Gnuboard6 에서 저 CSS를 채태하면 호랑이에 날개를 단 격이곘네요. npm install tailwindcss 다만 이렇게 설치해야 되는게 어려운데, 혹시 CSS 파일만 뽑아서 팁게시판에 올려주실 수 있을까요? 너무 큰 부탁이라면 사양하셔도 됩니다. 좋은 하루 되세요.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
이렇게요.
커스트마이징이 필요하거나 container 가로폭 등을 수정할때만 tailwind.config.js 수정해서
npx tailwindcss -i 입력파일 -o 출력파일
이렇게 빌드하면 됩니다.
기본 css에 자신의 css를 추가 하고 싶을때는
source.css 만드셔서
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
// 컴포넌트 추가
@apply
}
@layer utilities {
// 유틸리티 추가
.btn-primary {
@apply bg-blue-500 text-white ....;
}
}
이렇게 만드셔서 위와 똑같이 npx tailwindcss ... 로 빌드하시면 됩니다.
scss 전처리기를 사용하면 동일 css 충돌은 css명 변경등으로 처리가능합니다.
좋은 정보 감사합니다.