Open Props

 

원티드에서 진행하는 10월 프리온보딩 프론트엔드 사전과제를 하기위해

CSS 프레임워크나 라이브러리를 어떤걸 쓸까 고민하고 있었어요.

 

원티드 10월 프리온보딩 프로젝트 같이해봐요!

https://www.wanted.co.kr/events/pre_challenge_fe_14

로그인 기능 구현, 하나부터 열까지! | 프리온보딩 FE 챌린지 10월 | 원티드

프론트엔드뿐만 아니라 다양한 분야의 챌린지가 있으니 방문해서 확인해보세요!

https://www.wanted.co.kr/events

다양한 커리어 성장의 기회 | 원티드 이벤트

 

사용 경험이 있던 tailwind, bootstrap은 제외하고 찾았어요.

그러다가 발견한 게 Open Props 입니다.

검색해 보니 css 프레임워크 사용이 1위를 차지하고 있더군요.

 

CSS에 관심이 있으신 분들은 사용해 보시면 어떨까요?

공식 사이트 입장하시면 Open Props에서 제공하는

여러가지 디자인 토큰을 확인해 보세요!

색상, 그라디언트, 애니메이션 등 정말 다양하고 현대적인 느낌의 스타일을 사용할 수 있어요!

 

Open Props

CSS 라이브러리

디자인 토큰을 사용하여 웹을 쉽고 빠르게 구축할 수 있도록 한다.

CSS 변수를 통해 사용하기 좋은 기능들이 있다.

Open props 특징

CSS를 깔끔하고 단순하게 유지할 수 있다.

개발자가 사용자 정의 클래스 이름을 만들 수 있다.

미리 정의된 이름에 의존하지 않아도 된다.

디자인 토큰을 사용하여 웹을 쉽고 빠르게 구축할 수 있다.

CSS 변수를 통해 사용하기 좋은 기능들이 있다.

디자인 토큰

디자인 토큰은 다양한 spcing, border, color 등 기본 단위의 디자인 속성을 재사용할 수 있도록 변수로 정리하여 사용하는 것입니다.

유지보수가 쉽고 큰 범위로 확장할 수 있기 때문에 작업의 효율성이 높아진다.

 

---

참고

State of CSS 2023: CSS 프레임워크

State of CSS 2023: CSS 프레임워크

Open Props - 지저분한 HTML을 만드는 Tailwindcss의 대안

Open Props - 지저분한 HTML을 만드는 Tailwindcss의 대안

테마를 쉽게 변경하는 디자인 토큰 기반의 디자인 시스템

테마를 쉽게 변경하는 디자인 토큰 기반의 디자인 시스템

Designing a modern UI theme with Open Props - LogRocket Blog

Designing a modern UI theme with Open Props - LogRocket Blog