[Bootstrap 3 ] Un magnifique Template vraiment responsive, avec une sidebar et un barre des tâches .

createiveL’agence Creative TIM

Introduction


Je m’étais égaré ces derniers temps en ne faisant pas assez attention au responsive, ainsi qu’au look de mes apps.

J’ai trouvé un Theme vraiment responsive cette fois ci, avec un look vraiment vraiment sympa par contre c’est pas du bootstrap 4.0.

C’est l’agence CREATIVE TIM qui a des templates vraiment monstrueux en Bootstrap, Matérial et des Widgets !!

J’utiliserais cette base désormais en permanence pour mes futures apps, qui comporte une sidebar qui se contracte parfaitement (togle),et une barre haute.

Lorsque l’on rapetisse l’écran, les panels se contractent parfaitement. j’ai déjà commencé à rajouter et tester des boutons et panels, et je vais rajouter un agenda , et des graphiques qu’on peux changer à la main, et des sliders et des maps, pour bien tester le tout une bonne fois pour toute et que ça passe sur téléphone 5pouces . j’ai testé hier sur un SAMSUNG GALAXY, c’est IMPECCABLE !! Incroyable ! Le template est 100 % parfait sur écran 22 pouces ET sur un téléphone 5 pouces sans rien faire !

Je n’utiliserais plus Material que je ne trouve pas aussi facile que Bootstrap (Voir rdvjuristes ou je galère). Par contre l’agence CREATIVE TIM à un super template Material CSS !

Photo du template


template.jpg

Le lien du template :


http://nicolash.org/db/dashboard.html

[Css Exo 54] Fullpage.js

Introduction


Le canevas de base pour créer de simples sites scrollables.

Ou trouver ?


Taper Fullpage.js dans Google.

Un exemple ?


 

Cliquer ici

Code :


 


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="bower_components/fullpage.js/dist/jquery.fullpage.css" />
	<script src="bower_components/jquery/dist/jquery.min.js"></script>

	<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
	<!-- <script src="vendors/jquery.easings.min.js"></script>
	 -->
	<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
	<!-- <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> -->
	<script type="text/javascript" src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
	<link rel="stylesheet" type="text/css" href="example3.css?v=3" />
	<script src="jquery.easings.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#fdeadc', '#f9c8ac', '#fdeadc', 'whitesmoke', '#f9c8ac'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
				menu: '#menu',
				css3: true,
				scrollingSpeed: 500
			});

			$('#showExamples').click(function(e){
				e.stopPropagation();
				e.preventDefault();
				$('#examplesList').toggle();
			});

			$('html').click(function(){
				$('#examplesList').hide();
			});
		});
	</script>
</head>


<body>

<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Première section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Deuxième Section</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Troisième section</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">4ème</a></li>
</ul>


<div id="fullpage">

    <div class="section active" id="section0">
        <h1>fullPage.js</h1>
        <h2>Create Beautiful Fullscreen Scrolling Websites</h2>
       

    </div>
    <div class="section" id="section1">
        <div class="slide active">
            <div class="intro">
                <h1>Create Sliders</h1>
                <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
              
            </div>

        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Simple</h1>
                <p>Easy to use. Configurable and customizable.</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Cool</h1>
                <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
               
                <h1>Compatible</h1>
                <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Easy to use plugin</h1>
            <p>HTML markup example to define 4 sections.</p>
           
        </div>
    </div>
    <div class="section" id="section3">
        <div class="intro">
            <h1>Working On Tablets</h1>
            <p>
                Designed to fit to different screen sizes as well as tablet and mobile devices.
                <br /><br /><br /><br /><br /><br />
            </p>
        </div>
      
    </div>
</div>

<div id="infoMenu">
    <ul>
        <li><a href="https://goo.gl/HuFudq">Wordpress theme</a></li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js/archive/master.zip">Download</a></li>
        <li>
            <a href="#" id="showExamples">Examples</a>
            <div id="examplesList">
                <div class="column">
                    <h3>Navigation</h3>
                    <ul>
                    <li><a href="examples/scrollBar.html">Scroll Bar Enabled</a></li>
                    <li><a href="examples/normalScroll.html">Normal scrolling</a></li>
                    <li><a href="examples/continuous.html">Continuous vertical</a></li>
                    <li><a href="examples/noAnchor.html">Without anchor links (same URL)</a></li>
                    <li><a href="examples/navigationV.html">Vertical navigation dots</a></li>
                    <li><a href="examples/navigationH.html">Horizontal navigation dots</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Design</h3>
                    <ul>
                        <li><a href="examples/responsive.html">Responsive</a></li>
                        <li><a href="examples/backgrounds.html">Full backgrounds</a></li>
                        <li><a href="examples/videoBackground.html">Full background videos</a></li>
                        <li><a href="examples/autoHeight.html">Auto-height sections</a></li>
                        <li><a href="examples/gradientBackgrounds.html">Gradient backgrounds</a></li>
                        <li><a href="examples/scrolling.html">Scrolling inside sections and slides</a></li>
                        <li><a href="examples/fixedHeaders.html">Adding fixed header and footer</a></li>
                        <li><a href="examples/oneSection.html">One single section</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Other</h3>
                    <ul>
                        <li><a href="examples/apple.html">Animations on scrolling</a></li>
                        <li><a href="examples/callbacks.html">Callbacks</a></li>
                        <li><a href="examples/methods.html">Functions and methods</a></li>
                    </ul>
                </div>
            </div>

        </li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js#fullpagejs">Documentation</a></li>
        <li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
    </ul>
</div>
</body>






	

[Css] Utiliser un templates Css d’Administration moderne et responsive pour créer une application(Partie 2 AngularJs).

IntroductionWB0P6NR1N


Finalement, suite au premier article, j’ai trouvé le meilleur template pour mon cas, je pense, avec sb admin 2.

C’est un pure template open source fait en ANGULARJS, avec du routing de vues, du lazy loading, des directives, mais très bien fait et structuré.

Pleins d’atouts : Le lazy loading de librairies Angular qui fait qu’on charge une grosse librairie annexe, seulement lors du click sur une vue qui impose cela dans le router. Si je clique sur le menu »Graphiques », alors la librairie Charts.JS est chargée. De ,ce fait, tout le site est plus rapide.

Les css sont hyper bien fait, et décris. Ca passe hyper bien sur mobile( Revérifié aujourd’hui, oui c’est le top sur un 5 pouces !).

Dorénavant, je créerais tous mes exercices la dessus,le look est trop bon.

 Description sommaire


Faut l’installer carrément avec NPM, qui installe ensuite les libs via BOWER, au final le tout pèse 8MO librairies annexes comprises.

Ensuite, on a un index.html classique, des vues, des directives et des controllers. Pour les css, il ne faut jamais créer les siens, mais toujours utiliser au maximum les css du template, il faut donc repérer leurs noms dans class= »laClasseDuCss » dans une vue HTML.

Dans le fichier scripts/app.js, on retrouve le routing avec le lazy loading des libriaires et chaque controleur dédié par vue, c’est simple une fois qu’on a compris.

La partie légèrement plus compliquée est les directives, mais une fois qu’on a compris, on peut y injecter des variables et aussi des fonctions personnalisées, qui peuvent se répéter à l’infini. Les directives sont comme un mini-template HTML que l’on peut répéter à loisir dans le HTML, entre des balises personnalisées.

Le testing :


Pour tester le template déja modifié sur mon serveur, cliquer sur ce lien.

Une autre version plus simple :

Quelqu’un a réalisé une version plus à tester :
https://github.com/rcaferraz/startbootstrap-sb-admin-2/tree/angularmod

[Css] Utiliser un templates Css d’Administration moderne et responsive pour créer une application.

template.pngIntroduction


On tends forcément à trouver des méthodes plus rapides, modernes et efficaces pour construire une application « onePage » sérieuse, susceptible, qui sait, d’être vendues un jour à un public Francophone qui compte tout de même près de 400 000 000 de personnes. Cela peut être un rêve, mais qui sait peut être un jour se réaliser.

Lorsque se pose la question du Design de notre future Application, on a beau être fort en Css, des thêmes existent qui feront souvent mieux que ce que l’on fait, et ont l’avantage d’être dispos en téléchargement, parfois gratuitement.

 

Sommaire


  1. Introduction(suite)
  2. Méthode d’utilisation et de modification
  3. Tour d’Horizon des templates
  4. Testing en temps réel et modification

 

Introduction (Suite)


Du coup, pourquoi passer des heures à essayer de créer un template responsive? Cela n’a pas forcément de sens, alors qu’il existe des tas de modèles très esthétiques sur Internet . Dans le cadre d’un Projet comportant un graphe MPM et un diag de Gantt, on a pas envie d’exploser nos délais(D’ailleurs on ne peut pas,lol). Ré-inventer la roue n’a pas d’intérêt hormis l’autoflagellation..

Certes, notre application n’utilisera pas forcément ce que les élèments du template propose, car ce sont des solutions lambda. En l’occurrence, notre application sera hautement spécialisée, et devra proposer des solutions inédites et des calculs complexes, mais ça, c’est la partie fonctionnelle et technique du projet.

Le pré-requis est que notre template CSS propose un look très sympathique à notre future application orientée professionnelle, et qu’elle s’adapte automatiquement aux  matériels mobiles. A noter que les templates que j’ai repéré semblent aussi faire carrément office de framework UI (Avec des boutons spéciaux, des dropdowns etc …) .

Mon langage étant AngularJs +Firebase +PhpSql, j’essaye à fond d’éviter Jquery, cependant , énormément de templates l’incluents d’office.

Une dernière note, payer un template est très envisageable, dans la mesure ou le gain de temps est fortement appréciable.

Mais quelle est la méthode pour les utiliser ?


On télécharge le template, puis on farfouille dans le code pour placer du code AngularJS là ou il faut ! Il faut donc bien connaitre comment fonctionnent les CSS, les DIV et comment gérer les librairies et se repérer dans le code pré-existant.

Il faut repérer les noms des classes CSS du template, et surtout éviter de créer les siennes ! En effet, les css du concepteur du template seront forcément mieux fait la plupart du temps et respectent les normes.

Si on veut faire du Mvc avec AngularJs par dessus, cela ne pose pas de problèmes bien sur.

Dans mon cas, le prérequis est donc de savoir coder en AngularJS+Firebase noSql

dashy

Voici mes 3 choix pour ma future application TIP TOP CRM  :


  • AdminLte2 : Un « Dashboard » gratuit qui contient pleins de superbes élèments UI et un calendrier, malheureusement, Jquery est omniprésent, a analyser donc, si on peut le manipuler rapidement et arriver à bien en tirer partie.
  • Xenon : Un Dashboard avec AngularJS à visualiser ici :
  • Monarch, un autre Dashboard angularJs responsive

http://dashy.strapui.com/angular/?utm_source=startangular&utm_medium=startangular&utm_campaign=StrapUI#/dashboard/profile

le testing et la modification en live de AdminLte2  sur mon serveur :

Pour tester le template, cliquer ici .

Modifier le design de tous les boutons d’un site

Introduction

Voici une méthode pour modifier le design de tous les boutons d’un site Web.

Comment faire ?

Etape 1: 

trouver un générateur de Css sur internet :

http://css3buttongenerator.com/

ou

http://www.bestcssbuttongenerator.com/#/Y9mh0kYQ7a

Etape 2 : Désigner le boutton puis copier coller le code généré sur la page du générateur

Exemple :


.button {
-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
background-color:#768d87;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
background-color:#6c7c7c;
}
.button:active {
position:relative;
top:1px;
}

Etape 3 : Coller le précédent dans le fichier style.css du site Web.

Etape 4  : Affecter la classe .button à tous les bouttons comme ceci (exemple):


<button class="button" type="button" id="enregistrerEtudiant" style="margin-left:50px" name="subscribeForm" >Enregistrer sa Fiche </button>

Résultat :

btn

vd