CSS Tournament Bracket

css-tournament-bracket.markdown

CSS Tournament Bracket

A pure-HTML+CSS tournament bracket made with the power of rems!

A Pen by Olivier Duhart on CodePen.

License.

index.pug

.bracket
	section.round.quarterfinals
		.winners
			.matchups
				.matchup
					.participants
						.participant.winner
							span Uno
						.participant.winner
							span Ocho
				.matchup
					.participants
						.participant
							span Dos
						.participant.winner
							span Shyuio
			.connector
				.merger
				.line
		.winners
			.matchups
				.matchup
					.participants
						.participant
							span Treis
						.participant.winner
							span Seis
				.matchup
					.participants
						.participant
							span Cuatro
						.participant.winner
							span Cinco
			.connector
				.merger
				.line
	section.round.semifinals
		.winners
			.matchups
				.matchup
					.participants
						.participant.winner
							span Uno
						.participant
							span Dos
				.matchup
					.participants
						.participant.winner
							span Seis
						.participant
							span Cinco
			.connector
				.merger
				.line
	section.round.finals
		.winners
			.matchups
				.matchup
					.participants
						.participant.winner
							span Uno
						.participant
							span Seis

style.sass

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,700'

$color-theme:				#488bf4
$color-heading:			#363636
$color-content:			#858585
$color-background:	#f0f2f2
$color-footer:			black
$color-news:				#4549a8
$color-community:		#dc563f
$color-release:			#60c645
$color-border:			#c0c0c8
$font-content:			"Roboto Slab", serif

html
	font-size: 1rem
body
	background: $color-background
.bracket
	display: inline-block
	position: absolute
	left: 50%
	top: 50%
	transform: translate(-50%, -50%)
	white-space: nowrap
	font-size: 0
	.round
		display: inline-block
		vertical-align: middle
		.winners
			& > div
				display: inline-block
				vertical-align: middle
				&.matchups
					.matchup
						&:last-child
							margin-bottom: 0 !important
						.participants
							border-radius: 0.25rem
							overflow: hidden
							.participant
								box-sizing: border-box
								color: $color-content
								border-left: 0.25rem solid $color-content
								background: white
								width: 14rem
								height: 3rem
								box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12)
								&.winner
									color: $color-release
									border-color: $color-release
								&.loser
									color: $color-community
									border-color: $color-community
								&:not(:last-child)
									border-bottom: thin solid $color-background
								span
									margin: 0 1.25rem
									line-height: 3
									font-size: 1rem
									font-family: "Roboto Slab"
				&.connector
					&.filled
						.line, &.bottom .merger:after, &.top .merger:before
							border-color: $color-release
					.line, .merger
						box-sizing: border-box
						width: 2rem
						display: inline-block
						vertical-align: top
					.line
						border-bottom: thin solid $color-border
						height: 4rem
					.merger
						position: relative
						height: 8rem
						&:before, &:after
							content: ""
							display: block
							box-sizing: border-box
							width: 100%
							height: 50%
							border: 0 solid
							border-color: $color-border
						&:before
							border-right-width: thin
							border-top-width: thin
						&:after
							border-right-width: thin
							border-bottom-width: thin
		&.quarterfinals
			.winners
				&:not(:last-child)
					margin-bottom: 2rem
				.matchups
					.matchup
						&:not(:last-child)
							margin-bottom: 2rem
						.participants
							.participant
		&.semifinals
			.winners
				.matchups
					.matchup
						&:not(:last-child)
							margin-bottom: 10rem
						.participants
							.participant
				.connector
					.merger
						height: 16rem
					.line
						height: 8rem
		&.finals
			.winners
				.matchups
					.matchup
						.participants
							.participant
				.connector
					.merger
						height: 3rem
					.line
						height: 1.5rem
		&.champion

n i c e