Remove caniemail- prefixes

hteumeuleu · May 5, 2020 · a849977 · a849977
1 parent a05269c
commit a849977
Show file tree

Hide file tree

Showing 27 changed files with 98 additions and 99 deletions.
diff --git a/_includes/beta.html b/_includes/beta.html
@@ -1,5 +1,5 @@
 <p class="beta-features">
-	<button type="button" class="beta-features-button caniemail-link-button" data-label-toggle="Disable estimated support">Enable estimated support</button> <span class="beta-tag">Beta</span>
+	<button type="button" class="beta-features-button link-button" data-label-toggle="Disable estimated support">Enable estimated support</button> <span class="beta-tag">Beta</span>
 	<noscript>
 		<style>.beta-features { display:none; }</style>
 	</noscript>

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,6 +1,6 @@
-<footer class="caniemail-footer" role="contentinfo">
-	<div class="caniemail-footer-section">
-		<h1 class="caniemail-footer-title">Can I email…</h1>
+<footer class="footer" role="contentinfo">
+	<div class="footer-section">
+		<h1 class="footer-title">Can I email…</h1>
 		<p>
 			Based on the original <a href="https://www.caniuse.com">caniuse.com</a> by <a href="https://twitter.com/Fyrd">@Fyrd</a> and designed by <a href="https://www.twitter.com/Lensco">@Lensco</a>.<br />
 			Also based on the original name and idea by <a href="https://twitter.com/M_J_Robbins">@M_J_Robbins</a> and the team at <a href="https://www.gorebel.com/">Rebel</a>.<br />
@@ -13,8 +13,8 @@ <h1 class="caniemail-footer-title">Can I email…</h1>
 			If you see something wrong, please <a href="https://github.com/hteumeuleu/caniemail/issues">report bugs on GitHub</a> or contact us on <a href="https://www.twitter.com/caniemail/">Twitter</a>.
 		</p>
 	</div>
-	<div class="caniemail-footer-section">
-		<h2 class="caniemail-footer-title">Site links</h2>
+	<div class="footer-section">
+		<h2 class="footer-title">Site links</h2>
 		<ul>
 			<li><a href="/">Home</a></li>
 			<li><a href="/features/">Feature index</a></li>
@@ -24,16 +24,16 @@ <h2 class="caniemail-footer-title">Site links</h2>
 			<li><a href="https://github.com/HTeuMeuLeu/caniemail">Caniemail on GitHub</a></li>
 		</ul>
 	</div>
-	<div class="caniemail-footer-section">
-		<h2 class="caniemail-footer-title">Legend</h2>
+	<div class="footer-section">
+		<h2 class="footer-title">Legend</h2>
 		<ol class="legend-list">
 			<li><span class="supported"></span> = Supported</li>
 			<li><span class="unsupported"></span> = Not supported</li>
 			<li><span class="mitigated"></span> = Partial support</li>
 			<li><span class="unknown"></span> = Support unknown</li>
 		</ol>
 		<p class="a11y-colors">
-			<button type="button" class="a11y-colors-button caniemail-link-button" data-label-toggle="Use default colors">Enable accessible colors</button>
+			<button type="button" class="a11y-colors-button link-button" data-label-toggle="Use default colors">Enable accessible colors</button>
 			<noscript>
 				<style>.a11y-colors { display:none; }</style>
 			</noscript>

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,5 @@
-<header class="caniemail-header" role="banner">
-	<div class="caniemail-menu">
+<header class="header" role="banner">
+	<div class="menu">
 	{% include navigation.html %}
 	{% include latest-post.html %}
 	</div>

diff --git a/_includes/latest-post.html b/_includes/latest-post.html
@@ -1,7 +1,7 @@
 {% for post in site.posts limit:1 %}
-<div class="caniemail-latest-post">
-	<span class="caniemail-latest-post-date">{{ post.date | date: '%B %d, %Y' }}</span>
-	<a href="{{ post.url }}" class="caniemail-latest-post-title">
+<div class="latest-post">
+	<span class="latest-post-date">{{ post.date | date: '%B %d, %Y' }}</span>
+	<a href="{{ post.url }}" class="latest-post-title">
 		{{ post.title | markdownify | remove: '<p>' | remove: '</p>' }}
 	</a>
 </div>

diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,5 +1,5 @@
-<nav class="caniemail-nav" role="navigation">
+<nav class="nav" role="navigation">
 	{% for item in site.data.navigation %}
-		<a href="{{ item.link }}" class="caniemail-tab{% if page.url == item.link %} current{% endif %}">{{ item.name }}</a>
+		<a href="{{ item.link }}" class="tab{% if page.url == item.link %} current{% endif %}">{{ item.name }}</a>
 	{% endfor %}
 </nav>
diff --git a/_includes/search.html b/_includes/search.html
@@ -1,11 +1,11 @@
-<div class="caniemail-search" role="search">
-	<form action="/search/" method="get" class="caniemail-search-form">
-		<label for="caniemail-search" class="caniemail-search-label">Can I email</label>
-		<span class="caniemail-search-input-container"><input type="search" class="caniemail-search-input" id="caniemail-search" name="s" spellcheck="false" value="" placeholder="HTML, CSS, &hellip;" {% if page.url == "/" %}autofocus{% endif %} /></span>
-		<span class="caniemail-search-question-mark" aria-hidden="hidden">?</span>
-		<span class="caniemail-search-actions">
+<div class="search" role="search">
+	<form action="/search/" method="get" class="search-form">
+		<label for="search" class="search-label">Can I email</label>
+		<span class="search-input-container"><input type="search" class="search-input" id="search" name="s" spellcheck="false" value="" placeholder="HTML, CSS, &hellip;" {% if page.url == "/" %}autofocus{% endif %} /></span>
+		<span class="search-question-mark" aria-hidden="hidden">?</span>
+		<span class="search-actions">
 			<noscript>
-				<button type="submit" class="button caniemail-search-button">Search</button>
+				<button type="submit" class="button search-button">Search</button>
 				<style>.settings-button { display:none; }</style>
 			</noscript>
 			<button type="button" class="button settings-button"><span class="icon icon--gear" aria-hidden="hidden"></span> Settings</button>

diff --git a/_js/_search.js b/_js/_search.js
@@ -5,8 +5,8 @@ class Search {
 		this.data = null;
 		this.term = null;
 		this.results = null;
-		this.input = document.querySelector('.caniemail-search-input');
-		this.form = document.querySelector('.caniemail-search');
+		this.input = document.querySelector('.search-input');
+		this.form = document.querySelector('.search');
 		this.origin = document.location.href;
 
 		if(this.input != null) {
@@ -66,11 +66,11 @@ class Search {
 	query() {
 
 		if(!this.data) {
-			this.form.classList.add('caniemail-search--loading');
+			this.form.classList.add('search--loading');
 		}
 
 		if(!this.term) {
-			this.form.classList.remove('caniemail-search--loading');
+			this.form.classList.remove('search--loading');
 			this.removeResultsMessage();
 			this.removeResultsContainer();
 			history.pushState({id:'search'}, 'search', `${this.origin}`);
@@ -94,7 +94,7 @@ class Search {
 				this.results = this.data.filter(feature => feature.slug.toLowerCase() === this.term.toLowerCase() || feature.title.toLowerCase().includes(this.term.toLowerCase()) || feature.keywords.toLowerCase().includes(this.term.toLowerCase()));
 			}
 
-			this.form.classList.remove('caniemail-search--loading');
+			this.form.classList.remove('search--loading');
 
 			if(this.results.length != 0 && this.results.length != previousResultsLength) {
 				this.buildResultsMessage(this.results.length);
@@ -115,18 +115,18 @@ class Search {
 
 	removeResultsMessage() {
 
-		let searchResultsMessage = document.querySelector('[role=search] form .caniemail-search-empty');
+		let searchResultsMessage = document.querySelector('[role=search] form .search-empty');
 		if(searchResultsMessage != null) {
 			searchResultsMessage.remove();
 		}
 	}
 
 	buildResultsMessage(n) {
 
-		let searchResultsMessage = document.querySelector('[role=search] form .caniemail-search-empty');
+		let searchResultsMessage = document.querySelector('[role=search] form .search-empty');
 		if(searchResultsMessage == null) {
 			let noResult = document.createElement('p');
-			noResult.classList.add('caniemail-search-empty');
+			noResult.classList.add('search-empty');
 			searchResultsMessage = document.querySelector('[role=search] form').appendChild(noResult);
 		}
 		let message = '';
@@ -143,24 +143,24 @@ class Search {
 
 	buildResultsContainer() {
 
-		if(document.querySelector('[role=main] .caniemail-search-results') == null) {
+		if(document.querySelector('[role=main] .search-results') == null) {
 			let container = document.createElement('div');
-			container.classList.add('caniemail-search-results');
-			container.id = 'caniemail-search-results';
+			container.classList.add('search-results');
+			container.id = 'search-results';
 			document.querySelector('[role=main]').prepend(container);
 		}
 	}
 
 	removeResultsContainer() {
 
-		if(document.querySelector('[role=main] .caniemail-search-results') != null) {
-			document.querySelector('[role=main] .caniemail-search-results').remove();
+		if(document.querySelector('[role=main] .search-results') != null) {
+			document.querySelector('[role=main] .search-results').remove();
 		}
 	}
 
 	buildResults() {
 
-		const container = document.querySelector('[role=main] .caniemail-search-results');
+		const container = document.querySelector('[role=main] .search-results');
 		container.querySelectorAll('section').forEach(section => {
 			if(this.results.filter(feature => feature.slug == section.getAttribute('data-slug')).length == 0) {
 				section.remove();

diff --git a/_js/caniemail.js b/_js/caniemail.js
@@ -21,8 +21,8 @@ class Caniemail {
 		const breakpointValueInRem = 801 / 16;
 		const mediaQuery = '(min-width:'+breakpointValueInRem+'rem)';
 		if(window.matchMedia(mediaQuery)) {
-			const menuLinks = document.querySelectorAll('.caniemail-menu a:not([href="/clients/"])');
-			const menuLastLink = document.querySelector('.caniemail-menu a[href="/clients/"]');
+			const menuLinks = document.querySelectorAll('.menu a:not([href="/clients/"])');
+			const menuLastLink = document.querySelector('.menu a[href="/clients/"]');
 			menuLinks.forEach(menuLinkItem => {
 				menuLinkItem.setAttribute('tabindex', '1');
 			});

diff --git a/_layouts/client.html b/_layouts/client.html
@@ -67,25 +67,25 @@ <h2 class="post-title"><span class="client-name">{{ site.data.nicenames.family[p
 			{% endif %}
 		{% endfor %}
 		{% if client-features-y != nil and client-features-y != "" %}
-			<h3 class="caniemail-list-title">{{ site.data.nicenames.support.supported }}</h3>
+			<h3 class="list-title">{{ site.data.nicenames.support.supported }}</h3>
 			<ul class="client-tags">
 			{{ client-features-y }}
 			</ul>
 		{% endif %}
 		{% if client-features-a != nil and client-features-a != "" %}
-			<h3 class="caniemail-list-title">{{ site.data.nicenames.support.mitigated }}</h3>
+			<h3 class="list-title">{{ site.data.nicenames.support.mitigated }}</h3>
 			<ul class="client-tags">
 			{{ client-features-a }}
 			</ul>
 		{% endif %}
 		{% if client-features-n != nil and client-features-n != "" %}
-			<h3 class="caniemail-list-title">{{ site.data.nicenames.support.unsupported }}</h3>
+			<h3 class="list-title">{{ site.data.nicenames.support.unsupported }}</h3>
 			<ul class="client-tags">
 			{{ client-features-n }}
 			</ul>
 		{% endif %}
 		{% if client-features-u != nil and client-features-u != "" %}
-			<h3 class="caniemail-list-title">{{ site.data.nicenames.support.unknown }}</h3>
+			<h3 class="list-title">{{ site.data.nicenames.support.unknown }}</h3>
 			<ul class="client-tags">
 			{{ client-features-u }}
 			</ul>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -29,7 +29,7 @@
 <body>
 	<div class="caniemail{{ page.name | remove: '.html' | slugify | default: 'default' | prepend: ' page--' }}">
 		{% include header.html %}
-		<main class="caniemail-main" role="main">
+		<main class="main" role="main">
 			{{ content }}
 		</main>
 		{% include footer.html %}

diff --git a/_layouts/feature.html b/_layouts/feature.html
@@ -126,7 +126,7 @@ <h4 class="data-platform-name">
 		{% if has-page-notes == true or page.notes_by_num.size > 0 or page.links.size > 0 %}
 		<div class="data-notes">
 			{% if has-page-notes == true or page.notes_by_num.size > 0 %}
-				<h2 class="caniemail-list-title">Notes</h2>
+				<h2 class="list-title">Notes</h2>
 				{% if has-page-notes == true %}
 				{{ page.notes | markdownify }}
 				{% endif %}
@@ -143,8 +143,8 @@ <h2 class="caniemail-list-title">Notes</h2>
 				{% endif %}
 			{% endif %}
 			{% if page.links.size > 0 %}
-				<h2 class="caniemail-list-title">Resources</h2>
-				<ul class="caniemail-list">
+				<h2 class="list-title">Resources</h2>
+				<ul class="list">
 				{% for link in page.links %}
 					{% assign link-title = link | first %}
 					{% assign link-url = link | last %}
@@ -157,7 +157,7 @@ <h2 class="caniemail-list-title">Resources</h2>
 		</div>
 		{% endif %}
 		<div class="data-contribute">
-			<h2 class="caniemail-list-title">Know something we don't?</h2>
+			<h2 class="list-title">Know something we don't?</h2>
 			<p>
 				Is any of the above data outdated? Or do you want to add a new email client to the list? Heads on to GitHub and edit the data file!
 			</p>
@@ -170,7 +170,7 @@ <h2 class="caniemail-list-title">Know something we don't?</h2>
 			</p>
 		</div>
 		<div class="data-test">
-			<h2 class="caniemail-list-title">Test it yourself</h2>
+			<h2 class="list-title">Test it yourself</h2>
 			{% if page.last_test_date != nil and page.last_test_date != "" %}
 			<p>
 				This feature was last tested on <b>{{ page.last_test_date | date: '%B %d, %Y' }}</b>.

diff --git a/_sass/_footer.scss b/_sass/_footer.scss
@@ -1,5 +1,5 @@
 // Footer
-.caniemail-footer {
+.footer {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -24,7 +24,7 @@
 	}
 }
 
-.caniemail-footer-section {
+.footer-section {
 	padding-bottom: rem(32px);
 	max-width: rem(640px);
 
@@ -43,7 +43,7 @@
 	}
 }
 
-.caniemail-footer-title {
+.footer-title {
 	margin-bottom: rem(12px);
 	color: #fff;
 	font-size: 1em;
@@ -73,7 +73,7 @@
 	min-width: rem(200px);
 }
 
-.caniemail-link-button {
+.link-button {
 	-webkit-appearance: none;
 	background: none;
 	border: none;

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -1,5 +1,5 @@
 // Header navigation
-.caniemail-menu {
+.menu {
 	position: relative;
 	display: flex;
 	flex-direction: row;
@@ -10,7 +10,7 @@
 	}
 }
 
-.caniemail-nav {
+.nav {
 	display: flex;
 	flex-direction: row;
 
@@ -23,7 +23,7 @@
 	}
 }
 
-.caniemail-tab {
+.tab {
 	margin-right: rem(8px);
 	padding: 0.25em 0.75em;
 	min-height: rem(40px);
@@ -67,7 +67,7 @@
 }
 
 // Latest post in header
-.caniemail-latest-post {
+.latest-post {
 	position: relative;
 	display: flex;
 	flex-grow: 1;
@@ -85,14 +85,14 @@
 	}
 }
 
-.caniemail-latest-post-date {
+.latest-post-date {
 	&::after {
 		content: '-';
 		margin: 0 0.5ch;
 	}
 }
 
-.caniemail-latest-post-title {
+.latest-post-title {
 	color: #fff;
 	text-decoration: none;
 	overflow: hidden;

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -7,6 +7,6 @@
 	margin: 0 auto;
 }
 
-.caniemail-main {
+.main {
 	flex: 1 0 auto;
 }
diff --git a/_sass/_lists.scss b/_sass/_lists.scss
@@ -1,6 +1,5 @@
-
 // Lists
-.caniemail-list-title {
+.list-title {
 	display: inline-block;
 	padding: 0.5em 0;
 	margin-bottom: 0.5em;
@@ -14,7 +13,7 @@
 	}
 }
 
-.caniemail-list {
+.list {
 	margin-left: rem(16px);
 
 	& > li {

diff --git a/_sass/_pages/_features.scss b/_sass/_pages/_features.scss
@@ -1,10 +1,10 @@
 // Features page
-.caniemail-list--features {
+.list--features {
 	column-count: 3;
 	column-width: rem(320px);
 	column-gap: rem(16px);
 
-	& + .caniemail-list-title {
+	& + .list-title {
 		margin-top: rem(48px);
 	}
 }