improved significantly site gen
This commit is contained in:
Yann Esposito (Yogsototh)
parent
44c4d11c58
commit
ee0d1756d4
GPG key ID:
7B19A4C650D59646
424
bb/brut/site.clj
424
bb/brut/site.clj
|
|
@ -141,21 +141,8 @@
|
|||
" posuere hac."
|
||||
" Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor,"
|
||||
" etiam ultricies proin quisque lectus sociis id tristique, integer phasellus"
|
||||
" taciti pretium adipiscing tortor sagittis ligula."]
|
||||
[:p
|
||||
"Mollis pretium lorem primis senectus habitasse lectus scelerisque donec,"
|
||||
" ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque,"
|
||||
" consectetur mi risus molestie curae malesuada cum."
|
||||
" Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes,"
|
||||
" mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus"
|
||||
" nibh est, metus lobortis morbi cras magna vivamus per risus fermentum."
|
||||
" Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum"
|
||||
" sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean"
|
||||
" vel nostra tellus commodo pretium sapien sociosqu."]]
|
||||
[:p "The " [:code "doc"] " class ensure the width of the text is not too wide and use a very legible font."]
|
||||
[:blockquote
|
||||
"Some blockquote"]
|
||||
]
|
||||
" taciti pretium adipiscing tortor sagittis ligula."]]
|
||||
[:p "The " [:code "doc"] " class ensure the width of the text is not too wide and use a very legible font."]]
|
||||
itemize [:div {:id "itemize"}
|
||||
[:h2 "itemization"]
|
||||
[:h3 "ul"]
|
||||
|
|
@ -173,9 +160,26 @@
|
|||
[:li "item 2"]
|
||||
[:li "item 3"]
|
||||
[:li "item 4"]]]
|
||||
headings [:div
|
||||
[:h3 "headings"]
|
||||
[:p "By default there is some space before and after any heading:"]
|
||||
[:h1 "h1"]
|
||||
[:h2 "h2"]
|
||||
[:h3 "h3"]
|
||||
[:h4 "h4"]
|
||||
[:h5 "h5"]
|
||||
[:h6 "h6"]
|
||||
[:h3 "tight headings"]
|
||||
[:p "You can remove the space by using the class "
|
||||
[:code "tight"]" to the heading:"]
|
||||
[:h1 {:class "tight"} "h1 tight"]
|
||||
[:h2 {:class "tight"} "h2 tight"]
|
||||
[:h3 {:class "tight"} "h3 tight"]
|
||||
[:h4 {:class "tight"} "h4 tight"]
|
||||
[:h5 {:class "tight"} "h5 tight"]
|
||||
[:h6 {:class "tight"} "h6 tight"]]
|
||||
textual-section {:title "Textual content"
|
||||
:cards [txt doc itemize]
|
||||
}
|
||||
:cards [txt doc headings itemize]}
|
||||
|
||||
images [:div {:id "images"}
|
||||
[:h1 "Images"]
|
||||
|
|
@ -267,223 +271,201 @@
|
|||
[:a {:class "btn std huge ok"} "btn std ok"]]]]]
|
||||
buttons-section {:title "Buttons"
|
||||
:cards [buttons]}
|
||||
docs [:div
|
||||
[:h1 "Messages"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Basic Messages"]
|
||||
[:br]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Normal Message"]
|
||||
" This is a normal message with " [:code "msg"] "."]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Info"]
|
||||
" This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" OK"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Strong Alerts"]
|
||||
[:br]
|
||||
[:div {:class "msg alert"}
|
||||
[:strong "Alert Message"]"This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Alert Info"]"This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg alert ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" Alert OK"]"This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Alert Warning"]"This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]"This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Fatal"]"This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
[:pre "<div class="msg">\n <strong>Alert headline!</strong>\n Message text\n</div>"]
|
||||
[:div
|
||||
[:h1 "Forms"]
|
||||
messages [:div {:class "row"}
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Basic Messages"]
|
||||
[:br]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Normal Message"]
|
||||
" This is a normal message with " [:code "msg"] "."]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Info"]
|
||||
" This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" OK"]
|
||||
" This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Warning"]
|
||||
" This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Error"]
|
||||
" This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Fatal"]
|
||||
" This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Strong Alerts"]
|
||||
[:br]
|
||||
[:div {:class "msg alert"}
|
||||
[:strong "Alert Message"]"This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Alert Info"]"This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg alert ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" Alert OK"]"This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Alert Warning"]"This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]"This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Fatal"]"This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
messages-section {:title "Messages"
|
||||
:cards [messages]}
|
||||
forms [:div
|
||||
[:input {:class "neutral", :type "text", :placeholder "input"}]
|
||||
[:br]
|
||||
[:textarea {:class "neutral", :rows "3", :placeholder "textarea"}]
|
||||
[:br]
|
||||
[:span {:class "addon bg-info"} "$"]
|
||||
[:input {:type "text"}]
|
||||
[:br]
|
||||
[:pre "<input type="text">\n"
|
||||
[:br]"<textarea rows="3">\n"
|
||||
[:br]"<span class="addon">$</span><input type="text">"]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Be careful with addons!"]" If you do not want a space between the addon and the input make sure that there is no space between the "
|
||||
[:code "</span>"]" and "
|
||||
[:code "<input>"]" tags. Example: "
|
||||
[:pre "... </span> <input ..."]
|
||||
[:span {:class "addon"} "$"]
|
||||
[:strong "Be careful with addons!"]
|
||||
" If you do not want a space between the addon and the input make sure "
|
||||
"that there is no space between the "
|
||||
[:code "<span>"] " and "
|
||||
[:code "<input>"]" tags. Example: "
|
||||
[:pre "... </span>" [:span.hl " "] "<input ..."]
|
||||
[:span {:class "addon"} "$"] " "
|
||||
[:input {:type "text", :class "smooth"}]
|
||||
[:pre "... </span><input ..."]
|
||||
[:pre "... </span><input ..."]
|
||||
[:span {:class "addon"} "$"]
|
||||
[:input {:type "text", :class "smooth"}]]]
|
||||
[:div {:class "navbar"}
|
||||
[:h1 "Navbars"]
|
||||
[:nav {:class "nav", :tabindex "-1", :onclick "this.focus()"}
|
||||
[:div {:class "container"}
|
||||
[:a {:class "pagename current", :href "#"} "BRUT"]
|
||||
[:a {:href "#"} "One"]
|
||||
[:a {:href "#"} "Two"]
|
||||
[:a {:href "#"} "Three"]
|
||||
[:a {:href "#"} "Four"]]]
|
||||
[:button {:class "btn-close btn sm"} "×"]
|
||||
[:br]
|
||||
[:pre "<nav class="nav" tabindex="-1" onclick="this.focus()">\n <div class="container">\n <a class="pagename current" href="#">BRUT</a>\n <a href="#">One</a>\n <a href="#">Two</a>\n <a href="#">Three</a>\n </div>\n</nav>\n<button class="btn-close btn sm">×</button>"]]
|
||||
[:div
|
||||
[:h1 "Tables"]
|
||||
[:table {:class "table"}
|
||||
[:thead
|
||||
[:tr
|
||||
[:th "#"]
|
||||
[:th "Widgets Sold"]
|
||||
[:th "Revenue (£)"]
|
||||
[:th "Profit (£)"]]]
|
||||
[:tbody
|
||||
[:tr
|
||||
[:td "1"]
|
||||
[:td "5"]
|
||||
[:td "10"]
|
||||
[:td "2"]]
|
||||
[:tr
|
||||
[:td "2"]
|
||||
[:td "10"]
|
||||
[:td "20"]
|
||||
[:td "4"]]
|
||||
[:tr
|
||||
[:td "3"]
|
||||
[:td "500"]
|
||||
[:td "1000"]
|
||||
[:td "200"]]]]
|
||||
[:br]
|
||||
[:br]
|
||||
[:pre "<table class="table">\n <thead>\n <tr>\n <th>#</th>\n <th>Widgets Sold</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>1</td>\n <td>5</td>\n </tr>\n <tr>\n <td>2</td>\n <td>10</td>\n </tr>\n <tr>\n <td>3</td>\n <td>500</td>\n </tr>\n </tbody>\n</table>\n"]]
|
||||
[:h1 "Icons"]
|
||||
[:div {:class "icons"}
|
||||
[:div {:class "row"}
|
||||
[:div {:class "c6"}
|
||||
[:div {:class "col card"}
|
||||
[:div {:class "block"}
|
||||
[:b "Android Safe"]]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:div {:class "msg push"} "The "Android Safe" icons work everywhere, tested on hundreds of devices.\n"]]]
|
||||
[:div {:class "c6"}
|
||||
[:div {:class "col card"}
|
||||
[:div {:class "block"}
|
||||
[:b "Total Set"]]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"} "Although over 75% of Android devices we tested\nsupport all "Total Set" icons, if a substantial\nportion of your users use old Android devices\nyou should stick to the "Android Safe" set.\n(The "Total Set" does not include icons from the "Android Safe" set.)\n"]]]]
|
||||
[:pre "<i class="ico">Copy and paste icons from above here!</i>"]
|
||||
[:h1 "Grids"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c12"} "c12"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c11"} "c11"]
|
||||
[:div {:class "light c1"} "c1"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c10"} "c10"]
|
||||
[:div {:class "light c2"} "c2"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c9"} "c9"]
|
||||
[:div {:class "light c3"} "c3"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c8"} "c8"]
|
||||
[:div {:class "light c4"} "c4"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c7"} "c7"]
|
||||
[:div {:class "light c5"} "c5"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c6"} "c6"]
|
||||
[:div {:class "light c6"} "c6"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c5"} "c5"]
|
||||
[:div {:class "light c7"} "c7"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c4"} "c4"]
|
||||
[:div {:class "light c8"} "c8"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c3"} "c3"]
|
||||
[:div {:class "light c9"} "c9"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c2"} "c2"]
|
||||
[:div {:class "light c10"} "c10"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c1"} "c1"]
|
||||
[:div {:class "light c11"} "c11"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "light c12"} "c12"]]
|
||||
[:br]
|
||||
[:pre "<div class="row">"
|
||||
[:br]" <div class="c12">12</div>"
|
||||
[:br]"</div>\n"
|
||||
[:br]"<div class="row">"
|
||||
[:br]" <div class="c4">4</div>"
|
||||
[:br]" <div class="c8">8</div>"
|
||||
[:br]"</div>\n"]]
|
||||
[:h1 "Headings"]
|
||||
[:div {:class "headings"}
|
||||
[:p "By default there is some space before and after any heading:"]
|
||||
[:h1 "h1"]
|
||||
[:h2 "h2"]
|
||||
[:h3 "h3"]
|
||||
[:h4 "h4"]
|
||||
[:h5 "h5"]
|
||||
[:h6 "h6"]
|
||||
[:br]
|
||||
[:p "You can remove the space by using the class "
|
||||
[:code "tight"]" to the heading:"]
|
||||
[:h1 {:class "tight"} "h1 tight"]
|
||||
[:h2 {:class "tight"} "h2 tight"]
|
||||
[:h3 {:class "tight"} "h3 tight"]
|
||||
[:h4 {:class "tight"} "h4 tight"]
|
||||
[:h5 {:class "tight"} "h5 tight"]
|
||||
[:h6 {:class "tight"} "h6 tight"]
|
||||
[:br]
|
||||
[:pre "<h1>Level One Heading</h1>"]]]]
|
||||
forms-section {:title "Forms"
|
||||
:cards [forms]}
|
||||
navbar [:div {:class "navbar"}
|
||||
[:nav {:class "nav", :tabindex "-1", :onclick "this.focus()"}
|
||||
[:div {:class "container"}
|
||||
[:a {:class "pagename current", :href "#"} "BRUT"]
|
||||
[:a {:href "#"} "One"]
|
||||
[:a {:href "#"} "Two"]
|
||||
[:a {:href "#"} "Three"]
|
||||
[:a {:href "#"} "Four"]]]
|
||||
[:button {:class "btn-close btn sm"} "×"]]
|
||||
navbar-section {:title "Navbar"
|
||||
:cards [navbar]
|
||||
}
|
||||
table [:table {:class "table"}
|
||||
[:thead
|
||||
[:tr
|
||||
[:th "#"]
|
||||
[:th "Widgets Sold"]
|
||||
[:th "Revenue (£)"]
|
||||
[:th "Profit (£)"]]]
|
||||
[:tbody
|
||||
[:tr
|
||||
[:td "1"]
|
||||
[:td "5"]
|
||||
[:td "10"]
|
||||
[:td "2"]]
|
||||
[:tr
|
||||
[:td "2"]
|
||||
[:td "10"]
|
||||
[:td "20"]
|
||||
[:td "4"]]
|
||||
[:tr
|
||||
[:td "3"]
|
||||
[:td "500"]
|
||||
[:td "1000"]
|
||||
[:td "200"]]]]
|
||||
tables-section {:title "Tables"
|
||||
:cards [table]}
|
||||
basic-icons [:div.col.start
|
||||
[:h4 "Android Safe"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:div {:class "msg push"} "The "Android Safe" icons work everywhere, tested on hundreds of devices.\n"]]
|
||||
full-icons [:div.col.start
|
||||
[:h4 "Total Set"]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"}
|
||||
"✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"}
|
||||
"Although over 75% of Android devices we tested\nsupport all "Total Set" icons, if a substantial\nportion of your users use old Android devices\nyou should stick to the "Android Safe" set.\n(The "Total Set" does not include icons from the "Android Safe" set.)\n"]]
|
||||
icons-section {:title "icons"
|
||||
:cards [basic-icons full-icons]}
|
||||
grid [:div
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c12"} "c12"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c11"} "c11"]
|
||||
[:div {:class "light c1"} "c1"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c10"} "c10"]
|
||||
[:div {:class "light c2"} "c2"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c9"} "c9"]
|
||||
[:div {:class "light c3"} "c3"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c8"} "c8"]
|
||||
[:div {:class "light c4"} "c4"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c7"} "c7"]
|
||||
[:div {:class "light c5"} "c5"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c6"} "c6"]
|
||||
[:div {:class "light c6"} "c6"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c5"} "c5"]
|
||||
[:div {:class "light c7"} "c7"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c4"} "c4"]
|
||||
[:div {:class "light c8"} "c8"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c3"} "c3"]
|
||||
[:div {:class "light c9"} "c9"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c2"} "c2"]
|
||||
[:div {:class "light c10"} "c10"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c1"} "c1"]
|
||||
[:div {:class "light c11"} "c11"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "light c12"} "c12"]]]
|
||||
grid-section {:title "Grid"
|
||||
:cards [grid]}]
|
||||
[:div.container
|
||||
(for [{:keys [title cards]} [textual-section images-section buttons-section]]
|
||||
[:div
|
||||
(for [{:keys [title cards]} [textual-section
|
||||
grid-section
|
||||
images-section
|
||||
icons-section
|
||||
forms-section
|
||||
tables-section
|
||||
buttons-section
|
||||
messages-section
|
||||
navbar-section]]
|
||||
[:div.col
|
||||
[:h2 title]
|
||||
[:div.col
|
||||
(for [c cards]
|
||||
[:div.card
|
||||
c
|
||||
(for [[c1 c2] (partition 2 2 nil cards)]
|
||||
[:div.row
|
||||
[:div.card.c6
|
||||
c1
|
||||
[:details
|
||||
[:summary "code"]
|
||||
(to-pre c)]]
|
||||
)]])]))
|
||||
(to-pre c1)]]
|
||||
(when c2
|
||||
[:div.card.c6
|
||||
c2
|
||||
[:details
|
||||
[:summary "code"]
|
||||
(to-pre c2)]])])])]))
|
||||
|
||||
(defn -main [& _args]
|
||||
(gen-page "index.html"
|
||||
|
|
@ -494,7 +476,7 @@
|
|||
:footer? false
|
||||
:gapless? true}
|
||||
mk-download)
|
||||
(gen-page "h/g-docs.html"
|
||||
(gen-page "h/docs.html"
|
||||
{:title "BRUT - documentation"}
|
||||
mk-docs)
|
||||
)
|
||||
|
|
|
|||
797
h/docs.html
797
h/docs.html
|
|
@ -1,384 +1,415 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
<title>BRUT - docs</title>
|
||||
<link href="../brut.min.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
.light { background: var(--bg2); }
|
||||
.dark { background: var(--nl); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename" href="../index.html">BRUT</a>
|
||||
<a class="current" href="#">Docs</a>
|
||||
<a href="download.html">Download</a>
|
||||
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>Images</h1>
|
||||
<h2>Inside Grid</h2>
|
||||
<div class="row">
|
||||
<div class="c4">
|
||||
<div class="block">
|
||||
Inside a block.
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4">
|
||||
Direct in column:
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
<div class="c4">
|
||||
<div class="card">
|
||||
Inside a card.
|
||||
<img src="img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Buttons</h1>
|
||||
|
||||
<h2>Text Buttons</h2>
|
||||
|
||||
<h3>Classic</h3>
|
||||
<a class="tb">tb</a>
|
||||
<a class="tb info">tb info</a>
|
||||
<a class="tb ok">tb ok</a>
|
||||
<a class="tb warn">tb warn</a>
|
||||
<a class="tb err">tb err</a>
|
||||
<a class="tb fatal">tb fatal</a>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<div class="block">
|
||||
Text
|
||||
<a class="tb sm">small</a>
|
||||
<a class="tb">normal</a>
|
||||
<a class="tb big">Big</a>
|
||||
<a class="tb huge">HUGE</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c2 gapless">
|
||||
<span> Text <a class="tb sm">tb sm</a> </span>
|
||||
<a class="tb sm info">tb sm</a>
|
||||
<a class="tb sm ok">tb sm</a>
|
||||
<a class="tb sm warn">tb sm</a>
|
||||
</div>
|
||||
<div class="col c2 gapless">
|
||||
<a class="tb">tb</a>
|
||||
<a class="tb info">tb</a>
|
||||
<a class="tb ok">tb</a>
|
||||
<a class="tb warn">tb</a>
|
||||
</div>
|
||||
<div class="col c3 gapless">
|
||||
<a class="tb big warn">tb big</a>
|
||||
<a class="tb big err">tb big</a>
|
||||
<a class="tb big fatal">tb big</a>
|
||||
</div>
|
||||
<div class="col c5 gapless">
|
||||
<a class="tb huge err">tb huge</a>
|
||||
<a class="tb huge fatal">tb huge</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Classic</h2>
|
||||
<a class="btn">btn</a>
|
||||
<a class="btn info">btn info</a>
|
||||
<a class="btn ok">btn ok</a>
|
||||
<a class="btn warn">btn warn</a>
|
||||
<a class="btn err">btn err</a>
|
||||
<a class="btn fatal">btn fatal</a>
|
||||
|
||||
<pre class="block"><a class="btn btn-b">btn-b</a></pre>
|
||||
|
||||
<h2>Sizes</h2>
|
||||
<a class="btn sm">btn sm</a>
|
||||
<a class="btn info">btn info</a>
|
||||
<a class="btn big warn">btn big warn</a>
|
||||
<a class="btn huge err">btn huge err</a>
|
||||
|
||||
<pre class="block"><a class="btn sm info">btn sm info</a></pre>
|
||||
|
||||
<div class="row">
|
||||
<div class="col c4 card">
|
||||
<h3>Standardized Width <code>btn std</code></h3>
|
||||
<div class="col">
|
||||
<a class="btn std">btn std</a>
|
||||
<a class="btn std info">btn std info</a>
|
||||
<a class="btn std ok">btn std ok</a>
|
||||
<a class="btn std warn">btn std warn</a>
|
||||
<a class="btn std err">btn std err</a>
|
||||
<a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Big</h3>
|
||||
<div class="col">
|
||||
<a class="btn std big ">btn std</a>
|
||||
<a class="btn std big info">btn std info</a>
|
||||
<a class="btn std big ok">btn std ok</a>
|
||||
<a class="btn std big warn">btn std warn</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Huge</h3>
|
||||
<div class="col">
|
||||
<a class="btn std huge">btn std</a>
|
||||
<a class="btn std huge info">btn std info</a>
|
||||
<a class="btn std huge ok">btn std ok</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Messages</h1>
|
||||
<div class="row">
|
||||
<div class="col c6 gapless">
|
||||
<h2>Basic Messages</h2>
|
||||
<br/>
|
||||
<div class="msg">
|
||||
<strong>Normal Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg info">
|
||||
<strong><i class="ico">☞</i> Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg ok">
|
||||
<strong><i class="ico">☑</i> OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg warn">
|
||||
<strong><i class="ico">☣</i> Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg err">
|
||||
<strong><i class="ico">☒</i> Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☒</i> Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 gapless">
|
||||
<h2>Strong Alerts</h2>
|
||||
<br/>
|
||||
<div class="msg alert">
|
||||
<strong>Alert Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg alert info">
|
||||
<strong><i class="ico">☞</i> Alert Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert ok">
|
||||
<strong><i class="ico">☑</i> Alert OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert warn">
|
||||
<strong><i class="ico">☣</i> Alert Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert err">
|
||||
<strong><i class="ico">☒</i> Alert Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert fatal">
|
||||
<strong><i class="ico">☒</i> Alert Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
<strong>Alert headline!</strong>
|
||||
Message text
|
||||
</div></pre>
|
||||
|
||||
<div>
|
||||
<h1>Forms</h1>
|
||||
<input class="neutral" type="text" placeholder="input type="text"">
|
||||
<br/>
|
||||
<textarea class="neutral" rows="3" placeholder="textarea"></textarea>
|
||||
<br/>
|
||||
<span class="addon bg-info">$</span><input type="text" placeholder="span class="addon"">
|
||||
<br/>
|
||||
<pre><input type="text">
|
||||
<br><textarea rows="3">
|
||||
<br><span class="addon">$</span><input type="text"></pre>
|
||||
<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code></span></code> and <code><input></code> tags. Example: <pre>... </span> <input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... </span><input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
|
||||
</div>
|
||||
|
||||
<div class="navbar">
|
||||
<h1>Navbars</h1>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">BRUT</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
<a href="#">Four</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn sm">×</button>
|
||||
<br>
|
||||
<pre><nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">BRUT</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div class="col"><h2>Textual content</h2><div class="row"><div class="card c6"><div id="text"><h1>title in h1</h1><p>Some text in <p> with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div><details><summary>code</summary><pre>
|
||||
<div id="text">
|
||||
<h1>title in h1</h1>
|
||||
<p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
|
||||
<strong>strong</strong>, <i>italic</i>, <em>emphasis</em>,
|
||||
<code>code</code>, and if you really want something to be
|
||||
extremly visible use the class <code class="hl">hl</code>.</p>
|
||||
<p>The text should be <strong class="hl">very dense</strong> on
|
||||
purpose. Forget your lessons about nice space in design here.
|
||||
The goal of this design is to produce <em>professional</em> UI
|
||||
applications. So no time to make it breathes. We want to make
|
||||
it compact and efficient.</p>
|
||||
<p>Note we still try to keep a coherent and nice vertical
|
||||
rythm.</p>
|
||||
<blockquote>
|
||||
<p>Here is some blockquote. This can give you an idea about
|
||||
the look and feel for them.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div id="doc"><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><div class="doc"><p>Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.</p><p>Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.</p></div><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p></div><details><summary>code</summary><pre>
|
||||
<div id="doc">
|
||||
<p>Remark if you need to present a long text to read you can
|
||||
still use the class <code>doc</code>. Take a look at the next
|
||||
paragraph for example:</p>
|
||||
<div class="doc">
|
||||
<p>Lorem ipsum with pretty Lorem ipsum dolor sit amet
|
||||
consectetur adipiscing elit, urna consequat felis vehicula
|
||||
class ultricies mollis dictumst, aenean non a in donec nulla.
|
||||
Phasellus ante pellentesque erat cum risus consequat
|
||||
imperdiet aliquam, integer placerat et turpis mi eros nec
|
||||
lobortis taciti, vehicula nisl litora tellus ligula porttitor
|
||||
metus.</p>
|
||||
<p>Vivamus integer non suscipit taciti mus etiam at primis
|
||||
tempor sagittis sit, euismod libero facilisi aptent elementum
|
||||
felis blandit cursus gravida sociis erat ante, eleifend
|
||||
lectus nullam dapibus netus feugiat curae curabitur est ad.
|
||||
Massa curae fringilla porttitor quam sollicitudin iaculis
|
||||
aptent leo ligula euismod dictumst, orci penatibus mauris
|
||||
eros etiam praesent erat volutpat posuere hac. Metus
|
||||
fringilla nec ullamcorper odio aliquam lacinia conubia mauris
|
||||
tempor, etiam ultricies proin quisque lectus sociis id
|
||||
tristique, integer phasellus taciti pretium adipiscing tortor
|
||||
sagittis ligula.</p>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn sm">×</button></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Tables</h1>
|
||||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Icons</h1>
|
||||
<div class="icons">
|
||||
<div class="row">
|
||||
<div class="c6">
|
||||
<div class="col card">
|
||||
<div class="block"><b>Android Safe</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i>
|
||||
<div class="msg push">
|
||||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c6">
|
||||
<div class="col card">
|
||||
<div class="block"><b>Total Set</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i>
|
||||
<div class="msg warn push">
|
||||
Although over 75% of Android devices we tested
|
||||
support all "Total Set" icons, if a substantial
|
||||
portion of your users use old Android devices
|
||||
you should stick to the "Android Safe" set.
|
||||
(The "Total Set" does not include icons from the "Android Safe" set.)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||||
<h1>Grids</h1>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c12">c12</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c11">c11</div>
|
||||
<div class="light c1">c1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c10">c10</div>
|
||||
<div class="light c2">c2</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c9">c9</div>
|
||||
<div class="light c3">c3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c8">c8</div>
|
||||
<div class="light c4">c4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c7">c7</div>
|
||||
<div class="light c5">c5</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c6">c6</div>
|
||||
<div class="light c6">c6</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c5">c5</div>
|
||||
<div class="light c7">c7</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c4">c4</div>
|
||||
<div class="light c8">c8</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c3">c3</div>
|
||||
<div class="light c9">c9</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c2">c2</div>
|
||||
<div class="light c10">c10</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c1">c1</div>
|
||||
<div class="light c11">c11</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="light c12">c12</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<pre><div class="row"><br> <div class="c12">12</div><br></div>
|
||||
<br><div class="row"><br> <div class="c4">4</div><br> <div class="c8">8</div><br></div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Headings</h1>
|
||||
<div class="headings">
|
||||
<p>By default there is some space before and after any heading:</p>
|
||||
<h1>h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>h3</h3>
|
||||
<h4>h4</h4>
|
||||
<h5>h5</h5>
|
||||
<h6>h6</h6>
|
||||
<br>
|
||||
<p>You can remove the space by using the class <code>tight</code> to the heading:</p>
|
||||
<h1 class="tight">h1 tight</h1>
|
||||
<h2 class="tight">h2 tight</h2>
|
||||
<h3 class="tight">h3 tight</h3>
|
||||
<h4 class="tight">h4 tight</h4>
|
||||
<h5 class="tight">h5 tight</h5>
|
||||
<h6 class="tight">h6 tight</h6>
|
||||
<br>
|
||||
<pre><h1>Level One Heading</h1></pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<p>The <code>doc</code> class ensure the width of the text is
|
||||
not too wide and use a very legible font.</p>
|
||||
</div>
|
||||
</pre></details></div></div><div class="row"><div class="card c6"><div><h3>headings</h3><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h3>tight headings</h3><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6></div><details><summary>code</summary><pre>
|
||||
<div>
|
||||
<h3>headings</h3>
|
||||
<p>By default there is some space before and after any
|
||||
heading:</p>
|
||||
<h1>h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>h3</h3>
|
||||
<h4>h4</h4>
|
||||
<h5>h5</h5>
|
||||
<h6>h6</h6>
|
||||
<h3>tight headings</h3>
|
||||
<p>You can remove the space by using the class
|
||||
<code>tight</code> to the heading:</p>
|
||||
<h1 class="tight">h1 tight</h1>
|
||||
<h2 class="tight">h2 tight</h2>
|
||||
<h3 class="tight">h3 tight</h3>
|
||||
<h4 class="tight">h4 tight</h4>
|
||||
<h5 class="tight">h5 tight</h5>
|
||||
<h6 class="tight">h6 tight</h6>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div id="itemize"><h2>itemization</h2><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div><details><summary>code</summary><pre>
|
||||
<div id="itemize">
|
||||
<h2>itemization</h2>
|
||||
<h3>ul</h3>
|
||||
<ul>
|
||||
<li>item 1</li>
|
||||
<li>item 2</li>
|
||||
<li>item 3; with a very long text that should wrap to the
|
||||
next line in any browser. We'll see that the wrapped text
|
||||
should be aligned with the text of the other items. This is
|
||||
due to the <code>list-style-position: outside</code>.</li>
|
||||
<li>item 4</li>
|
||||
</ul>
|
||||
<h3>ol</h3>
|
||||
<ol>
|
||||
<li>item 1</li>
|
||||
<li>item 2</li>
|
||||
<li>item 3</li>
|
||||
<li>item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Grid</h2><div class="row"><div class="card c6"><div><div class="row"><div class="bg-neutral c12">c12</div></div><div class="row"><div class="bg-neutral c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div></div><details><summary>code</summary><pre>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c12">
|
||||
c12
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c11">
|
||||
c11
|
||||
</div>
|
||||
<div class="light c1">
|
||||
c1
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c10">
|
||||
c10
|
||||
</div>
|
||||
<div class="light c2">
|
||||
c2
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c9">
|
||||
c9
|
||||
</div>
|
||||
<div class="light c3">
|
||||
c3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c8">
|
||||
c8
|
||||
</div>
|
||||
<div class="light c4">
|
||||
c4
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c7">
|
||||
c7
|
||||
</div>
|
||||
<div class="light c5">
|
||||
c5
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c6">
|
||||
c6
|
||||
</div>
|
||||
<div class="light c6">
|
||||
c6
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c5">
|
||||
c5
|
||||
</div>
|
||||
<div class="light c7">
|
||||
c7
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c4">
|
||||
c4
|
||||
</div>
|
||||
<div class="light c8">
|
||||
c8
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c3">
|
||||
c3
|
||||
</div>
|
||||
<div class="light c9">
|
||||
c9
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c2">
|
||||
c2
|
||||
</div>
|
||||
<div class="light c10">
|
||||
c10
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bg-neutral c1">
|
||||
c1
|
||||
</div>
|
||||
<div class="light c11">
|
||||
c11
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="light c12">
|
||||
c12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Images</h2><div class="row"><div class="card c6"><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="images">
|
||||
<h1>Images</h1>
|
||||
<h2>Inside a grid</h2>
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<p>Inside a card</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
<div>
|
||||
<p>Directly a card</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
<div class="block">
|
||||
<p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>icons</h2><div class="row"><div class="card c6"><div class="col start"><h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push">The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.
|
||||
</div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Android Safe</h4><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
|
||||
☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<div class="msg push">
|
||||
The &amp;quot;Android Safe&amp;quot; icons work everywhere,
|
||||
tested on hundreds of devices.
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div><div class="card c6"><div class="col start"><h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i><div class="msg warn push">Although over 75% of Android devices we tested
|
||||
support all &quot;Total Set&quot; icons, if a substantial
|
||||
portion of your users use old Android devices
|
||||
you should stick to the &quot;Android Safe&quot; set.
|
||||
(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)
|
||||
</div></div><details><summary>code</summary><pre>
|
||||
<div class="col start">
|
||||
<h4>Total Set</h4><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
|
||||
⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
|
||||
<div class="msg warn push">
|
||||
Although over 75% of Android devices we tested support all
|
||||
&amp;quot;Total Set&amp;quot; icons, if a substantial portion
|
||||
of your users use old Android devices you should stick to the
|
||||
&amp;quot;Android Safe&amp;quot; set. (The &amp;quot;Total
|
||||
Set&amp;quot; does not include icons from the
|
||||
&amp;quot;Android Safe&amp;quot; set.)
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Forms</h2><div class="row"><div class="card c6"><div><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code><span></code> and <code><input></code> tags. Example: <pre>... </span><span class="hl"> </span><input ...</pre><span class="addon">$</span> <input class="smooth" type="text" /><pre>... </span><input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><details><summary>code</summary><pre>
|
||||
<div>
|
||||
<input class="neutral" placeholder="input" type="text"></input><br></br>
|
||||
<textarea class="neutral" placeholder="textarea" rows="3"></textarea><br></br>
|
||||
<span class="addon bg-info">$</span><input type="text"></input>
|
||||
<div class="msg">
|
||||
<strong>Be careful with addons!</strong> If you do not want a
|
||||
space between the addon and the input make sure that there is
|
||||
no space between the <code>&lt;span&gt;</code> and
|
||||
<code>&lt;input&gt;</code> tags. Example:
|
||||
<pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><span class="addon">$</span>
|
||||
<input class="smooth" type="text"></input>
|
||||
<pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text"></input>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Tables</h2><div class="row"><div class="card c6"><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><details><summary>code</summary><pre>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
<th>Revenue (£)</th>
|
||||
<th>Profit (£)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
<td>10</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
<td>20</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
<td>1000</td>
|
||||
<td>200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre></details></div></div></div><div class="col"><h2>Buttons</h2><div class="row"><div class="card c6"><div id="buttons"><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<h2>Text Buttons</h2>
|
||||
<h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
|
||||
info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
|
||||
warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
|
||||
fatal</a>
|
||||
<h3>Sizes</h3>
|
||||
<div class="block">
|
||||
Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c2 gapless">
|
||||
<span>Text <a class="tb sm">tb sm</a></span> <a class="tb sm info">tb sm</a><a class="tb sm ok">tb
|
||||
sm</a><a class="tb sm warn">tb sm</a>
|
||||
</div>
|
||||
<div class="col c2 gapless">
|
||||
<a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a>
|
||||
</div>
|
||||
<div class="col c3 gapless">
|
||||
<a class="tb big warn">tb big</a><a class="tb big err">tb
|
||||
big</a><a class="tb big fatal">tb big</a>
|
||||
</div>
|
||||
<div class="col c5 gapless">
|
||||
<a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn
|
||||
info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
|
||||
warn</a><a class="btn err">btn err</a><a class="btn fatal">btn
|
||||
fatal</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre>
|
||||
<h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big
|
||||
warn</a><a class="btn huge err">btn huge err</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
|
||||
<div class="row">
|
||||
<div class="col c4 card">
|
||||
<h3>Standardized Width <code>btn std</code></h3>
|
||||
<div class="col">
|
||||
<a class="btn std">btn std</a><a class="btn std info">btn
|
||||
std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
std err</a><a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Big</h3>
|
||||
<div class="col">
|
||||
<a class="btn std big">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Huge</h3>
|
||||
<div class="col">
|
||||
<a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Messages</h2><div class="row"><div class="card c6"><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico">☞</i> Info</strong> This is done by adding <code>info</code> to the class.
|
||||
</div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg warn"><strong><i class="ico">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg err"><strong><i class="ico">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg fatal"><strong><i class="ico">☒</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
|
||||
</div></div><div class="col c6 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
|
||||
</div><div class="msg alert info"><strong><i class="ico">☞</i> Alert Info</strong>This is done by adding <code>info</code> to the class.
|
||||
</div><div class="msg alert ok"><strong><i class="ico">☑</i> Alert OK</strong>This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg alert warn"><strong><i class="ico">☣</i> Alert Warning</strong>This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg alert err"><strong><i class="ico">☒</i> Alert Error</strong>This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg alert fatal"><strong><i class="ico">☒</i> Alert Fatal</strong>This is done by adding <code>fatal</code> to the class.
|
||||
</div></div></div><details><summary>code</summary><pre>
|
||||
<div class="row">
|
||||
<div class="col c6 gapless">
|
||||
<h2>Basic Messages</h2><br></br>
|
||||
<div class="msg">
|
||||
<strong>Normal Message</strong> This is a normal message
|
||||
with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg info">
|
||||
<strong><i class="ico">☞</i> Info</strong> This is done by
|
||||
adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg ok">
|
||||
<strong><i class="ico">☑</i> OK</strong> This is done by
|
||||
adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg warn">
|
||||
<strong><i class="ico">☣</i> Warning</strong> This is done
|
||||
by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg err">
|
||||
<strong><i class="ico">☒</i> Error</strong> This is done by
|
||||
adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☒</i> Fatal</strong> This is done by
|
||||
adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 gapless">
|
||||
<h2>Strong Alerts</h2><br></br>
|
||||
<div class="msg alert">
|
||||
<strong>Alert Message</strong>This is a normal message with
|
||||
<code>msg</code>.
|
||||
</div>
|
||||
<div class="msg alert info">
|
||||
<strong><i class="ico">☞</i> Alert Info</strong>This is
|
||||
done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert ok">
|
||||
<strong><i class="ico">☑</i> Alert OK</strong>This is done
|
||||
by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert warn">
|
||||
<strong><i class="ico">☣</i> Alert Warning</strong>This is
|
||||
done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert err">
|
||||
<strong><i class="ico">☒</i> Alert Error</strong>This is
|
||||
done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg alert fatal">
|
||||
<strong><i class="ico">☒</i> Alert Fatal</strong>This is
|
||||
done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div class="col"><h2>Navbar</h2><div class="row"><div class="card c6"><div class="navbar"><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button></div><details><summary>code</summary><pre>
|
||||
<div class="navbar">
|
||||
<nav class="nav" onclick="this.focus()" tabindex="-1">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a>
|
||||
</div>
|
||||
</nav><button class="btn-close btn sm">×</button>
|
||||
</div>
|
||||
</pre></details></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
155
h/g-docs.html
155
h/g-docs.html
|
|
@ -1,155 +0,0 @@
|
|||
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div><h2>Textual content</h2><div class="col"><div class="card"><div id="text"><h1>title in h1</h1><p>Some text in <p> with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>, and if you really want something to be extremly visible use the class <code class="hl">hl</code>.</p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div><details><summary>code</summary><pre>
|
||||
<div id="text">
|
||||
<h1>title in h1</h1>
|
||||
<p>Some text in &lt;p&gt; with different styles; <b>bold</b>,
|
||||
<strong>strong</strong>, <i>italic</i>, <em>emphasis</em>,
|
||||
<code>code</code>, and if you really want something to be
|
||||
extremly visible use the class <code class="hl">hl</code>.</p>
|
||||
<p>The text should be <strong class="hl">very dense</strong> on
|
||||
purpose. Forget your lessons about nice space in design here.
|
||||
The goal of this design is to produce <em>professional</em> UI
|
||||
applications. So no time to make it breathes. We want to make
|
||||
it compact and efficient.</p>
|
||||
<p>Note we still try to keep a coherent and nice vertical
|
||||
rythm.</p>
|
||||
<blockquote>
|
||||
<p>Here is some blockquote. This can give you an idea about
|
||||
the look and feel for them.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</pre></details></div><div class="card"><div id="doc"><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><div class="doc"><p>Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.</p><p>Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.</p><p>Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum. Dapibus imperdiet praesent magnis ridiculus congue gravida curabitur dictum sagittis, enim et magna sit inceptos sodales parturient pharetra mollis, aenean vel nostra tellus commodo pretium sapien sociosqu.</p></div><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p><blockquote>Some blockquote</blockquote></div><details><summary>code</summary><pre>
|
||||
<div id="doc">
|
||||
<p>Remark if you need to present a long text to read you can
|
||||
still use the class <code>doc</code>. Take a look at the next
|
||||
paragraph for example:</p>
|
||||
<div class="doc">
|
||||
<p>Lorem ipsum with pretty Lorem ipsum dolor sit amet
|
||||
consectetur adipiscing elit, urna consequat felis vehicula
|
||||
class ultricies mollis dictumst, aenean non a in donec nulla.
|
||||
Phasellus ante pellentesque erat cum risus consequat
|
||||
imperdiet aliquam, integer placerat et turpis mi eros nec
|
||||
lobortis taciti, vehicula nisl litora tellus ligula porttitor
|
||||
metus.</p>
|
||||
<p>Vivamus integer non suscipit taciti mus etiam at primis
|
||||
tempor sagittis sit, euismod libero facilisi aptent elementum
|
||||
felis blandit cursus gravida sociis erat ante, eleifend
|
||||
lectus nullam dapibus netus feugiat curae curabitur est ad.
|
||||
Massa curae fringilla porttitor quam sollicitudin iaculis
|
||||
aptent leo ligula euismod dictumst, orci penatibus mauris
|
||||
eros etiam praesent erat volutpat posuere hac. Metus
|
||||
fringilla nec ullamcorper odio aliquam lacinia conubia mauris
|
||||
tempor, etiam ultricies proin quisque lectus sociis id
|
||||
tristique, integer phasellus taciti pretium adipiscing tortor
|
||||
sagittis ligula.</p>
|
||||
<p>Mollis pretium lorem primis senectus habitasse lectus
|
||||
scelerisque donec, ultricies tortor suspendisse adipiscing
|
||||
fusce morbi volutpat pellentesque, consectetur mi risus
|
||||
molestie curae malesuada cum. Dignissim lacus convallis massa
|
||||
mauris enim ad mattis magnis senectus montes, mollis taciti
|
||||
phasellus accumsan bibendum semper blandit suspendisse
|
||||
faucibus nibh est, metus lobortis morbi cras magna vivamus
|
||||
per risus fermentum. Dapibus imperdiet praesent magnis
|
||||
ridiculus congue gravida curabitur dictum sagittis, enim et
|
||||
magna sit inceptos sodales parturient pharetra mollis, aenean
|
||||
vel nostra tellus commodo pretium sapien sociosqu.</p>
|
||||
</div>
|
||||
<p>The <code>doc</code> class ensure the width of the text is
|
||||
not too wide and use a very legible font.</p>
|
||||
<blockquote>
|
||||
Some blockquote
|
||||
</blockquote>
|
||||
</div>
|
||||
</pre></details></div><div class="card"><div id="itemize"><h2>itemization</h2><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div><details><summary>code</summary><pre>
|
||||
<div id="itemize">
|
||||
<h2>itemization</h2>
|
||||
<h3>ul</h3>
|
||||
<ul>
|
||||
<li>item 1</li>
|
||||
<li>item 2</li>
|
||||
<li>item 3; with a very long text that should wrap to the
|
||||
next line in any browser. We'll see that the wrapped text
|
||||
should be aligned with the text of the other items. This is
|
||||
due to the <code>list-style-position: outside</code>.</li>
|
||||
<li>item 4</li>
|
||||
</ul>
|
||||
<h3>ol</h3>
|
||||
<ol>
|
||||
<li>item 1</li>
|
||||
<li>item 2</li>
|
||||
<li>item 3</li>
|
||||
<li>item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
</pre></details></div></div></div><div><h2>Images</h2><div class="col"><div class="card"><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="images">
|
||||
<h1>Images</h1>
|
||||
<h2>Inside a grid</h2>
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<p>Inside a card</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
<div>
|
||||
<p>Directly a card</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
<div class="block">
|
||||
<p>In a block</p><img src="../h/img/brutalism.webp"></img></div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div><div><h2>Buttons</h2><div class="col"><div class="card"><div id="buttons"><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div></div><details><summary>code</summary><pre>
|
||||
<div id="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<h2>Text Buttons</h2>
|
||||
<h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb
|
||||
info</a><a class="tb ok">tb ok</a><a class="tb warn">tb
|
||||
warn</a><a class="tb err">tb err</a><a class="tb fatal">tb
|
||||
fatal</a>
|
||||
<h3>Sizes</h3>
|
||||
<div class="block">
|
||||
Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c2 gapless">
|
||||
<span>Text <a class="tb sm">tb sm</a></span> <a class="tb sm info">tb sm</a><a class="tb sm ok">tb
|
||||
sm</a><a class="tb sm warn">tb sm</a>
|
||||
</div>
|
||||
<div class="col c2 gapless">
|
||||
<a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a>
|
||||
</div>
|
||||
<div class="col c3 gapless">
|
||||
<a class="tb big warn">tb big</a><a class="tb big err">tb
|
||||
big</a><a class="tb big fatal">tb big</a>
|
||||
</div>
|
||||
<div class="col c5 gapless">
|
||||
<a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn
|
||||
info</a><a class="btn ok">btn ok</a><a class="btn warn">btn
|
||||
warn</a><a class="btn err">btn err</a><a class="btn fatal">btn
|
||||
fatal</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn btn-b&amp;quot;&amp;gt;btn-b&amp;lt;/a&amp;gt;</pre>
|
||||
<h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big
|
||||
warn</a><a class="btn huge err">btn huge err</a>
|
||||
<pre class="block">&amp;lt;a class=&amp;quot;btn sm info&amp;quot;&amp;gt;btn sm info&amp;lt;/a&amp;gt;</pre>
|
||||
<div class="row">
|
||||
<div class="col c4 card">
|
||||
<h3>Standardized Width <code>btn std</code></h3>
|
||||
<div class="col">
|
||||
<a class="btn std">btn std</a><a class="btn std info">btn
|
||||
std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn
|
||||
std err</a><a class="btn std fatal">btn std fatal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Big</h3>
|
||||
<div class="col">
|
||||
<a class="btn std big">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Huge</h3>
|
||||
<div class="col">
|
||||
<a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre></details></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
Loading…
Reference in a new issue