CSS Grid: Periodic Table

css-grid-periodic-table.markdown

CSS Grid: Periodic Table

My very first CSS Grid Experiment!

So I can't actually group them together in a cluster like an actual periodic table or it wouldn't make sense or would look too forced 😔

One of my fondest memories of 2018 is when I found the resolve to deactivate Facebook, only to have my team lead tell me I'm in charge of Facebook ads a week later. No escape from Zuckerberg!

A Pen by Olivia Ng on CodePen.

License.

index.pug

h1 My Internet Periodic Table
h5 How I waste my time on the Internet
			
div.periodic-table
	.empty-spacer-1
	.empty-spacer-2
	.periodic-element.social-media(data-description="I'm only on here to reject invitations 😂")
		.periodic-element-inner
			.title Li
			.description LinkedIn
	.periodic-element.social-media(data-description="Only so I don't miss out on my friends' milestones 🤷")
		.periodic-element-inner
			.title Fb
			.description Facebook
	.periodic-element.just-trying(data-description="Looking at amazing Dribbble 🏀 shots and internally die from the amount of talent/skill out there")
		.periodic-element-inner
			.title Db
			.description Dribbble
	.periodic-element.intense-work(data-description="Coming up with sassy commit messages 🔥")
		.periodic-element-inner
			.title Ct
			.description Commits
	
	.periodic-element.intense-work(data-description="Making custom emojis for Slack 💪🏻")
		.periodic-element-inner
			.title Sl
			.description Slack
	.periodic-element.fun-stuff(data-description="'Wikipedia Wormhole' is a thing. And it is dangerous 🐛")
		.periodic-element-inner
			.title Wk
			.description Wikipedia
	.periodic-element.fun-stuff(data-description="Choosing the right playlist. (If my Spotify is working... it's always not working)")
		.periodic-element-inner
			.title Sp
			.description Spotify
	a.periodic-element.social-media(data-description="If you say something witty, it's going on my Twitter 🐦" href="https://twitter.com/meowlivia_" target="_blank")
		.periodic-element-inner
			.title Tw
			.description Twitter
	.periodic-element.social-media(data-description="Professional Dota 2 Watcher right here ✌️")
		
		.periodic-element-inner
			.title Tc
			.description Twitch
	.periodic-element.intense-work(data-description="Creating GitHub issues, a.k.a. tossing problems which I can solve to the frontend team")
		.periodic-element-inner
			.title Gt
			.description GitHub
	.periodic-element.intense-work(data-description="Trying to get yarn working after an update. The main reason I toss issues to the frontend team.")
		.periodic-element-inner
			.title Yn
			.description Yarn
	.periodic-element.just-trying(data-description="A skill I'm trying to learn 🎨... and failing to learn 😛")
		.periodic-element-inner
			.title Il
			.description Illustration
	a.periodic-element.just-trying(data-description="Resident Designer. Keeping the diminishing flame of web design in me alive 🕯️" href="https://tellystats.com" target="_blank")
		.periodic-element-inner
			.title Te
			.description TellyStats
	
	.periodic-element.just-trying(data-description="I just need to stop adding items and actually start doing things. Am I the only one who is still using Wunderlist? 😂")
		.periodic-element-inner
			.title Wu
			.description Wunderlist
	.periodic-element.fun-stuff(data-description="I have zero cooking skills, so I watch cooking videos and never try cooking for real 🍳")
		.periodic-element-inner
			.title Cv
			.description Cooking
	.periodic-element.fun-stuff(data-description="Or any animal gifs, basically. 🐈🐕🦊🦔🦉🐍🐬🦄")
		.periodic-element-inner
			.title Dg
			.description Dog Gifs
	a.periodic-element.fun-stuff(data-description="Getting distracted by Toggl comics 🙃" href="https://blog.toggl.com" target="_blank")
		.periodic-element-inner
			.title Tg
			.description Toggl Blog
	.periodic-element.just-trying(data-description="I google every damn thing. Including movie spoilers. While watching the movie. Yes.")
		.periodic-element-inner
			.title Gg
			.description Google
	a.periodic-element.just-trying(data-description="I like spreadsheets so I create them for the smallest reasons 🧐" href="https://docs.google.com/spreadsheets/d/1Dim2nKRjgpkjA4miqTzcLPT68L0B5LU2aWZWF5hHYAc/edit#gid=0" target="_blank")
		.periodic-element-inner
			.title Ex
			.description Excel
	.periodic-element.intense-work(data-description="I still StackOverflow the simplest shit 'just to be sure'. Where will we be without it ❤️")
		.periodic-element-inner
			.title So
			.description StackOv.
	.periodic-element.intense-work(data-description="It's very much not my job, but sometimes I stick my hand into the Coding Projects jar 🍪 anyway")
		.periodic-element-inner
			.title Cd
			.description Coding
	
	.periodic-element.just-trying(data-description="I spend so much time on Codepen, I decided to go Pro because I felt bad 💸")
		.periodic-element-inner
			.title Cp
			.description Codepen
	.periodic-element.just-trying(data-description="We all have that one thing that keeps us alive 🛫🗺️")
		.periodic-element-inner
			.title Tr
			.description Travel
	a.periodic-element.social-media(data-description="Fuck this app. It's a terrible love-hate relationship." href="https://www.instagram.com/meowliviaaa/" target="_blank")
		.periodic-element-inner
			.title In
			.description Instagram
	a.periodic-element.fun-stuff(data-description="Obsessing over musicals and stalking broadway stars is 👏🏻 not 👏🏻 a 👏🏻 crime!" href="https://codepen.io/collection/XPWkdW/" target="_blank")
		.periodic-element-inner
			.title Mu
			.description Musicals
	.periodic-element.fun-stuff(data-description="I learn memes, I make memes, I breathe memes.")
		.periodic-element-inner
			.title Me
			.description Memes
	.periodic-element.intense-work(data-description="Battling double columns in Notion")
		.periodic-element-inner
			.title No
			.description Notion
	.periodic-element.social-media(data-description="Oh my god. Someone please save me from this Reddit hell hole 😭")
		.periodic-element-inner
			.title Re
			.description Reddit
	
	.periodic-element.intense-work(data-description="Research & Documentation nobody asks for 🤓📝")
		.periodic-element-inner
			.title Rd
			.description Research
	.periodic-element.intense-work(data-description="Stats. Data. Stats. Data. 📊 Just lots of reporting.")
		.periodic-element-inner
			.title St
			.description Stats
	.periodic-element.intense-work(data-description="Ads. Ads. Ads. If you've seen a Toggl ad, it was me. (Sorry)")
		.periodic-element-inner
			.title Ad
			.description Ads
	
			
.legend-table
	.legend-table__wrapper
		span.legend-table__marker.social-media
		span.legend-table__text Social Media
		span.legend-table__marker.intense-work
		span.legend-table__text Serious Work
		span.legend-table__marker.just-trying
		span.legend-table__text Personal Development
		span.legend-table__marker.fun-stuff
		span.legend-table__text Fun Stuff
		br
		div.legend-table__direction
			span →   Across the table: Importance
		div.legend-table__direction
			span ↓   Down the table: Time Spent

aside.context
	.explanation
		| I try to be productive a lot, and I fail a lot :)
		br
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons

script.js

//not responsive because how do you make a responsive periodic table 😳

style.scss

body {
	background: #202e38;
	font-family: "Poppins", sans-serif;
}

h1 {
	margin: 2em auto 0;
	font: 700 3em "Poppins", sans-serif;
	color: #f1f5f6;
	text-align: center;
}

h5 {
	margin: 0 auto 2em;
	font: 400 1.3em "Poppins", sans-serif;
	color: #f1f5f6;
	text-align: center;
}

a {
	text-decoration: none;
}

aside.context {
	text-align: center;
	color: #fff;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
	}
	.explanation {
		max-width: 700px;
		margin: 4em auto 0;
	}
}

footer {
	text-align: center;
	margin: 2em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

@mixin background-gradient($color1, $color2) {
	background: linear-gradient(to bottom right, $color1 0%, $color2 100%);
}

@mixin text-gradient($color1, $color2) {
	background: -webkit-linear-gradient($color1, $color2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.periodic-table {
	display: grid;
	grid-template-columns: repeat(9, 100px);
	grid-template-rows: repeat(4, 100px);
	grid-gap: 10px;
	margin: auto;
	max-width: 1200px;
	justify-content: center;
}

.periodic-element {
	padding: 4px;
	position: relative;
	z-index: 1;
	cursor: default;
	transition: all 0.3s ease;
	.periodic-element-inner {
		background: #202e38;
		padding: 10px 15px;
		width: calc(100% - 30px);
		height: calc(100% - 20px);
		transition: inherit;
	}
	.title {
		font: 700 34px/1.3 "Poppins", sans-serif;
		margin: 0.3em 0 0;
		transition: 0.8s ease 600ms;
	}
	.description {
		font: 500 12px "Poppins", sans-serif;
		margin-top: -0.2em;
	}
	&:after {
		z-index: 10;
		content: attr(data-description);
		background: #f9f8f7;
		color: #333;
		width: 180px;
		position: absolute;
		top: 80%;
		opacity: 0;
		transition: opacity 0.3s ease 0.3s,
			top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
		height: auto;
		font-size: 12px;
		line-height: 1.4;
		padding: 10px;
		margin: 0 0 0 -50px;
		border-radius: 6px;
		text-align: center;
	}
	&:hover {
		transform: scale(1.12);
		z-index: 10;
		.periodic-element-inner {
			background: transparent;
		}
		.title,
		.description {
			-webkit-text-fill-color: #222;
		}
		&:after {
			top: 105%;
			opacity: 1;
		}
	}
}

a.periodic-element {
	cursor: pointer;
}

.social-media {
	@include background-gradient(#f3f9a6,#cbc634);
	.title,
	.description {
		@include text-gradient(#f3f9a6,#cbc634);
	}
}

.fun-stuff {
	@include background-gradient(#ff616d,#ffc171);
	.title,
	.description {
		@include text-gradient(#ff616d,#ffc171);
	}
}

.just-trying {
	@include background-gradient(#37cfdc,#5a88e5);
	.title,
	.description {
		@include text-gradient(#37cfdc,#5a88e5);
	}
}

.intense-work {
	@include background-gradient(#58ac30,#a7df62);
	.title,
	.description {
		@include text-gradient(#58ac30,#a7df62);
	}
}

.legend-table {
	padding: 15px;
	text-align: center;
	font-size: 15px;
	margin: 2em auto 0;
	&__marker {
		width: 25px;
		height: 25px;
		margin: 5px 5px 10px;
		display: inline-block;
		vertical-align: middle;
		box-shadow: 0.5px 1px rgba(0, 0, 0, 0.15);
	}
	&__text {
		display: inline-block;
		vertical-align: middle;
		margin: 0 25px 5px 5px;
		@include text-gradient(#ccc,#eee);
	}
	&__direction {
		display: inline-block;
		margin: 10px 15px 10px 10px;
		@include text-gradient(#ccc,#eee);
	}
}

.empty-spacer {
		&-1 {
		grid-column: 3 / span 4;
		grid-row: 1;
	}
	&-2 {
		grid-column: 1;
		grid-row: 4;
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />