roobie下載 - roobie源碼下載

roobie

網站數據

1.0.0

下載

roobie

CSS 類別的集合，可協助您在 HTML 中編寫業務邏輯。使用 100 個預先建置的 CSS 類別輕鬆建立可維護的 Web 和行動應用程式。永遠不要再寫帶有填充、邊距等的樣板 CSS 類別。相反，應該選擇可重複使用的實用 CSS 類別。這會使 HTML 檔案更大，但會減少刪除內容時的程式碼清理和雜散程式碼。從集中主題控制所有 CSS 變量，以確保整個 Web 應用程式的一致性，並輕鬆切換主題。提高可維護性和開發速度。

模組

主題：使用我們預先建立的主題或分叉我們的模板並創建您自己的主題。
佈局：使用 Flexbox CSS 幫助器建立簡單且響應式的佈局。
實用程式：CSS 實用程式可讓您保持原狀，在 HTML 中編寫業務邏輯。
動畫：各種動畫可提供清晰、動態的內容。
元件：使用 CSS 和 JavaScript 建立的易於使用的 Web 元件。
操縱（即將推出）
圖標（即將推出）

範例

具有居中行 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% 寬度的容器，具有垂直居中和水平端列 Flexbox 佈局。每個子元素都有不同的字體粗細。

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...*/
}