simpledev.css는 제가 대부분 클래스가 없는 프레임워크라고 설명하는 새로운 CSS 프레임워크입니다. 대부분의 코드에서 유형 선택기를 사용하므로 이를 클래스가 없다고 부릅니다. 따라서 웹 페이지 스타일을 지정하기 위해 많은 클래스를 추가할 필요가 없습니다. 몇 가지 수업이 있지만 최소한으로 유지하려고 노력하고 있습니다. (현재까지 수업 수는 약 42개 정도입니다.)

아래의 몇 가지 기능을 살펴보겠습니다!

특징

1. 대부분 클래스가 없는 디자인: 대부분 클래스가 없으므로 프레임워크를 추가하자마자 일반 HTML 페이지가 변환되는 것을 볼 수 있습니다.
2. 공통 요소에 대한 최소 클래스: 탐색 모음, 링크를 버튼처럼 보이게 만들기, 기본 바닥글 등 정말 일반적인 항목에 대한 클래스를 제공합니다.
3. 접근성 중심: 저는 접근성 전문가는 아니지만 접근성 모범 사례를 프레임워크에 통합하기 위해 최선을 다했습니다. 따라서 프레임워크에는 시각적으로 숨겨진 클래스인 건너뛰기 링크 구성 요소가 있으며 글꼴 크기에 rems를 사용합니다.
4. 테마 지원: simpledev.css는 다양한 테마를 지원합니다. 밝은 모드만 사용하거나 어두운 모드만 사용하거나 둘 다를 사용할 수 있습니다.
5. 최소 JavaScript: JS에서는 매우 가볍습니다. 우리는 navbar 구성 요소에만 JS를 사용합니다. navbar를 사용하지 않는 경우(또는 대신 간단한 navbar 구성 요소를 사용하는 경우) JS를 완전히 건너뛸 수 있습니다!
6. 쉬운 시작: 복사하거나 다운로드할 수 있는 기본 및 고급 템플릿, 다운로드하거나 새 저장소를 시작하는 데 사용할 수 있는 GitHub 저장소, CodePen의 펜이 포함된 시작하기 페이지가 있습니다. 브라우저에서 직접 시도해 보세요.
7. 레시피: 또한 CSS 규칙을 복사하여 custom.css 파일에 붙여넣어 끈끈한 탐색 모음, 둥근 모서리, 줄무늬 표, 부드러운 스크롤 등을 얻을 수 있는 레시피 페이지도 있습니다!
8. 사용자 정의 색상 팔레트: 자신만의 색상 팔레트를 가져올 수 있습니다. simpledev.css에는 기본적으로 색상이 없으므로 원하는 색상을 선택하여 프레임워크에 추가할 수 있습니다.
9. 모듈식 구성 요소: 원하는 경우 일부 구성 요소를 기술적으로 다운로드하여 개별적으로 사용할 수 있습니다. GitHub 저장소를 방문하여 원하는 CSS 파일을 다운로드하세요. 우리는 Modern Normalize를 기반으로 구성 요소를 개발했으므로 동일한 모양을 얻으려면 Modern Normalize를 통합해야 할 수도 있습니다.

배경

작년에 저는 GitHub에서 awesome-css-frameworks 저장소를 발견했습니다. 여기에는 다양한 카테고리로 그룹화된 CSS 프레임워크의 긴 목록이 포함되어 있습니다. 저는 특히 Classless CSS 프레임워크 섹션에 관심이 있었습니다. CSS 파일에 연결하고 HTML을 수정하지 않고도 HTML 페이지의 모양을 즉시 변경할 수 있다는 아이디어가 마음에 들었습니다.

처음에는 목록에 있는 Water.css라는 프레임워크에서 영감을 받았지만, 나중에는 또 다른 클래스리스 프레임워크인 Pico.css에서 더 많은 영감을 얻었습니다.

결국 나는 나만의 프레임워크를 만들기로 결정했습니다. 하지만 저는 조금 달랐으면 했습니다.

• 저는 Sass 대신 바닐라 CSS를 사용하기로 결정했습니다. 다른 사람들도 쉽게 프레임워크를 사용해 보고, 소스 코드에서도 배울 수 있기를 바랐기 때문입니다.
• 순전히 클래스가 없는 것을 원하지 않았습니다. CSS 클래스가 필요한 것들이 있다고 생각하기 때문입니다.
• Pico는 아마도 가장 보기 좋은 클래스 없는 CSS 프레임워크일 것입니다. 하지만 일부 요소/구성 요소가 약간 크다고 느껴서 요소/구성 요소가 더 작아지길 원했습니다.

결론

이 글을 읽어주셔서 감사합니다! 몇 가지 부탁이 있습니다:

1. GitHub에서 저장소에 별표를 표시해 주세요!
2. 프레임워크를 사용하여 소규모 프로젝트를 구축해 보세요.
3. 문제가 발견되면 GitHub에서 문제를 생성하세요.
4. 기능 요청이 있는 경우 GitHub에서 토론을 시작하세요.
5. 컴포넌트에 대한 아이디어가 있다면 CodePen에서 만들어 보세요!

질문이나 제안사항이 있으면 아래에 댓글을 남겨주세요! 또한 나중에 simpledev.css에 대한 튜토리얼을 계속 진행할 예정입니다.