roobie 다운로드 - roobie 소스코드 다운로드

roobie

웹사이트 데이터

1.0.0

다운로드

roobie

HTML에 비즈니스 로직을 계속 작성하기 위한 CSS 클래스 컬렉션입니다. 사전 구축된 수백 개의 CSS 클래스를 사용하여 유지 관리 가능한 웹 및 모바일 애플리케이션을 손쉽게 구축할 수 있습니다. 다시는 패딩, 여백 등을 사용하여 상용구 CSS 클래스를 작성하지 마세요. 대신 재사용 가능한 유틸리티 CSS 클래스를 선호하세요. 이렇게 하면 HTML 파일이 더 커지지만 콘텐츠를 제거할 때 코드 정리 및 스트레이 코드가 줄어듭니다. 웹 앱 전체의 일관성을 위해 중앙 집중식 테마에서 모든 CSS 변수를 제어하고 테마를 쉽게 전환하세요. 유지 관리성과 개발 속도를 높입니다.

모듈

테마: 사전 구축된 테마를 사용하거나 템플릿을 포크하여 나만의 테마를 만드세요.
레이아웃: Flexbox CSS 도우미를 사용하여 간단하고 반응성이 뛰어난 레이아웃을 만듭니다.
유틸리티: HTML에 비즈니스 로직을 작성하여 자신이 속한 위치를 유지하는 CSS 유틸리티입니다.
애니메이션: 깔끔하고 역동적인 콘텐츠를 전달하는 다양한 애니메이션입니다.
구성 요소: CSS 및 JavaScript로 구축된 사용하기 쉬운 웹 구성 요소입니다.
조작(제공 예정)
아이콘(곧 제공 예정)

예

중앙에 행이 있는 Flexbox 레이아웃이 있는 100% 너비 컨테이너입니다. 하위 요소는 각각 다른 글꼴 크기를 갖습니다.

roobie roobie roobie </div>">

 < div class =" div row center " >
    < span class =" fnts1 " > roobie </ span >
    < span class =" fnts2 " > roobie </ span >
    < span class =" fnts3 " > roobie </ span >
</ div >

행 Flexbox 레이아웃이 있는 100% 너비 컨테이너입니다. 하위 요소에는 수평으로 2 강도 마진이 있습니다. 하위 요소에는 각각 2개의 강도 패딩이 있습니다.

roobie roobie roobie </div>">

 < div class =" div row row-spacer2 " >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
    < span class =" pad2 " > roobie </ span >
</ div >

33% 너비 컨테이너. 하위 요소는 각각 서로 다른 수직 여백(상단 및 하단)을 갖습니다. 마지막 자식에는 파란색 2 강도와 왼쪽 테두리 2 강도가 있습니다.

roobie roobie roobie </div>">

 < div class =" div33 " >
    < span class =" mrgv1 " > roobie </ span >
    < span class =" mrgv2 " > roobie </ span >
    < span class =" mrgv3 bdrl2 bdr-blue2 " > roobie </ span >
</ div >

세로 중앙에 가로 끝 열 가변상자 레이아웃이 있는 50% 너비 컨테이너입니다. 하위 요소는 각각 다른 글꼴 두께를 갖습니다.

roobie roobie roobie </div>">

 < div class =" div50 col aln-center jst-end " >
    < span class =" fntw1 " > roobie </ span >
    < span class =" fntw2 " > roobie </ span >
    < span class =" fntw3 " > roobie </ span >
</ div >

테마 변수 스니펫.

[ theme = "light" ] {
    /*Base*/
    --primary : rgb ( 21 , 206 , 166 );
    --secondary : var ( --bg4 );
    /*Status*/
    --success : rgba ( 81 , 190 , 73 , 0.7 );
    --warning : rgba ( 235 , 119 , 42 , .7 );
    --danger : rgba ( 248 , 62 , 52 , .7 );
    --info : rgba ( 152 , 217 , 243 , .7 );
    /*Shade 1*/
    --white : rgb ( 240 , 240 , 240 );
    --black : rgb ( 20 , 20 , 20 );
    --grey : rgb ( 199 , 199 , 199 );
    --red : rgb ( 167 , 32 , 32 );
    --orange : rgb ( 243 , 162 , 11 );
    --yellow : rgb ( 221 , 221 , 25 );
    --green : rgb ( 19 , 172 , 82 );
    --blue : rgb ( 23 , 23 , 192 );
    --indigo : rgb ( 117 , 13 , 117 );
    --violet : rgb ( 184 , 88 , 184 );
    /*Shade 2*/
    --white2 : rgba ( 240 , 240 , 240 , .7 );
    --black2 : rgba ( 20 , 20 , 20 , .7 );
    --grey2 : rgba ( 199 , 199 , 199 , .7 );
    /*More shades omitted...*/
    /*Text*/
    --t1 : rgb ( 20 , 20 , 20 );
    --t2 : rgb ( 35 , 35 , 35 );
    --t3 : rgb ( 50 , 50 , 50 );
    --t4 : rgb ( 65 , 65 , 65 );
    --t5 : rgb ( 80 , 80 , 80 );
    --t6 : rgb ( 95 , 95 , 95 );
    /*Background*/
    --bg1 : rgb ( 240 , 240 , 240 );
    --bg2 : rgb ( 230 , 230 , 230 );
    --bg3 : rgb ( 220 , 220 , 220 );
    --bg4 : rgb ( 210 , 210 , 210 );
    --bg5 : rgb ( 200 , 200 , 200 );
    --bg6 : rgb ( 190 , 190 , 190 );
    /*And many more...*/
}