2022-09-25 10:55:47 +00:00
<!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 > YOLO - docs< / title >
2022-09-25 14:59:23 +00:00
< link href = "../brut.min.css" rel = "stylesheet" type = "text/css" / >
2022-09-25 10:55:47 +00:00
< style >
.dark { background: #ddd; }
.light { background: #eee; }
< / style >
< / head >
< body >
2022-09-25 14:52:56 +00:00
< nav class = "nav" tabindex = "-1" onclick = "this.focus()" >
2022-09-25 10:55:47 +00:00
< div class = "container" >
2022-09-25 16:21:55 +00:00
< a class = "pagename current" href = "../index.html" > BRUT< / a >
2022-09-25 10:55:47 +00:00
< a class = "current" href = "#" > Docs< / a >
< a href = "download.html" > Download< / a >
< a href = "examples.html" > Examples< / a >
2022-09-25 14:59:23 +00:00
< a href = "https://gitea.esy.fun/yogsototh/brutcss" > Code< / a >
2022-09-25 10:55:47 +00:00
< / div >
< / nav >
2022-09-25 14:52:56 +00:00
< button class = "btn btn-sm btn-close" > × < / button >
2022-09-25 10:55:47 +00:00
< div class = "container" >
2022-09-25 16:21:55 +00:00
< div >
< h1 > Images< / h1 >
< img src = "img/brutalisme.jpg" alt = "brutalisme" / >
< h2 > Inside Grid< / h2 >
< div class = "row" >
< div class = "block c4" >
Inside a block.
< img src = "img/brutalisme.jpg" alt = "brutalisme" / >
< / div >
< div class = "c4" > < / div >
< div class = "card c4" >
Inside a card.
< img src = "img/brutalisme.jpg" alt = "brutalisme" / >
< / div >
< / div >
< / div >
2022-09-25 10:55:47 +00:00
< div >
< h1 > Buttons< / h1 >
2022-09-25 12:08:15 +00:00
< h2 > Text Buttons< / h2 >
< a class = "tb" > tb< / a >
< a class = "tb tb-a" > tb tb-a< / a >
< a class = "tb tb-b" > tb tb-b< / a >
< a class = "tb tb-c" > tb tb-c< / a >
< h2 > Classic< / h2 >
2022-09-25 10:55:47 +00:00
< a class = "btn btn-a" > btn-a< / a >
< a class = "btn-b btn" > btn-b< / a >
< a class = "btn-c btn" > btn-c< / a >
< a class = "btn" > classless< / a >
2022-09-25 12:08:15 +00:00
< pre class = "block" > < a class="btn btn-b"> btn-b< /a> < / pre >
< h2 > Small < code > btn-sm< / code > < / h2 >
2022-09-25 10:55:47 +00:00
< a class = "btn btn-a btn-sm" > btn-sm btn-a< / a >
< a class = "btn btn-b btn-sm" > btn-sm btn-b< / a >
< a class = "btn btn-c btn-sm" > btn-sm btn-c< / a >
< a class = "btn btn-sm" > btn-sm classless< / a >
2022-09-25 12:08:15 +00:00
< pre class = "block" > < a class="btn btn-b btn-sm"> btn-sm< /a> < / pre >
< h2 > Standardized Width < code > btn-std< / code > < / h2 >
< a class = "btn btn-a btn-std" > btn-std btn-a With a bit too much text< / a >
< a class = "btn btn-b btn-std" > btn-std btn-b< / a >
< a class = "btn btn-c btn-std" > btn-std btn-c< / a >
< a class = "btn btn-std" > btn-sm classless< / a >
< pre class = "block" > < a class="btn btn-b btn-sm"> btn-sm< /a> < / pre >
2022-09-25 10:55:47 +00:00
< / div >
2022-09-25 14:52:56 +00:00
< h1 > Messages< / h1 >
< div class = "messages" >
< 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 attention" >
< strong > Attention< / strong >
This is done by adding < code > attention< / 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 class = "msg black" >
< strong > Black< / strong >
This is done by adding < code > black< / code > to the class.
< / div >
< pre > < div class="msg">
< strong> Alert headline!< /strong>
Message text
< /div> < / pre >
< / div >
2022-09-25 10:55:47 +00:00
< div >
< h1 > Forms< / h1 >
< div class = "block" >
2022-09-25 14:52:56 +00:00
< input type = "text" placeholder = "input type="text"" >
2022-09-25 10:55:47 +00:00
< / div >
< div class = "block" >
2022-09-25 14:52:56 +00:00
< textarea rows = "3" placeholder = "textarea" > < / textarea >
2022-09-25 10:55:47 +00:00
< / div >
< div class = "block" >
2022-09-25 14:52:56 +00:00
< span class = "addon" > $< / span > < input type = "text" placeholder = "span class="addon"" >
2022-09-25 10:55:47 +00:00
< / div >
2022-09-25 12:08:15 +00:00
< pre > < input type="text">
2022-09-25 14:52:56 +00:00
< br > < textarea rows="3">
< br > < span class="addon"> $< /span> < input type="text"> < / pre >
2022-09-25 10:55:47 +00:00
< 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" >
2022-09-25 16:21:55 +00:00
< a class = "pagename current" href = "#" > BRUT< / a >
2022-09-25 10:55:47 +00:00
< a href = "#" > One< / a >
< a href = "#" > Two< / a >
< a href = "#" > Three< / a >
< a href = "#" > Four< / a >
< / div >
< / nav >
< button class = "btn-close btn btn-sm" > × < / button >
< br >
2022-09-25 16:21:55 +00:00
< pre > < nav class="nav" tabindex="-1" onclick="this.focus()"> < br > < div class="container"> < br > < a class="pagename current" href="#"> BRUT< /a> < br > < a href="#"> One< /a> < br > < a href="#"> Two< /a> < br > < a href="#"> Three< /a> < br > < /div> < br > < /nav> < br > < button class="btn-close btn btn-sm"> × < /button> < / pre >
2022-09-25 10:55:47 +00:00
< / 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">
2022-09-25 14:52:56 +00:00
< 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>
2022-09-25 10:55:47 +00:00
< / pre >
< / div >
2022-09-25 14:52:56 +00:00
< h1 > Icons< / h1 >
2022-09-25 10:55:47 +00:00
< div class = "icons" >
< div class = "row" >
< div class = "col c6 card" >
2022-09-25 14:52:56 +00:00
< div class = "block" > < b > Android Safe< / b > < / div >
< i class = "ico block" style = "line-height: 1.5rem" >
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
< / i >
< div class = "block msg" style = "line-height: 1.5rem" >
The "Android Safe" icons work everywhere, tested on hundreds of devices.
< / div >
< / div >
2022-09-25 10:55:47 +00:00
< div class = "col c6 card" >
2022-09-25 14:52:56 +00:00
< div class = "block" > < b > Total Set< / b > < / div >
< i class = "ico block" style = "line-height: 1.5rem" >
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
< / i >
< div class = "block msg warn" > 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 >
2022-09-25 10:55:47 +00:00
< / div >
2022-09-25 14:52:56 +00:00
< / div >
2022-09-25 10:55:47 +00:00
< pre > < i class="ico"> Copy and paste icons from above here!< /i> < / pre >
< h1 > Grids< / h1 >
< div class = "row" >
< div class = "col dark c12" > 12< / div >
< / div >
< div class = "row" >
< div class = "col dark c11" > 11< / div >
< div class = "col light c1" > 1< / div >
< / div >
< div class = "row" >
< div class = "col dark c10" > 10< / div >
< div class = "col light c2" > 2< / div >
< / div >
< div class = "row" >
< div class = "col dark c9" > 9< / div >
< div class = "col light c3" > 3< / div >
< / div >
< div class = "row" >
< div class = "col dark c8" > 8< / div >
< div class = "col light c4" > 4< / div >
< / div >
< div class = "row" >
< div class = "col dark c7" > 7< / div >
< div class = "col light c5" > 5< / div >
< / div >
< div class = "row" >
< div class = "col dark c6" > 6< / div >
< div class = "col light c6" > 6< / div >
< / div >
< div class = "row" >
< div class = "col dark c5" > 5< / div >
< div class = "col light c7" > 7< / div >
< / div >
< div class = "row" >
< div class = "col dark c4" > 4< / div >
< div class = "col light c8" > 8< / div >
< / div >
< div class = "row" >
< div class = "col dark c3" > 3< / div >
< div class = "col light c9" > 9< / div >
< / div >
< div class = "row" >
< div class = "col dark c2" > 2< / div >
< div class = "col light c10" > 10< / div >
< / div >
< div class = "row" >
< div class = "col dark c1" > 1< / div >
< div class = "col light c11" > 11< / div >
< / div >
< div class = "row" >
< div class = "col light c12" > 12< / div >
< / div >
< br >
<!-- [if lte IE 6]><br><br><br><![endif] -->
< pre > < div class="row"> < br > < div class="col c12"> 12< /div> < br > < /div>
< br > < div class="row"> < br > < div class="col c4"> 4< /div> < br > < div class="col c8"> 8< /div> < br > < /div>
< / pre >
< / div >
< h1 > Headings< / h1 >
< div class = "headings" >
< h1 class = "exampleh1" > h1< / h1 >
< h2 > h2< / h2 >
< h3 > h3< / h3 >
< h4 > h4< / h4 >
< h5 > h5< / h5 >
< h6 > h6< / h6 >
< br >
< pre > < h1> Level One Heading< /h1> < / pre >
< / div >
< / div >
< / body >
< / html >
