Téléchargement

télécharger

Utilisation du framework

Les fichiers à charger

le dossier assets

le dossier css

le dossier fonts

le dossier js

Optionnel

le dossier sass

Les pages de type standard avec menu responsive

								
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <title>iRoom | Accueil</title>
    <!--hack html5 ie8-->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--styles css-->
    <link rel="icon" href="assets/favicon.ico"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css"/>
    <!--balises meta-->
    <meta name="author" content="KRATZ Geoffrey"/>
    <meta name="description" content="BLA BLA BLA"/>
    <meta name="keywords" content="BLA, BLA, BLA"/>
    <meta name="robots" content="index, follow"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="animated link-animated">
   <div class="animation-loading"><div></div></div>
   
	<!-- enlever class animated du body pour désactiver et les divs au dessus -->
	
    <section class="site-container">
		<div class="site-pusher">
			<header class="header">
				<div id="nav-icon1">
				
				<!-- nav-icon{{ 1, 2 ou 3 }} suivant le menu choisi -->
				
					<span></span>
					<span></span>
					<span></span>
				</div>
				<a id="logo" href="index.html" title="retourner à l'accueil">iRoom</a>
				<nav role="navigation" class="menu">
				
				<!-- menu menu2 ou menu3 -->
				
				   <ul>
					<li class="active"><a href="#">home</a></li>
					<li>
						<a href="#">contact</a>
						<ul class="sub-menu">
							<li>
								<a>menu niveau 2</a>
								<ul>
									<li>
										<a>menu niveau 3</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					
					<!-- ... -->
					
				   </ul>
				</nav>
			</header>
			<main role="main" class="site-content">
				<div class="container">
					<!-- Le contenu du site -->
					
					<!-- ..... -->
					
					
					
					<!-- Le contenu du site -->
					<footer class="main-footer">
					<!-- Le pied-de-page du site -->
					
					<!-- ..... -->
					
					
					
					<!-- Le pied-de-page du site -->
					</footer>
				</div>
			</main>
			<div class="site-cache" id="site-cache"></div>
		</div>
	</section>
<script src="js/jquery.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="js/slider.min.js"></script>
<script src="js/custom.js"></script>
<div class="animation-link"></div>
   
	<!-- enlever class link-animated du body pour désactiver et les divs au dessus -->
	
<div id="scroll-to-top" class="btn-primary hidden"><i class="fa fa-chevron-up"></i></div>
</body>
</html>
							

Les pages de type pleine-page avec menu responsive

								
<section class="site-container full">

<!-- ... -->

</section>
							

système de colonnes

md-2 md-offset-4

md-6

                           		
<div class="row">
	<div class="md-2 md-offset-4">
		<p>md-2 md-offset-4</p>
	</div>
	<div class="md-6">
		<p>md-6</p>
	</div>
</div>
							

système de colonnes avec gouttières

md-2 md-offset-4

md-6

                           		
<div class="row-g">
	<div class="md-2 md-offset-4">
		<p>md-2 md-offset-4</p>
	</div>
	<div class="md-6">
		<p>md-6</p>
	</div>
</div>
							

système de colonnes inversées

colonne 1: lg-4 lg-push

colonne2: lg-8 lg-pull

                           		
<div class="row">
	<div class="lg-4 lg-push">
		<p>colonne 1: lg-4 lg-push</p>
	</div>
	<div class="lg-8 lg-pull">
		<p>colonne2: lg-8 lg-pull</p>
	</div>
</div>
							

système de listes-grilles

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

  • contenu du bloc

                           		
<ul class="no-padding block-sm-2 block-md-3 block-lg-6">
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
	<li>
		<p>contenu du bloc</p>
	</li>
</ul>
							

alignements de texte

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus soluta aliquam, saepe facilis error, expedita reiciendis quis rem. Voluptate debitis distinctio dicta laborum, quas consectetur, alias aliquid id doloribus iste. Facere quidem enim quibusdam tempore soluta nisi incidunt! Commodi ullam, magni eum cum! Amet non, doloribus iste repellendus itaque facere quibusdam culpa blanditiis quasi, sunt unde voluptate, enim, vitae mollitia. Quia suscipit possimus vitae nam nobis reiciendis deserunt sint at tempora accusamus impedit magni ad est earum non debitis qui magnam, a totam blanditiis in odio voluptatum cumque! Iusto, architecto!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae cupiditate autem minima quo aspernatur ducimus odio error nihil voluptates perspiciatis, eveniet pariatur, amet eaque recusandae doloremque, porro tenetur deleniti eligendi! Error facilis, vel, eos, nesciunt odio nam dolores animi numquam eaque corrupti, dignissimos! Consequuntur soluta suscipit aliquid error, recusandae aperiam ea quo, obcaecati sapiente, esse atque. Corrupti illum doloremque itaque! Voluptatem quod, aliquam officia similique inventore dolores distinctio non omnis praesentium modi harum eaque velit ab ullam, consequatur ad delectus excepturi maxime totam temporibus iusto vel? Obcaecati, eos in deleniti!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam rem laborum veritatis labore commodi, illo excepturi, neque vel quas expedita obcaecati, fuga placeat beatae porro dicta! Deleniti eos, necessitatibus similique. Laudantium neque veritatis ab totam ratione quibusdam id maxime in laboriosam omnis modi sint animi voluptas voluptate, a ipsum eligendi iste sequi rerum. Explicabo deserunt placeat velit est molestias aperiam. Ipsa voluptate rerum laboriosam, blanditiis labore, facere ullam dolorem, dolores, perferendis obcaecati officiis provident impedit adipisci! Explicabo pariatur, assumenda distinctio. Earum voluptatem, culpa ullam modi consequatur, dignissimos dolores molestiae quis?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur beatae ex excepturi at eligendi rem cumque. Modi obcaecati facilis rerum beatae quasi, voluptate incidunt at architecto, voluptatem fugiat voluptates. Voluptate dolorum harum laborum modi quod aut possimus! Iste dolor facere repellendus, repudiandae, fuga placeat, dignissimos corrupti dolore vitae mollitia consequuntur hic nobis, pariatur beatae eligendi neque quis. Dignissimos, inventore. Incidunt, veritatis, ducimus! Eaque doloribus harum, quod beatae, tempora voluptates laborum nesciunt nemo culpa, quo excepturi deserunt assumenda eum facilis quaerat temporibus, dolores? Officia tenetur non, ducimus animi expedita culpa.

                           		
<p class="text-left">lorem ...</p>
<p class="text-right">lorem ...</p>
<p class="text-center">lorem ...</p>
<p class="text-justify">lorem ...</p>
							

icônes (font icônes)

                           		
<ul class="list-style-none list-inline">
	<li><a href="" class="btn-primary"><i class="fa fa-user"></i></a></li>
	<li><a href="" class="btn-primary"><i class="fa fa-key fa-2x"></i></a></li>
	<li><a href="" class="btn-primary"><i class="fa fa-folder fa-3x"></i></a></li>
	<li><a href="" class="btn-primary"><i class="fa fa-search"></i></a></li>
	<li><a href="" class="btn-primary"><i class="fa fa-home"></i> home</a></li>
</ul>
                           

liste en ligne collée de boutons

                           		
<ul class="list-style-none list-glue">
	<li><a href="" class="btn-primary">défault</a></li>
	<li><a href="" class="btn-info">info</a></li>
	<li><a href="" class="btn-success">success</a></li>
	<li><a href="" class="btn-warning">warning</a></li>
	<li><a href="" class="btn-error">error</a></li>
</ul>
                           

liste en ligne de boutons animés

                           		
<ul class="list-style-none list-inline">
	<li>
		<a href="" class="button-animated"><span class="initial">Sign<br /> up</span><span class="over">It's<br />free!</span></a>
	</li>
	<li>
		<a href="" class="button-animated"><span class="initial">Sign<br /> up</span><span class="over">It's<br />free!</span></a>
	</li>
	<li>
		<a href="" class="button-animated"><span class="initial">Sign<br /> up</span><span class="over">It's<br />free!</span></a>
	</li>
</ul>
                           

formulaires flottants en ligne ou en ligne collée

                           		
<form class="form-glue float-right">

	<!-- ... -->
	
</form>
<form class="form-inline float-left">

	<!-- ... -->
	
</form>
<div class="clear-both"></div>
                           

effet hover standard avec fancybox

machin truc bidule
                           		
<figure class="image-conteneur">
	<img alt="machin truc bidule" src="assets/logo.png" class="full-width">
	<figcaption class="image-pardessus">
		<a class="fancybox" href="assets/logo.png">
			<span></span>
		</a>
		<p class="hidden">description de l'illustration</p>
	</figcaption>
</figure>
                           

effet hover animation

machin truc bidule

lorem ipsum dolor sit amet

                           		
<figure class="image-animation no-margin">
	<img alt="machin truc bidule" src="assets/logo.png">
	<figcaption>
		<p>lorem ipsum dolor sit amet</p>
	</figcaption>
</figure>
                           

filtres

web

print

web

print

                           		
<ul class="list-style-none list-inline">
	<li><a href="#" class="filters-button" data-filtre="all">tous</a></li>
	<li><a href="#" class="filters-button" data-filtre="web">web</a></li>
	<li><a href="#" class="filters-button" data-filtre="print">print</a></li>
</ul>
<div class="row-g">
	<div class="sm-4 filters-display web"><p>web</p></div>
	<div class="sm-4 filters-display print"><p>print</p></div>
	<div class="sm-4 filters-display web"><p>web</p></div>
	<div class="sm-4 filters-display print"><p>print</p></div>
</div>
                           

slider d'images

								
<div class="carousel owl-carousel owl-theme">
	<div class="item">
		<div class="lazyOwl" style="background-image: url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div class="lazyOwl" style="background-image: url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div class="lazyOwl" style="background-image: url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div class="lazyOwl" style="background-image: url(assets/logo.png)"></div>
	</div>
</div>
<div class="remonterApresSLider"></div>
							

slider d'articles

								
<div class="carousel-articles owl-carousel owl-theme">
	<div class="item itemBox html5">
	
	<!-- ... -->
	
	</div>
	<div class="item itemBox html5">
	
	<!-- ... -->
	
	</div>
	<div class="item itemBox html5">
	
	<!-- ... -->
	
	</div>
	<div class="item itemBox html5">
	
	<!-- ... -->
	
	</div>
</div>
							

slider avec miniatures

								
<div class="carousel-main owl-carousel owl-theme">
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
	<div class="item">
		<div data-image="assets/logo.png" class="lazyOwl" style="background-image:url(assets/logo.png)"></div>
	</div>
</div>
<div class="remonterApresSLider"></div>
							

faux effet parallax

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae recusandae iure fuga doloremque quidem, molestiae accusantium laudantium officiis inventore aliquid dolorum quasi sed quae, beatae aperiam quas. Illo, voluptate placeat. Earum nesciunt mollitia esse commodi, eligendi perferendis odio! Incidunt sapiente, nulla distinctio provident sunt assumenda aliquam aspernatur recusandae corporis. Quidem, eos magni error, distinctio expedita numquam aliquid tempore totam doloremque! Eos provident, dolore quam sint quod laboriosam, vel corporis aut sit quo necessitatibus amet praesentium iure voluptate, ad dolores aliquam facilis possimus eveniet animi vero error repellat maxime. Repudiandae, temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A sit ipsa itaque excepturi. Laboriosam itaque voluptatum sapiente, dolor totam doloribus rerum nam eum porro quisquam officia mollitia voluptate perspiciatis ipsum. Mollitia assumenda sed dolore laudantium facere nemo, itaque cumque similique vitae fugit delectus exercitationem perferendis cupiditate soluta non explicabo dolores fuga quis illum porro labore! Accusantium, dicta, accusamus! Harum, minus. Suscipit odio ratione blanditiis fugiat recusandae officiis praesentium veniam debitis ullam, nobis cupiditate corporis assumenda veritatis repudiandae voluptas officia dolorem nihil quae voluptates voluptatibus, obcaecati doloremque aliquid, eaque dicta numquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quis impedit laudantium inventore quam nostrum voluptatibus, minus fuga? Est, doloremque dolore fuga soluta magni, nihil molestias provident placeat aliquid excepturi! Iure non ad deserunt delectus inventore ratione quidem soluta molestias quis assumenda dolorem modi esse, error doloremque? Saepe nam eveniet aut dolorem molestias quis harum aspernatur? Minus atque porro nihil? Id aliquid sapiente aliquam reprehenderit, quaerat laboriosam, pariatur nihil repudiandae in illum quibusdam, ab quisquam perspiciatis quidem placeat eveniet! Soluta voluptatem consequuntur dolores sunt numquam laborum neque odio, earum obcaecati.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio numquam deleniti reprehenderit. Quos, obcaecati error. Minima, et voluptates architecto repellendus excepturi, optio ratione, nam numquam fuga, reprehenderit laborum vel. Deleniti laboriosam animi possimus dolorum asperiores obcaecati magnam, nulla, blanditiis illum recusandae quod quibusdam, veritatis numquam perspiciatis, minus perferendis reiciendis ipsa tempora maxime nisi sint amet doloremque vitae? Ad, itaque! Dignissimos asperiores eius iusto a neque mollitia impedit quaerat porro voluptatem facere ea incidunt aut architecto natus, voluptate modi dolore officiis possimus earum delectus sequi, perferendis animi aliquid. Magnam, minima!

                           		
<div class="parallax" style="background-image: url(assets/logo.png);">
	<div>
		<p>lorem ...</p>
		<p>lorem ...</p>
		<p>lorem ...</p>
		<p>lorem ...</p>
	</div>
</div>
                           

quelques conseils utiles

                           		

éditer sitemap.yml et robots.txt

balises sémantiques: header, footer, section, article, time, nav, aside, ...

types de champs de formulaires et attributs html5: required, min, max, scale, pattern, ...

microdonnees (utilisation de balises <meta> le cas échéant)

<article itemscope itemtype="http://schema.org/Article"> <header> <h1 itemprop="headline"></h1> </header> <img itemprop="image"/> <time itemprop="datePublished" datetime="yyyy-mm-dd">publié le d du m y</time> </article>

roles a attribuer a certaines balises:

main : définit le contenu principal d'un document

secondary : représente une section unique et secondaire du document, tel que l'heure, la météo ou autre module de ce genre

navigation : définit le menu de navigation du document. Typique de liens vers d'autres pages du site ou vers d'autres endroits de la page

banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...

contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...

definition : représente la définition d'un élément

note : correspond à une note entre parenthèse ou de bas de page

seealso : indique que l'élément contient des données contextuelles au contenu principal de la page

search : la section de recherche d'une page. Typiquement un formulaire de recherche

© 2017 iRoom framework - site réalisé par VsWeb