BCN CSS: Main

Dialog

em label (Open dialog 1)

Code

/* Dialog launcher inside #page */
<em><label for="modal-one">em label (Open dialog 1)</label></em>
/* Dialog outside #page */
<div>
	<input id="modal-one" type="checkbox" hidden>
	<dialog>
		<header>
			<h3>dialog header h3</h3>
			<p class="lead">dialog header p</p>
		</header>
		<div>
			<p>dialog div p</p>
		</div>
		<nav>
			<label for="modal-one">dialog nav label (close dialog)</label>
		</nav>
	</dialog>
</div>

em label (Open dialog 2 with overlay)

Code

/* Dialog launcher inside #page */
<em><label for="modal-two">em label (Open dialog 2 with overlay)</label></em>
/* Dialog outside #page */
<div>
	<input id="modal-two" type="checkbox" hidden>
	<label class="overlay" for="modal-two" hidden></label>
	<dialog>
			<label for="modal-two">x</label>
		<header>
			<h3>dialog header h3 (2)</h3>
			<p class="lead">dialog header p</p>
		</header>
		<div>
			<p>dialog div p</p>
		</div>
	</dialog>
</div>

Collapser

label em (open hidden div)

Code

<div class="collapser">
		<em><label for="a-2">label em (open hidden div)</label></em>
		<input type="checkbox" id="a-2" name="checkcollapser" hidden>
		<div hidden>
			div (previously hidden)
		</div>
</div>

label em (open hidden div) + mark

Code

<div class="collapser">
		<em><label for="c-2">label em (open hidden div) + mark<mark></mark></label></em>
		<input type="checkbox" id="c-2" name="checkcollapser-b" hidden>
		<div hidden>
			div (previously hidden)
		</div>
</div>

Accordion

ul li em label (open div 1) + mark
ul li em label (open div 2) + mark
ul li em label (open div 3) + mark

Code

<div class="accordion">
	<ul>
		<li>
			<em><label for="v-1">ul li em label (open div 1) + mark<mark></mark></label></em>
			<input type="radio" id="v-1" name="checkaccordion" hidden checked>
			<div hidden>
				ul li div (div 1)
			</div>
		</li>
		<li>
			<em><label for="v-2">ul li em label (open div 2) + mark<mark></mark></label></em>
			<input type="radio" id="v-2" name="checkaccordion" hidden>
			<div hidden>
				ul li div (div 2)
			</div>
		</li>
		<li>
			<em><label for="v-3">ul li em label (open div 3) + mark<mark></mark></label></em>
			<input type="radio" id="v-3" name="checkaccordion" hidden>
			<div hidden>
				ul li div (div 3)
			</div>
		</li>
	</ul>
</div>

Tabs

Code

<div class="tabs">
	<nav>
		<label for="tab-1">nav label (open div 1)</label>
		<label for="tab-2">nav label (open div 2)</label>
		<label for="tab-3">nav label (open div 3)</label>
	</nav>
	<ul>
		<li>
			<input type="radio" id="tab-1" name="tab-group" hidden checked>
			<div hidden>
				<p>ul li div (div 1)</p>
			</div>
		</li>
		<li>
			<input type="radio" id="tab-2" name="tab-group" hidden>
			<div hidden>
				<p>ul li div (div 2)</p>
			</div>
		</li>
		<li>
			<input type="radio" id="tab-3" name="tab-group" hidden>
			<div hidden>
				<p>ul li div (div 3)</p>
			</div>
		</li>
	</ul>
</div>

Alert

Show alert 1

Code

<div>
	<input type="checkbox" id="alert-1" name="alert-1" hidden>
	<aside class="alert">
		<label for="alert-1">x</label>
		<div>aside div</p></div>
	</aside>
</div>

Show alert 2

Code

<div>
	<input type="checkbox" id="alert-2" name="alert-2" hidden>
	<aside class="alert">
		<header>
			<h4>aside header h4</h4>
		</header>
		<div>
			<p>aside div p</p>
		</div>
		<footer>
			<p>aside footer p</p>
		</footer>
		<nav>
			<label for="alert-2">aside nav label (alert dismiss)</label>
		</nav>
	</aside>
</div>

Code

<div class="menu">
	<em><label for="menu-2">em label (open hidden div) + mark<mark></mark></label></em>
	<input type="checkbox" id="menu-2" name="menub" hidden>
	<label class="overlay-transparent" for="menu-2" hidden></label>
	<nav hidden>
		<ul>
			<li><a href="" title="">nav ul li a</a></li>
			<li><a href="" title="">nav ul li a</a></li>
			<li><a href="" title="">nav ul li a</a></li>
			<li><a href="" title="">nav ul li a</a></li>
		</ul>
	</nav>
</div>

em a.tooltip

em a.pophover

Code

<em><a href="" data-title="This is a tooltip!" class="tooltip">em a</a></em>
<em><a href="" data-title="This is a pophover!" class="pophover">em a</a></em>

Slider

Code

<div class="slider">
	<nav>
		<label for="carousel-1"></label>
		<label for="carousel-2"></label>
		<label for="carousel-3"></label>
	</nav>
	<ul>
		<li>
			<input type="radio" id="carousel-1" name="carousel" hidden checked>
			<div hidden>
				<img src="../src/img/picture-1.jpg" alt="picture 1">
				<label for="carousel-3"><</label>
				<label for="carousel-2">></label>
			</div>
		</li>
		<li>
			<input type="radio" id="carousel-2" name="carousel" hidden>
			<div hidden>
				<img src="../src/img/picture-2.jpg" alt="picture 2">
				<label for="carousel-1"><</label>
				<label for="carousel-3">></label>
			</div>
		</li>
		<li>
			<input type="radio" id="carousel-3" name="carousel" hidden>
			<div hidden>
				<img src="../src/img/picture-3.jpg" alt="picture 3">
				<label for="carousel-2"><</label>
				<label for="carousel-1">></label>
			</div>
		</li>
	</ul>
</div>

Flip

+

article header h3

article div p

Lorem ipsum dolor sit amet, lacus posuere posuere mi dui pharetra fermentum. Potenti sit egestas in a quis interdum, ipsum id ex luctus ligula, metus suspendisse est morbi. Libero ut est aliquet nunc molestie dignissim, cursus lorem dolor facilisi, rutrum nulla sem quis est donec porttitor, pulvinar ante aut convallis hendrerit purus, massa aenean bibendum blandit neque. Cras vivamus sed. Per purus risus tincidunt vivamus aptent, elit nec pellentesque lacus in earum nulla, sociis vitae dictum eu sapien ante. Non rhoncus quis in suspendisse, metus aliquet ultricies pede vestibulum turpis, et ad aenean tristique, vitae neque, platea nec vehicula gravida non. Phasellus massa, mi arcu nulla hymenaeos, ante feugiat. Pede in, tellus est, odio in, sodales fermentum cursus est eget amet, nec odio. Hendrerit diam amet, eget nunc amet eu laoreet, et pellentesque velit vestibulum vel, consectetuer pede semper ac vel, sed libero posuere ut. Libero sed dictum tellus molestie, nulla ante vel, proin tellus mi. Vestibulum leo aliquam in suspendisse varius proin. Vitae potenti accumsan, et curabitur vestibulum nulla ac ac wisi.

Code

<div class="flip">
	<input type="checkbox" id="flip-1" name="flipmode" hidden>
	<article>
		<label for="flip-1">+</label>
		<header>
			<h3>article header h3</h3>
		</header>
		<div>
			<p>article div p</p>
			<p>Lorem ipsum dolor sit amet, lacus posuere posuere mi dui pharetra fermentum. Potenti sit egestas in a quis interdum, ipsum id ex luctus ligula, metus suspendisse est morbi. Libero ut est aliquet nunc molestie dignissim, cursus lorem dolor facilisi, rutrum nulla sem quis est donec porttitor, pulvinar ante aut convallis hendrerit purus, massa aenean bibendum blandit neque. Cras vivamus sed. Per purus risus tincidunt vivamus aptent, elit nec pellentesque lacus in earum nulla, sociis vitae dictum eu sapien ante. Non rhoncus quis in suspendisse, metus aliquet ultricies pede vestibulum turpis, et ad aenean tristique, vitae neque, platea nec vehicula gravida non. Phasellus massa, mi arcu nulla hymenaeos, ante feugiat. Pede in, tellus est, odio in, sodales fermentum cursus est eget amet, nec odio. Hendrerit diam amet, eget nunc amet eu laoreet, et pellentesque velit vestibulum vel, consectetuer pede semper ac vel, sed libero posuere ut. Libero sed dictum tellus molestie, nulla ante vel, proin tellus mi. Vestibulum leo aliquam in suspendisse varius proin. Vitae potenti accumsan, et curabitur vestibulum nulla ac ac wisi.</p>
		</div>
	</article>
	<aside>
		<label for="flip-1">-</label>
		<header>
			<h3>aside header h3</h3>
		</header>
		<div>
			<p>aside div p</p>
		</div>
	</aside>
</div>

Smart (& responsive) nav

Code

<nav class="nav-smart">
	<div>
		<a class="site-logo" href="index.html" title="BCNCSS: Main">
			<img src="../src/ics/android-chrome-192x192.png" alt="BCNCSS logo">
		</a>
		<input type="checkbox" id="mobnavdemo" name="mobnavdemo" aria-hidden="true" hidden> 
		<strong><label for="mobnavdemo">Menú<mark></mark></label></strong>
		<div hidden>
			<a href="URL" title="TITLE">Link 1</a>
			<a href="URL" title="TITLE">Link 2</a>
			<a href="URL" title="TITLE">Link 3</a>
			<a href="URL" title="TITLE">Link 4</a>
			<a href="URL" title="TITLE">Link 5</a>
			<form action="http://www.google.com/cse"> 
				<input type="hidden" name="cx" value="GoogleCSEID"> 
				<input type="text" name="q" placeholder="cerca"> 
				<input type="submit" name="sa" value="·"> 
			</form>
		</div>
	 </div>
</nav>

Scroll nav

Code

						<nav class="nav-scroll">
							<div>
								<span>
									<a href="URL" title="TITLE">Link 1</a>
									<a href="URL" title="TITLE">Link 2</a>
									<a href="URL" title="TITLE">Link 3</a>
									<a href="URL" title="TITLE">Link 4</a>
									<a href="URL" title="TITLE">Link 5</a>
									<a href="URL" title="TITLE">Link 6</a>
									<a href="URL" title="TITLE">Link 7</a>
									<a href="URL" title="TITLE">Link 8</a>
									<form action="http://www.google.com/cse"> 
										<input type="hidden" name="cx" value="GoogleCSEID"> 
										<input type="text" name="q" placeholder="cerca"> 
										<input type="submit" name="sa" value="·"> 
									</form>
								</span>
							 </div>
						</nav>

Nav with menus

Code

<nav>
	<div>
		<a href="URL" title="TITLE">Link 1</a>
		<div class="menu">
			<label for="navmenu-1">Label 1<mark></mark></label>
			<input type="checkbox" id="navmenu-1" name="navmenu" hidden>
			<label class="overlay-transparent" for="navmenu-1" hidden></label>
			<nav hidden>
				<ul>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
				</ul>
			</nav>
		</div>
		<div class="menu">
			<label for="navmenu-2">Label 2<mark></mark></label>
			<input type="checkbox" id="navmenu-2" name="navmenu" hidden>
			<label class="overlay-transparent" for="navmenu-2" hidden></label>
			<nav hidden>
				<ul>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
				</ul>
			</nav>
		</div>
		<div class="menu">
			<label for="navmenu-3">Label 3<mark></mark></label>
			<input type="checkbox" id="navmenu-3" name="navmenu" hidden>
			<label class="overlay-transparent" for="navmenu-3" hidden></label>
			<nav hidden>
				<ul>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
					<li><a href="" title="">nav ul li a</a></li>
				</ul>
			</nav>
		</div>
		<form action="http://www.google.com/cse"> 
			<input type="hidden" name="cx" value="GoogleCSEID"> 
			<input type="text" name="q" placeholder="cerca"> 
			<input type="submit" name="sa" value="·"> 
		</form>
	 </div>
</nav>

Lightbox

Figure 1

Figure 2

Figure 3

Code

<figure>
	<a href="#lightbox-1" id="lightbox-1"><img src="../src/img/picture-11.jpg" alt="Picture"></a>
	<a href="#section-light-box" hidden>x</a>
	<figcaption>Figure 1</figcaption>
	<a href="#lightbox-3" hidden class="previous"><</a>
	<a href="#lightbox-2" hidden class="next">></a>
</figure>


<figure>
	<a href="#lightbox-2" id="lightbox-2"><img src="../src/img/picture-14.jpg" alt="Picture"></a>
	<a href="#section-light-box" hidden>x</a>
	<figcaption>Figure 2</figcaption>
	<a href="#lightbox-1" hidden class="previous"><</a>
	<a href="#lightbox-3" hidden class="next">></a>
</figure>


<figure>
	<a href="#lightbox-3" id="lightbox-3"><img src="../src/img/picture-13.jpg" alt="Picture"></a>
	<a href="#section-light-box" hidden>x</a>
	<figcaption>Figure 3</figcaption>
	<a href="#lightbox-2" hidden class="previous"><</a>
	<a href="#lightbox-1" hidden class="next">></a>
</figure>

Colors

txt-color-softyellow

txt-color-softorange

txt-color-softred

txt-color-softmagenta

txt-color-softviolet

txt-color-softblue

txt-color-softturquoise

txt-color-softgreen

txt-color-yellow

txt-color-orange

txt-color-red

txt-color-magenta

txt-color-violet

txt-color-blue

txt-color-turquoise

txt-color-green

txt-color-white

txt-color-softgrey

txt-color-grey

txt-color-hardgrey

txt-color-softblack

txt-color-black

bg-color-softyellow

bg-color-softorange

bg-color-softred

bg-color-softmagenta

bg-color-softviolet

bg-color-softblue

bg-color-softturquoise

bg-color-softgreen

bg-color-yellow

bg-color-orange

bg-color-red

bg-color-magenta

bg-color-violet

bg-color-blue

bg-color-turquoise

bg-color-green

bg-color-white

bg-color-softgrey

bg-color-grey

bg-color-hardgrey

bg-color-softblack

bg-color-black

Code

<div class="flex-grid-8">
	<section class="panel txt-color-softyellow"><p>txt-color-softyellow</p></section>
	<section class="panel txt-color-softorange"><p>txt-color-softorange</p></section>
	<section class="panel txt-color-softred"><p>txt-color-softred</p></section>
	<section class="panel txt-color-softmagenta"><p>txt-color-softmagenta</p></section>
	<section class="panel txt-color-softviolet"><p>txt-color-softviolet</p></section>
	<section class="panel txt-color-softblue"><p>txt-color-softblue</p></section>
	<section class="panel txt-color-softturquoise"><p>txt-color-softturquoise</p></section>
	<section class="panel txt-color-softgreen"><p>txt-color-softgreen</p></section>
</div>
<hr>
<div class="flex-grid-8">
	<section class="panel txt-color-yellow"><p>txt-color-yellow</p></section>
	<section class="panel txt-color-orange"><p>txt-color-orange</p></section>
	<section class="panel txt-color-red"><p>txt-color-red</p></section>
	<section class="panel txt-color-magenta"><p>txt-color-magenta</p></section>
	<section class="panel txt-color-violet"><p>txt-color-violet</p></section>
	<section class="panel txt-color-blue"><p>txt-color-blue</p></section>
	<section class="panel txt-color-turquoise"><p>txt-color-turquoise</p></section>
	<section class="panel txt-color-green"><p>txt-color-green</p></section>
</div>
<hr>
<div class="flex-grid-6">
	<section class="panel txt-color-white"><p>txt-color-white</p></section>
	<section class="panel txt-color-softgrey"><p>txt-color-softgrey</p></section>
	<section class="panel txt-color-grey"><p>txt-color-grey</p></section>
	<section class="panel txt-color-hardgrey"><p>txt-color-hardgrey</p></section>
	<section class="panel txt-color-softblack"><p>txt-color-softblack</p></section>
	<section class="panel txt-color-black"><p>txt-color-black</p></section>
</div>
<hr>

<div class="flex-grid-8">
	<section class="panel bg-color-softyellow"><p>bg-color-softyellow</p></section>
	<section class="panel bg-color-softorange"><p>bg-color-softorange</p></section>
	<section class="panel bg-color-softred"><p>bg-color-softred</p></section>
	<section class="panel bg-color-softmagenta"><p>bg-color-softmagenta</p></section>
	<section class="panel bg-color-softviolet"><p>bg-color-softviolet</p></section>
	<section class="panel bg-color-softblue"><p>bg-color-softblue</p></section>
	<section class="panel bg-color-softturquoise"><p>bg-color-softturquoise</p></section>
	<section class="panel bg-color-softgreen"><p>bg-color-softgreen</p></section>
</div>
<hr>
<div class="flex-grid-8">
	<section class="panel bg-color-yellow"><p>bg-color-yellow</p></section>
	<section class="panel bg-color-orange"><p>bg-color-orange</p></section>
	<section class="panel bg-color-red"><p>bg-color-red</p></section>
	<section class="panel bg-color-magenta"><p>bg-color-magenta</p></section>
	<section class="panel bg-color-violet"><p>bg-color-violet</p></section>
	<section class="panel bg-color-blue"><p>bg-color-blue</p></section>
	<section class="panel bg-color-turquoise"><p>bg-color-turquoise</p></section>
	<section class="panel bg-color-green"><p>bg-color-green</p></section>
</div>
<hr>
<div class="flex-grid-6">
	<section class="panel bg-color-white"><p>bg-color-white</p></section>
	<section class="panel bg-color-softgrey"><p>bg-color-softgrey</p></section>
	<section class="panel bg-color-grey"><p>bg-color-grey</p></section>
	<section class="panel bg-color-hardgrey"><p>bg-color-hardgrey</p></section>
	<section class="panel bg-color-softblack"><p>bg-color-softblack</p></section>
	<section class="panel bg-color-black"><p>bg-color-black</p></section>
</div>

◉