<commit_before><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>

	<link rel="stylesheet" href="lib/css/reveal.min.css">
	<link rel="stylesheet" href="lib/css/night.css" id="theme">
	<link rel="stylesheet" href="lib/css/solarized_dark.css">
	<!-- Printing and PDF exports -->
	<script>
		var link = document.createElement( 'link' );
		link.rel = 'stylesheet';
		link.type = 'text/css';
		link.href = window.location.search.match( /print-pdf/gi ) ? 'lib/css/pdf.css' : 'css/print/paper.css';
		document.getElementsByTagName( 'head' )[0].appendChild( link );
	</script>

	<style>
	.topic {
		margin: 50px 0 !important;
	}
	canvas, .game-help {
		position: fixed;
		bottom: -600px;
		z-index: 1;
		transition: 0.5s ease;
	}
	.show canvas {
		bottom: 0;
	}
	.game-help {
		font-size: 5em;
		background: #71c5cf;
		/*background: rgba(0,0,0,0.8);*/
		color: white;
		padding-top: 40px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.game-help {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}
	.show .game-help {
		opacity: 1;
		visibility: visible;
	}
	.reveal .main-title {
		font-size: 2.3em;
		text-transform: uppercase;
		margin-bottom: 50px;
	}
	.reveal .main-subtitle {
		margin-bottom: 150px;
	}
	code {
		/*font-size: 0.8em !important;*/
	}
	.reveal { font-size: 36px; }
	.reveal li {
		margin-top: 20px;
	}

	.reveal table {
		width: 100%;
	}
	.reveal table td {
		vertical-align: top !important;
	}
	.reveal pre code {
		max-height: 570px;
	}
	.code-container {
		font-size: 130% !important;
	}
	.grid {
		overflow: hidden;
	}
	.grid__item { float: left; }
	.half { width: 50%; }
	.bad { color: indianred!important; }
	.highlight-line,
	.highlight-code {
		color: white !important;
		background: #135768;
	}
	.highlight-line {
		display: inline-block;
		width: 100%;
	}
	.focus-letter {
		font-size: 1.5em !important;
		font-size: bold;
		color: #e7ad52;
	}
	.slider {
		position: relative;
		display: inline-block;
		height: 40px;
		min-width: 500px;
		margin: 25px auto !important;
	}
	.slider__track {
		border-radius: 10px;
		border: 5px solid #e7ad52 !important;
		background: white;
		height: 20px;
	}
	.slider__knob {
		background: #e7ad52;
		position: absolute;
		left: 20%;
		top: -0.2em;
		border-radius: 50%;
		width: 1.2em;
		height: 1.2em;
	}
	.slider__input { position: absolute; left: 100%;
		font-size: 1em;
		top: -7px;
		margin-left: 10px;
		width: 80px;
	}
	.pdf-link {
		position: fixed!important;
		bottom: 4px;
		right: 34px;
		font-size: 17px!important;
		z-index: 11;
		opacity: 0.5;
	}
	.pdf-link:hover {
		opacity: 1;
	}
	.reveal .controls {
		bottom: 20px;
	}
	</style>
</head>
<body>

	<div class="reveal">
		<div class="slides">

			<!-- <section>
				<h2 class="main-title"><pre>.commandments[for='efficient architecture'] {
	column-count: 10;
}</pre></h2>
				<h3>Yes CSS can have architecture too!</h4>
				<h4>
					<a href="http://kushagragour.in">Kushagra Gour</a><a href="http://twitter.com/chinchang457">@chinchang457</a>
				</h4>
			</section> -->

			<section>
				<h2 class="main-title">10<span style="vertical-align: text-top">*</span> commandments for efficient CSS architecture</h2>
				<h3 class="main-subtitle"><em>Yes, CSS can have architecture too!</em></h4>
				<h4>
					<a href="http://kushagragour.in">Kushagra Gour</a>&nbsp;&nbsp;<a href="http://twitter.com/chinchang457">@chinchang457</a>
				</h4>
				<small>*&nbsp;&nbsp;Conditions apply.</small>
			</section>

			<section>
				<section>
					<h2>/me</h2>
					<ul>
						<li>My name is <a><NAME></a>. Better know as <a>chinchang</a> on the web.</li>
						<li data-fragment-index="1" class="fragment" style="position: relative">I am from<br>
							<h2>Delhi, India</h2>
							<img class="fragment" data-fragment-index="2" src="assets/snake.png" width="200" style="position: absolut">
							<img class="fragment" data-fragment-index="3" src="assets/boy.png" style="position: absolut">
							<img class="fragment" data-fragment-index="2" src="assets/tiger.png" width="200" alt="TIGERS"  style="position: absolut">
						</li>
						<!-- <li class="fragment">We have started writing CSS there too.</li> -->
					</ul>
				</section>

				<section data-transition="linear" data-background-transition="slide">
					<h2>/me more</h2>
					<ul>
						<li>I am a Front-end developer at a wonderful startup called <span style="color:#EA2B2A;font-family: Garamond;">Wingify</span>.</p>
						</li>
						<li class="fragment">Open-source stuff like <a href="http://kushagragour.in/lab/hint">Hint.css</a> and <a href="http://kushagragour.in/lab/picssel-art/">piCSSel-art.</a></li>
					</ul>
				</section>
			</section>

			<section>
				<h2>Whats this talk about?</h2>
				<ul>
					<li class="fragment  slide-up">Some CSS goodies learnt from experience.</li>

					<li class="fragment  slide-up">Would help in better CSS architecture. Easy to understand and extend in future. No more <br><span class="focus-letter">C</span>areless <span class="focus-letter">S</span>tyle <span class="focus-letter">S</span>prinkling.</li>

					<li class="fragment  slide-up">First time speaking at a conference and that too at such a big one. Not really good at speaking & making presentations.</li>

					<li class="fragment  slide-up">// TODO: Add a game if slides don't complete. <br>Good at making games. Added a game we can all play together and have fun! Seriously!</li>
				</ul>
			</section>
<commit_msg>commit change<commit_after><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>

	<link rel="stylesheet" href="lib/css/reveal.min.css">
	<link rel="stylesheet" href="lib/css/night.css" id="theme">
	<link rel="stylesheet" href="lib/css/solarized_dark.css">
	<!-- Printing and PDF exports -->
	<script>
		var link = document.createElement( 'link' );
		link.rel = 'stylesheet';
		link.type = 'text/css';
		link.href = window.location.search.match( /print-pdf/gi ) ? 'lib/css/pdf.css' : 'css/print/paper.css';
		document.getElementsByTagName( 'head' )[0].appendChild( link );
	</script>

	<style>
	.topic {
		margin: 50px 0 !important;
	}
	canvas, .game-help {
		position: fixed;
		bottom: -600px;
		z-index: 1;
		transition: 0.5s ease;
	}
	.show canvas {
		bottom: 0;
	}
	.game-help {
		font-size: 5em;
		background: #71c5cf;
		/*background: rgba(0,0,0,0.8);*/
		color: white;
		padding-top: 40px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.game-help {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}
	.show .game-help {
		opacity: 1;
		visibility: visible;
	}
	.reveal .main-title {
		font-size: 2.3em;
		text-transform: uppercase;
		margin-bottom: 50px;
	}
	.reveal .main-subtitle {
		margin-bottom: 150px;
	}
	code {
		/*font-size: 0.8em !important;*/
	}
	.reveal { font-size: 36px; }
	.reveal li {
		margin-top: 20px;
	}

	.reveal table {
		width: 100%;
	}
	.reveal table td {
		vertical-align: top !important;
	}
	.reveal pre code {
		max-height: 570px;
	}
	.code-container {
		font-size: 130% !important;
	}
	.grid {
		overflow: hidden;
	}
	.grid__item { float: left; }
	.half { width: 50%; }
	.bad { color: indianred!important; }
	.highlight-line,
	.highlight-code {
		color: white !important;
		background: #135768;
	}
	.highlight-line {
		display: inline-block;
		width: 100%;
	}
	.focus-letter {
		font-size: 1.5em !important;
		font-size: bold;
		color: #e7ad52;
	}
	.slider {
		position: relative;
		display: inline-block;
		height: 40px;
		min-width: 500px;
		margin: 25px auto !important;
	}
	.slider__track {
		border-radius: 10px;
		border: 5px solid #e7ad52 !important;
		background: white;
		height: 20px;
	}
	.slider__knob {
		background: #e7ad52;
		position: absolute;
		left: 20%;
		top: -0.2em;
		border-radius: 50%;
		width: 1.2em;
		height: 1.2em;
	}
	.slider__input { position: absolute; left: 100%;
		font-size: 1em;
		top: -7px;
		margin-left: 10px;
		width: 80px;
	}
	.pdf-link {
		position: fixed!important;
		bottom: 4px;
		right: 34px;
		font-size: 17px!important;
		z-index: 11;
		opacity: 0.5;
	}
	.pdf-link:hover {
		opacity: 1;
	}
	.reveal .controls {
		bottom: 20px;
	}
	</style>
</head>
<body>

	<div class="reveal">
		<div class="slides">

			<!-- <section>
				<h2 class="main-title"><pre>.commandments[for='efficient architecture'] {
	column-count: 10;
}</pre></h2>
				<h3>Yes CSS can have architecture too!</h4>
				<h4>
					<a href="http://kushagragour.in"><NAME></a><a href="http://twitter.com/chinchang457">@chinchang457</a>
				</h4>
			</section> -->

			<section>
				<h2 class="main-title">10<span style="vertical-align: text-top">*</span> commandments for efficient CSS architecture</h2>
				<h3 class="main-subtitle"><em>Yes, CSS can have architecture too!</em></h4>
				<h4>
					<a href="http://ashish21798.github.io"><NAME></a>&nbsp;&nbsp;<a href="http://twitter.com/ashish21798">@ashish21798</a>
				</h4>
				<small>*&nbsp;&nbsp;Conditions apply.</small>
			</section>

			<section>
				<section>
					<h2>/me</h2>
					<ul>
						<li>My name is <a><NAME></a>. Better know as <a>ashishsingh21798</a> on the web.</li>
						<li data-fragment-index="1" class="fragment" style="position: relative">I am from<br>
							<h2>Ghazipur, India</h2>
							<img class="fragment" data-fragment-index="2" src="assets/snake.png" width="200" style="position: absolut">
							<img class="fragment" data-fragment-index="3" src="assets/boy.png" style="position: absolut">
							<img class="fragment" data-fragment-index="2" src="assets/tiger.png" width="200" alt="TIGERS"  style="position: absolut">
						</li>
						<!-- <li class="fragment">We have started writing CSS there too.</li> -->
					</ul>
				</section>

				<section data-transition="linear" data-background-transition="slide">
					<h2>/me more</h2>
					<ul>
						<li>I am a Front-end developer at a wonderful startup called <span style="color:#EA2B2A;font-family: Garamond;">Wingify</span>.</p>
						</li>
						<li class="fragment">Open-source stuff like <a href="http://ashishsingh21798.guithub.io/lab/hint">Hint.css</a> and <a href="http://ashishsingh21798.guithub.io/lab/picssel-art/">piCSSel-art.</a></li>
					</ul>
				</section>
			</section>

			<section>
				<h2>Whats this talk about?</h2>
				<ul>
					<li class="fragment  slide-up">Some CSS goodies learnt from experience.</li>

					<li class="fragment  slide-up">Would help in better CSS architecture. Easy to understand and extend in future. No more <br><span class="focus-letter">C</span>areless <span class="focus-letter">S</span>tyle <span class="focus-letter">S</span>prinkling.</li>

					<li class="fragment  slide-up">First time speaking at a conference and that too at such a big one. Not really good at speaking & making presentations.</li>

					<li class="fragment  slide-up">// TODO: Add a game if slides don't complete. <br>Good at making games. Added a game we can all play together and have fun! Seriously!</li>
				</ul>
			</section>

{'fraction_non_alphanumeric': 0.17710602759622368, 'fraction_numerical': 0.03195352214960058, 'mean_word_length': 3.3700912336374453, 'pattern_counts': {'":': 0, '<': 237, '<?xml version=': 0, '>': 237, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2811773', 'n_tokens_mistral': 4917, 'n_tokens_neox': 4125, 'n_words': 949}