mirror of
https://github.com/frc1418/banners.css.git
synced 2026-03-09 05:36:42 -04:00
Init
This commit is contained in:
ErikBoesen
29
README.md
Normal file
29
README.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# banners.css
|
||||
|
||||
banners.css is a simple CSS preset to allow easy creation of simulated [FRC](http://firstinspires.org/robotics/frc) blue banners (typically awarded to teams upon receiving a competition award.)
|
||||
|
||||
This framework allows for three different types of banners:
|
||||
|
||||
### Row
|
||||
To define a group of banners:
|
||||
1. Create a `<ul>` with the class of `banners`. Each `<li>` in the list will be turned into a banner.
|
||||
2. OPTIONAL: Insert an `<img>` at the starting of each `<li>` with the `src` pointing to the `first.svg` file included in this repository. This will put a FIRST logo on the banner. This can be done for all three methods of declaring a banner.
|
||||
3. Fill the rest of each `<li>` with the name of the award. Well, technically, you can put any content you want in it. But the name of the award is probably best.
|
||||
|
||||
### Individual banner
|
||||
Repeat the above process, except instead of defining a `<ul>` with `<li>`s as children, define one `<div>` with the class of `banner`. Treat this like you would a `<li>` in the process above.
|
||||
|
||||
### Page-wide
|
||||
Repeat the first process exactly, however with one extra step: enclose the `<ul>` with a `<div>` with the class `banner-parent`. This will cause the row of banners to expand to fill the whole width of the screen, and any extra banners will be visible by scrolling to the side.
|
||||
|
||||
## Examples
|
||||
* [Team 1418's website](https://1418.team)
|
||||
* See `example.html`
|
||||
|
||||
If you use this framework on your own project, feel free to open a pull request to add it to this list!
|
||||
|
||||
## Author
|
||||
This framework was created by [Erik Boesen](https://github.com/ErikBoesen), originally for [Team 1418's website](https://1418.team).
|
||||
|
||||
## License
|
||||
This software is protected under the CC-0 license. Do anything you want with it. I'd love if you gave me credit, but you don't have to if you really don't want to.
|
||||
65
banners.css
Normal file
65
banners.css
Normal file
@@ -0,0 +1,65 @@
|
||||
@font-face {
|
||||
font-family: 'Adam';
|
||||
src: url('adam.otf') format('opentype');
|
||||
unicode-range: U+0000-00FF;
|
||||
}
|
||||
/* To be standard-compliant, this rule should be applied to *, but for compat it's restricted here. */
|
||||
.banners,
|
||||
.banners *,
|
||||
.banner {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.banners {
|
||||
display: block;
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
.banner-parent {
|
||||
width: 100vw;
|
||||
overflow: scroll;
|
||||
}
|
||||
.banner-parent .banners {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.banners li,
|
||||
.banner {
|
||||
line-height: 1.2;
|
||||
font-family: 'Adam', sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin: 0 3px 30px;
|
||||
width: 120px;
|
||||
position: relative;
|
||||
background: #0f4bcb;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
white-space: normal;
|
||||
}
|
||||
.banners img,
|
||||
.banner img {
|
||||
width: 75px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.banners li:after,
|
||||
.banner:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 60px solid #0f4bcb;
|
||||
border-top-width: 5px;
|
||||
border-bottom: 20px transparent solid;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.banners li,
|
||||
.banners li:after,
|
||||
.banner,
|
||||
.banner:after {
|
||||
-webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, .1));
|
||||
}
|
||||
17
example.css
Normal file
17
example.css
Normal file
@@ -0,0 +1,17 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
overflow-x: hidden;
|
||||
width: 100vw;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #0f4bcb;
|
||||
font-family: sans-serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
48
example.html
Normal file
48
example.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>banners.css example</title>
|
||||
<link rel="stylesheet" href="example.css">
|
||||
<link rel="stylesheet" href="banners.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Standard row of banners</h1>
|
||||
<ul class="banners">
|
||||
<li><img src="first.svg">2016 Chesapeake Regional Champions</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (Regional)</li>
|
||||
<li><img src="first.svg">2016 Bethesda District Champions</li>
|
||||
<li><img src="first.svg">2016 Industrial Design (Bethesda)</li>
|
||||
<li><img src="first.svg">2016 District of Columbia Champs</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (DC)</li>
|
||||
</ul>
|
||||
<h1>Single banner</h1>
|
||||
<div class="banner"><img src="first.svg">2016 Chesapeake Regional Champions</div>
|
||||
<h1>Full width row of banners</h1>
|
||||
<div class="banner-parent">
|
||||
<ul class="banners">
|
||||
<li><img src="first.svg">2016 Chesapeake Regional Champions</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (Regional)</li>
|
||||
<li><img src="first.svg">2016 Bethesda District Champions</li>
|
||||
<li><img src="first.svg">2016 Industrial Design (Bethesda)</li>
|
||||
<li><img src="first.svg">2016 District of Columbia Champs</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (DC)</li>
|
||||
<li><img src="first.svg">2016 Chesapeake Regional Champions</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (Regional)</li>
|
||||
<li><img src="first.svg">2016 Bethesda District Champions</li>
|
||||
<li><img src="first.svg">2016 Industrial Design (Bethesda)</li>
|
||||
<li><img src="first.svg">2016 District of Columbia Champs</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (DC)</li>
|
||||
<li><img src="first.svg">2016 Chesapeake Regional Champions</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (Regional)</li>
|
||||
<li><img src="first.svg">2016 Bethesda District Champions</li>
|
||||
<li><img src="first.svg">2016 Industrial Design (Bethesda)</li>
|
||||
<li><img src="first.svg">2016 District of Columbia Champs</li>
|
||||
<li><img src="first.svg">2016 Innovation in Control (DC)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
first.svg
Normal file
31
first.svg
Normal file
@@ -0,0 +1,31 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1038 621">
|
||||
<g transform="translate(0,621) scale(0.1,-0.1)" fill="white" stroke="none">
|
||||
<path d="M1256 6179 c-104 -10 -190 -20 -191 -21 -1 -2 -241 -1312 -533 -2913
|
||||
-338 -1852 -528 -2911 -521 -2915 5 -4 119 -15 252 -25 l242 -18 1107 487
|
||||
c608 267 1110 486 1115 486 4 0 41 -27 81 -60 493 -403 1133 -647 1857 -710
|
||||
154 -13 486 -13 640 0 458 40 925 164 1277 341 l76 38 453 -434 453 -434 121
|
||||
127 c67 70 699 728 1404 1462 l1283 1335 -6 59 c-3 32 -6 138 -6 235 l0 177
|
||||
-1452 1394 c-799 767 -1457 1395 -1463 1395 -6 0 -252 -252 -548 -560 -296
|
||||
-308 -544 -559 -550 -558 -7 1 -73 22 -147 48 -235 80 -511 141 -800 177 -140
|
||||
17 -678 17 -825 0 -542 -64 -989 -207 -1412 -454 l-102 -59 -747 708 -747 708
|
||||
-61 2 c-34 0 -146 -7 -250 -18z m6987 -2319 l767 -735 -98 -100 c-55 -55 -319
|
||||
-329 -587 -610 -269 -280 -551 -574 -626 -652 l-138 -142 55 84 c119 183 212
|
||||
411 256 627 22 108 23 134 23 563 0 427 -1 456 -22 561 -61 297 -203 588 -405
|
||||
829 -41 50 -92 105 -111 124 l-36 34 72 78 c40 43 75 77 78 76 3 -1 351 -333
|
||||
772 -737z m-5969 86 c-92 -177 -142 -317 -181 -511 -16 -79 -18 -145 -18 -545
|
||||
0 -431 1 -460 22 -555 12 -54 21 -100 20 -102 -4 -3 -485 -222 -514 -234 -16
|
||||
-6 -21 -5 -18 4 2 7 103 534 225 1172 122 638 224 1166 226 1174 3 10 55 -35
|
||||
153 -133 l149 -148 -64 -122z m3021 269 c72 -8 150 -18 175 -23 l44 -7 -433
|
||||
-453 -433 -452 -36 32 c-126 109 -731 692 -727 699 8 12 146 63 279 104 137
|
||||
41 320 79 456 94 52 6 109 13 125 15 86 10 434 4 550 -9z m1472 -671 c153
|
||||
-171 245 -327 303 -516 l18 -57 -29 -85 c-53 -159 -157 -335 -272 -461 l-53
|
||||
-59 -367 353 -367 353 218 227 c121 124 256 265 302 314 l82 87 50 -41 c27
|
||||
-23 79 -75 115 -115z m-3430 -466 l272 -272 -277 -102 c-196 -72 -281 -99
|
||||
-289 -92 -21 17 -121 229 -141 299 l-19 65 24 73 c39 121 129 301 151 301 4 0
|
||||
129 -122 279 -272z m2073 -1010 c188 -181 268 -263 258 -269 -18 -9 -150 -36
|
||||
-278 -55 -146 -21 -517 -30 -677 -15 -70 7 -186 23 -258 36 -132 25 -344 80
|
||||
-358 94 -4 4 190 96 430 204 241 108 472 212 513 231 41 19 80 35 86 35 7 1
|
||||
134 -117 284 -261z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Reference in New Issue
Block a user