Author: | mattc0m |
---|---|
Views Total: | 2,567 views |
Official Page: | Go to website |
Last Update: | December 14, 2023 |
License: | MIT |
Preview:

Description:
A CSS/SCSS solution for creating responsive tournament brackets using only HTML and CSS.
It utilizes CSS flexbox to build a flexible bracket layout that can adapt across any device. Developers can customize team names, styles, spacing and sizes through simple Sass variables.
How to use it:
1. Build the HTML for your first tournament bracket.
<div class="theme theme-dark"> <div class="bracket disable-image"> <div class="column one"> <div class="match winner-top"> <div class="match-top team"> <span class="image"></span> <span class="seed">1</span> <span class="name">Orlando Jetsetters</span> <span class="score">2</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">8</span> <span class="name">D.C. Senators</span> <span class="score">1</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> <div class="match winner-bottom"> <div class="match-top team"> <span class="image"></span> <span class="seed">4</span> <span class="name">New Orleans Rockstars</span> <span class="score">1</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">5</span> <span class="name">West Virginia Runners</span> <span class="score">2</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> <div class="match winner-top"> <div class="match-top team"> <span class="image"></span> <span class="seed">2</span> <span class="name">Denver Demon Horses</span> <span class="score">2</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">7</span> <span class="name">Chicago Pistons</span> <span class="score">0</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> <div class="match winner-top"> <div class="match-top team"> <span class="image"></span> <span class="seed">3</span> <span class="name">San Francisco Porters</span> <span class="score">2</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">6</span> <span class="name">Seattle Climbers</span> <span class="score">1</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> </div> <div class="column two"> <div class="match winner-bottom"> <div class="match-top team"> <span class="image"></span> <span class="seed">1</span> <span class="name">Orlando Jetsetters</span> <span class="score">1</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">5</span> <span class="name">West Virginia Runners</span> <span class="score">2</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> <div class="match winner-bottom"> <div class="match-top team"> <span class="image"></span> <span class="seed">2</span> <span class="name">Denver Demon Horses</span> <span class="score">1</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">3</span> <span class="name">San Francisco Porters</span> <span class="score">2</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> </div> <div class="column three"> <div class="match winner-top"> <div class="match-top team"> <span class="image"></span> <span class="seed">5</span> <span class="name">West Virginia Runners</span> <span class="score">3</span> </div> <div class="match-bottom team"> <span class="image"></span> <span class="seed">3</span> <span class="name">San Francisco Porters</span> <span class="score">2</span> </div> <div class="match-lines"> <div class="line one"></div> <div class="line two"></div> </div> <div class="match-lines alt"> <div class="line one"></div> </div> </div> </div> </div> </div>
2. Add compiled CSS rules to your page.
.theme { height: 100%; width: 100%; position: absolute; } .bracket { padding: 40px; margin: 5px; } .bracket { display: flex; flex-direction: row; position: relative; } .column { display: flex; flex-direction: column; min-height: 100%; justify-content: space-around; align-content: center; } .match { position: relative; display: flex; flex-direction: column; min-width: 240px; max-width: 240px; height: 62px; margin: 12px 24px 12px 0; } .match .match-top { border-radius: 2px 2px 0 0; } .match .match-bottom { border-radius: 0 0 2px 2px; } .match .team { display: flex; align-items: center; width: 100%; height: 100%; border: 1px solid black; position: relative; } .match .team span { padding-left: 8px; } .match .team span:last-child { padding-right: 8px; } .match .team .score { margin-left: auto; } .match .team:first-child { margin-bottom: -1px; } .match-lines { display: block; position: absolute; top: 50%; bottom: 0; margin-top: 0px; right: -1px; } .match-lines .line { background: red; position: absolute; } .match-lines .line.one { height: 1px; width: 12px; } .match-lines .line.two { height: 44px; width: 1px; left: 11px; } .match-lines.alt { left: -12px; } .match:nth-child(even) .match-lines .line.two { transform: translate(0, -100%); } .column:first-child .match-lines.alt { display: none; } .column:last-child .match-lines { display: none; } .column:last-child .match-lines.alt { display: block; } .column:nth-child(2) .match-lines .line.two { height: 88px; } .column:nth-child(3) .match-lines .line.two { height: 175px; } .column:nth-child(4) .match-lines .line.two { height: 262px; } .column:nth-child(5) .match-lines .line.two { height: 349px; } .disable-image .image, .disable-seed .seed, .disable-name .name, .disable-score .score { display: none !important; } .disable-borders { border-width: 0px !important; } .disable-borders .team { border-width: 0px !important; } .disable-seperator .match-top { border-bottom: 0px !important; } .disable-seperator .match-bottom { border-top: 0px !important; } .disable-seperator .team:first-child { margin-bottom: 0px; }
/* Dark Theme */ .theme-dark { background: #0e1217; border-color: #040607; } .theme-dark .match-lines .line { background: #36404e; } .theme-dark .team { background: #182026; border-color: #232c36; color: #6b798c; } .theme-dark .winner-top .match-top, .theme-dark .winner-bottom .match-bottom { background: #232c36; color: #e3e8ef; border-color: #36404e; z-index: 1; } .theme-dark .winner-top .match-top .score, .theme-dark .winner-bottom .match-bottom .score { color: #03d9ce; } .theme-dark .match .seed { font-size: 12px; min-width: 10px; } .theme-dark .match .score { font-size: 14px; }
3. Customize the tournament bracket by overriding the defaulg Sass variables.
$font-size: 16px; $match-height: 62px; $match-spacing: 24px; $match-width: 240px; $border-size: 1px; $border-radius: 2px;