<p>Comment obtenir une grille façon Masonry avec très peu de CSS?</p>
<p>C'est très simple, il suffit de définir une propriété column-count au parent.<br />
Un exemple ici avec des DIV, des balises de type block</p>
<p> </p>
<div class="masonry-parent" style="-moz-column-count: 4; -webkit-column-count: 4; column-count: 4; column-gap: 20px;">
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span style="background-color:rgb(221, 221, 221)">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span style="background-color:rgb(221, 221, 221)">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span style="background-color:rgb(221, 221, 221)">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </span></div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span style="background-color:rgb(221, 221, 221)">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="masonry-child" style="margin-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; background: #DDD; border-radius: 4px; padding: 8px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
</div>
<div style="margin-top: 20px; background-color: rgb(34, 34, 34); border-radius: 10px; padding: 6px 12px; border: 1px solid rgb(221, 221, 221);">
<p><span style="color:#00FF00">.masonry-parent </span><span style="color:#D3D3D3">{<br />
</span><span style="color:#FFA500">-moz-column-count</span><span style="color:#D3D3D3">: 4;<br />
</span><span style="color:#FFA500">-webkit-column-count</span><span style="color:#D3D3D3">: 4;<br />
</span><span style="color:#FFA500">column-count</span><span style="color:#D3D3D3">: 4;<br />
</span><span style="color:#FFA500">column-gap</span><span style="color:#D3D3D3">: 20px;<br />
}</span></p>
<p><span style="color:#D3D3D3"> </span><span style="color:#00FF00">.masonry-child</span><span style="color:#D3D3D3"> {<br />
</span><span style="color:#FFA500">-webkit-column-break-inside</span><span style="color:#D3D3D3">: avoid;<br />
</span><span style="color:#FFA500">page-break-inside</span><span style="color:#D3D3D3">: avoid;<br />
</span><span style="color:#FFA500">break-inside</span><span style="color:#D3D3D3">: avoid-column;</span><br />
<span style="color:#D3D3D3"> }</span></p>
<p><span style="color:#D3D3D3"> </span><span style="color:#00FF00"> @media </span><span style="color:#D3D3D3">(</span><span style="color:#FFA500">max-width</span><span style="color:#D3D3D3">: 900px) {<br />
</span><span style="color:#00FF00">.masonry-parent </span><span style="color:#D3D3D3">{<br />
</span><span style="color:#FFA500">-moz-column-count</span><span style="color:#D3D3D3">: 2;<br />
</span><span style="color:#FFA500">-webkit-column-count</span><span style="color:#D3D3D3">: 2;<br />
</span><span style="color:#FFA500">column-count</span><span style="color:#D3D3D3">: 2;<br />
}<br />
}</span></p>
<p><span style="color:#D3D3D3"> </span><span style="color:#00FF00">@media</span><span style="color:#D3D3D3"> (</span><span style="color:#FFA500">max-width</span><span style="color:#D3D3D3">: 600px) {<br />
</span><span style="color:#00FF00">.masonry-parent </span><span style="color:#D3D3D3">{<br />
</span><span style="color:#FFA500">-moz-column-count</span><span style="color:#D3D3D3">: 1;<br />
</span><span style="color:#FFA500">-webkit-column-count</span><span style="color:#D3D3D3">: 1;<br />
</span><span style="color:#FFA500">column-count</span><span style="color:#D3D3D3">: 1;<br />
}<br />
}</span></p>
</div>
<p>Si vous pensez avoir tout vu au niveau animation css3, cette animation de login va vous envoyer dans le futur.<br />
<br />
Un grand bravo à son créateur.<br />
Lien vers le <a class="btn btn-primary" href="https://codepen.io/anon/pen/LQrqKo" target="_blank">code source</a></p>
<p>Tout serveur devrait avoir son kit de survie minimum.<br />
<br />
Voici les sous-domaines toujours utiles <img alt="yes" src="https://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/thumbs_up.png" style="height:23px; width:23px" title="yes" /></p>
<p>Bien sûr, le tout en https...<br />
Inutile de croire qu'avec les urls vous pourrez hacker le serveur, il est blindé (fail2ban hypervitaminé et autres petites surprises)</p>
<blockquote>
<p>La force d'un développeur, ce n'est pas tant le code qu'il écrit que les bugs qu'il fixe!</p>
</blockquote>
<p>iRoom framework fait peau neuve, et est juste <strong>A MA ZING</strong>!</p>
<ul>
<li>flex boxes</li>
<li>nouveaux composants</li>
<li>classes utiles</li>
<li>plein de javascript sans librairies</li>
</ul>
<p>toujours en dev à l'heure actuelle mais vous pouvez télécharger la version beta <a class="btn btn-primary" href="https://iroom.re" target="_blank">ici</a></p>
<p>Après toute une série de plugins symfony (vendor bundles), c'est une extension wordpress faite par votre serviteur que vous pouvez retrouver dans le répertoir officiel des plugins wordpress (et j'en suis peu fier <img alt="laugh" src="https://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/teeth_smile.png" style="height:23px; width:23px" title="laugh" />).</p>
<p>Cette extension s'appelle "Materialize contact form" et elle permet d'injecter par shortcode un formulaire de contact on ne peut plus moderne, grâce au design du célèbre framework CSS Materialize.</p>
<p><a class="btn-primary" href="https://wordpress.org/plugins/materialize-contact-form/" target="_blank">Materialize contact form</a></p>
<p>Après quelques années, même le plus beau des designs prend des rides et c'est donc logique, même si c'est contraignant,<br />
de prévoir une refonte du design.</p>
<p>J'ai donc revu le design de tous mes sites wordpress, que j'ai réuni en réseau de sites (wordpress multisite).</p>
<p>Pour ceux qui ont déjà visité un de ces sites, n'hésitez pas à comparer avec la nouvelle version et donnez-moi votre avis en commentaire <img alt="cool" src="https://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/shades_smile.png" style="height:23px; width:23px" title="cool" />.</p>
<p>Voici la liste des sites revus:</p>
<ul>
<li><a class="btn-primary" href="https://deepweb.be" target="_blank">Deep Web</a></li>
<br />
<li><a class="btn-primary" href="https://help-amor.be" target="_blank">HelP AmoR</a></li>
<br />
<li><a class="btn-primary" href="https://celinehesbois.be" target="_blank">Céline Hesbois</a></li>
<br />
<li><a class="btn-primary" href="https://after-sex-selfies.deepweb.be" target="_blank">After sex selfies</a></li>
<br />
<li><a class="btn-primary" href="https://graph-it.deepweb.be" target="_blank">Graph'it</a></li>
<br />
<li><a class="btn-primary" href="https://traffic-jam.deepweb.be" target="_blank">Traffic Jam</a></li>
<br />
<li><a class="btn-primary" href="https://nationale3.deepweb.be" target="_blank">Nationale3</a></li>
<br />
<li><a class="btn-primary" href="https://tocc.deepweb.be" target="_blank">T.O.C.C.</a></li>
<br />
<li><a class="btn-primary" href="https://kratz.deepweb.be" target="_blank">Geoffrey Kratz</a></li>
<br />
</ul>
<p>Au départ c'était un back-office comme les autres.<br />
<br />
Puis c'est devenu une administration poussée<br />
<br />
Puis c'est devenu un bundle.<br />
<br />
</p>
<blockquote>
<p><a class="btn-primary" href="https://packagist.org/packages/gkratz/adminbundle" target="_blank">GKAdminBundle</a>, un back-office complet en une seule commande!</p>
</blockquote>
<p>Quand on a fait un peu le tour de symfony, qu'on a créé des commandes, des services, des fonctions et filtres twig, du multilingue, du REST, ...<br />
<br />
Il est devenu temps de faire ses propres Bundles. C'est ce que j'ai fait.<br />
<br />
Je vous invite donc à essayer un de mes bundles:</p>
<ul>
<li><a href="https://packagist.org/packages/gkratz/analyticbundle" style="text-decoration: underline; color: #E7663C" target="_blank">GKanalyticBundle</a> : Un bundle qui log tout seul vos visites en db et vous sort de jolis graphiques</li>
<li><a href="https://packagist.org/packages/gkratz/maintenancebundle" style="text-decoration: underline; color: #E7663C" target="_blank">GKmaintenanceBundle</a> : Un bundle qui vous permet de mettre votre site en maintenance côté front en 1 clic avec plein de fonctionnalités super cool</li>
<li><a href="https://packagist.org/packages/gkratz/editorbundle" style="text-decoration: underline; color: #E7663C" target="_blank">GKeditorBundle</a> : Un éditeur WYSIWYG super facile à installer</li>
<li><a href="https://packagist.org/packages/gkratz/searchbundle" style="text-decoration: underline; color: #E7663C" target="_blank">GKsearchBundle</a> : Un moteur de recherche à configurer en yml très facilement</li>
<li><a href="https://packagist.org/packages/gkratz/adminbundle" style="text-decoration: underline; color: #E7663C" target="_blank">GKadminBundle</a> : Un monstre de bundle qui rassemble un back-office ULTRA complet et qui rassemble également tous les bundles cités + haut</li>
</ul>
<p>Un premier projet en .net, ça fait plaisir!</p>
<p>C'est que le langage est très demandé sur le marché de l'emploi, donc la compétence est plutôt intéressante à acquérir.</p>
<p>Sans compter que visual studio community 2015 emporte dans son bagage les outils qu'on peut retrouver dans les meilleurs IDE payants du genre de ceux proposés par jetbrains, qui sont carrément AMAZING! <img alt="surprise" src="http://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/omg_smile.png" style="height:23px; width:23px" title="surprise" /></p>
<p>Alors du coup, on apprend .net avec beaucoup d'implication puis comme premier projet, autant faire directement un cms ...</p>
<p>Et voici la <a class="btn-primary" href="https://v1.iroom.re/theme-dotnet/" target="_blank">première page</a> statique de ce cms, que je trouve super!<br />
</p>
<p>Toujours en cours de développement mais hébergé en version béta test.<br />
<br />
<strong><a class="btn-primary" href="http://icss.iroom.re" target="_blank">iCSS</a> </strong>est un des projets en cours de votre serviteur, dans la lignée d'<strong><a class="btn-primary" href="http://iroom.re" target="_blank">iRoom</a></strong>, mon framework css.<br />
<br />
Vous pouvez tester quelques-unes des fonctionnalités déjà présentes mais il reste des choses à corriger: bug avec les @media et préfixage et préprocesseur pas encore impémentés.<br />
<br />
Pour la petite histoire, il n'y a eu pour l'instant qu'une vingtaine d'heures de travail à ce jour pour ce projet qui est pourtant déjà bien avancé <img alt="cool" src="http://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/shades_smile.png" style="height:23px; width:23px" title="cool" /></p>
<p>Tant qu'à se faire son framework css, autant y intégrer plein de trucs, et se la jouer Twitter Bootstrap.</p>
<p>Bootstrap utilise un système de float pour sa grille, j'ai pour ma part utilisé un système d'inline-block, que je trouve plus propre.</p>
<p><a class="btn-primary" href="http://iroom.re" target="_blank">voir</a> la démo de mon iRoom framework.</p>
<p>Pour un développeur, c'est pas toujours très évident de faire dans le détail, mais parfois, un développeur veut fignoler le <strong><back/></strong> et le <img alt="" src="/userfiles/images/1453228685logo.png" style="height:30px; width:30px" /><strong>front. </strong></p>
<p>Les formulaires en sont une parfaite illustration.</p>
<p>Pour fignoler un formulaire, on va pouvoir utiliser toutes les possibilités géniales que nous offrent le html5, comme les nombreux types d'inputs (number, color, range, url, tel, datetime, search, ...) formatés grâce aux attributs <strong>required</strong>, <strong>selected</strong>, <strong>min</strong>, <strong>max</strong>, <strong>size</strong>, <strong>scale</strong>, <strong>=> pattern <= , ...</strong></p>
<p>Après, on fignole le design, pour que l'utilisateur du site reconnaisse le produit. Comme cet exemple en images, prévu pour les joueurs de lotterie Belge, et on peut voir un des formulaires est la copie d'un bulletin de la-dite lotterie. Ce n'est pas un énorme travail de design mais c'est beaucoup plus compréhensible qu'un simple input.<br />
<br />
Et ajax pour ceux qui le souhaitent, 10 minutes de travail en + <img alt="devil" src="http://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/devil_smile.png" style="height:23px; width:23px" title="devil" /></p>
<p>Beaucoup de tutos existent sur la création d'extensions pour wordpress.</p>
<p>Vous verrez comment installer une extension, créer des tables custom, créer des shortcodes, et ajouter un sous-menu à l'onglet réglages pour les réglages de votre extension. C'est la fonction <strong>add_options_page </strong>qui est utilisée pour ce faire.</p>
<p>Mais comme vous l'avez déjà remarqué, certaines extensions ont leur propre onglet dans le menu. Mais comment font-ils?</p>
<p>C'est très simple, au lieu de la fonction <strong>add_options_page</strong>, il faut utiliser la fonction<strong> add_menu_page. </strong>Cette fonction prend en paramètres exactement les mêmes paramètres que la fonction <strong>add_options_page</strong> + le chemin vers l'icône à utiliser et la position dans le menu (en 1 tant qu'à faire<img alt="cheeky" src="http://vsweb.be/bundles/ivoryckeditor/plugins/smiley/images/tongue_smile.png" style="height:23px; width:23px" title="cheeky" />).<strong> </strong></p>
<p>Les sous-menu quant à eux utilisent la fonction <strong>add_submenu_page.</strong></p>
<p><span style="font-size:11px"><strong>p.s.: il ne faut pas oublier le add_action ...</strong></span></p>
<p>Développeur php? Vous devez bien souvent recommencer à zéro inutilement.<br />
<br />
Donc, pour bien commencer un projet <strong>symfony</strong>, on utilise une coquille vide déjà équipée de <strong>fosuser </strong>et la<strong> gestion des users</strong>.</p>
<p>Du coup, pas besoin de réinventer la roue sans cesse, on s'attaque directement à nos controllers.</p>
<p>Voici ma coquille vide, disponible pour <a class="btn-primary" href="https://bitbucket.org/jul6art/sf2-projet-base" target="_blank">symfony 2</a> ou <a class="btn-primary" href="https://bitbucket.org/jul6art/sf3-projet-base" target="_blank">symfony 3</a></p>
<p>Et si vous développez sur python, voici la coquille vide d'un projet django 1.9 avec la gestion des users: <a class="btn-primary" target="_blank" href="https://bitbucket.org/jul6art/dj1.9-projet-base">django 1.9</a></p>
Pour vous offrir la meilleure expérience utilisateur, nous utilisons des cookies sur ce site, pour stocker des données qui ne sont pas sensibles. Ces cookies ainsi que leur contenu sont accessibles dans votre navigateur.
VsWeb
VsWeb,
all about web,
qui a vu le jour en
par Jul6art
et qui se trouve à Liège, en Belgique.
