Tuto sur le framework responsive PluXml

Rédigé par Djb 10 commentaires

http://nextum.fr/data/images/framework.png

Mise à disposition d'un framework, sans js,  pour PluXml ultra light afin de développer plus rapidement vos créations, il est disponible sur Github

Le thème est neutre afin de faciliter votre intégration, il utilise le framework Compass basé sur le langage SASS intégrant de nombreuses fonctions, appelées mixins, qui permettent d'écrire en quelques lignes des CSS avancés...

Les fichiers du template:

  1. archives.php
  2. article-full-width.php
  3. article.php
  4. categorie.php
  5. commentaires.php
  6. erreur.php
  7. footer.php
  8. header.php
  9. home.php
  10. sidebar.php
  11. static-full-width.php
  12. static.php
  13. tags.php
  14. style.css

 

Le minimum pour un template PluXml...

La structure HTML pour le responsive


<div class="wrap">
    <div class="bloc-8">
        <p>
            Largeur de 8/12
        </p>
    </div>
    <div class="bloc-4">
        <p>
            Largeur de 4/12
        </p>
    </div>
</div>

 

En fonction de la valeur mise dans la variable $bloc, ici elle est à 12

 

Les autres dossiers

 un dossier lang pour la taduction du site

 un dossier img pour les images de votre futur template

 un dossier fonts pour vos polices exotiques

 un dossier SASS pour la création du fichier style.css, il est composé de plusieurs fichiers scss

J'ai morcelé en plusieurs fichiers .scss afin de faciliter la lecture et les modifications.

  1. body.scss - le corps du site
  2. fonts.scss - la police de caractère mais aussi la mise en forme de votre texte
  3. footer.scss - mise en forme du footer
  4. grid.scss - la création des class mais aussi du responsive
  5. header.scss - mise en forme du header et de la navigation
  6. sidebar.scss - mise en forme de la sidebar
  7. form.scss - mise en forme des formulaires
  8. style.scss - compilation des fichiers .scss

 

Regardons le fichier style.scss



/* Reset et importation des mixins CSS */
@import "compass";
@import "reset";


/* importer les mixins animated à utiliser pour le theme */
@import "animated";

@include animation(bounce-in-right); /* pour le bloc sidebar */
@include animation(pulse); /* pour le personnage sur la page accueil */
@include animation(fade-in); /* pour la partie section*/


/* Largeur, espace entre les blocs et nombre de blocs */
$wrap: 1160px;
$gutter: 20px;
$bloc: 12;
$max-width: 768px;
$police: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
$size: 16px;

/* couleurs du theme */
$primaire: #666;
$secondaire: #ccc;


/* importer les éléments du style */
@import "fonts";
@import "body";
@import "header";
@import "sidebar";
@import "form";
@import "footer";
@import "grid";

 

Les paramètres de configuration

 

  1. - Largeur du site: $wrap
  2. - Espace dans les blocs, le padding: $gutter
  3. - Le nombre de blocs par lignes: $bloc
  4. - Le « switch » passage à un écran smarphone: $max-width
  5. - La police: $police
  6. - Variable pour une couleur: $primaire
  7. - Une autre couleur: $secondaire
  8. - ...

 

Le but de ce framework est de vous faire gagner du temps sur vos intégrations,mais aussi sur vos modifications. Il est évolutif donc, n'hésitez pas à l'améliorer.

Afficher les icônes

Utiliser les class pour afficher les icônes

Flaticon

.flaticon-accepted

.flaticon-add20

.flaticon-add70

.flaticon-address4

.flaticon-advance

.flaticon-arrow53

voir les autres icônes sur la page par défaut

Les liens utiles

Retrouvez le framewok sur Github

Mixins animated sur le framework PluXml

Site officiel Compass

CMS PluXml

 

Bonne intégration....et Compass watch

 

Classé dans : Tutoriel, PluXml, Réalisations Mots clés : Compass, PluXml

A propos de l'auteur, Djb:

Fort de notre expérience dans la création et l'intégration de projets web, l'équipe Psd-HTML vous accompagnons dans la définition de votre charte graphique et la réalisation de votre projet Web - Intégrateur chez psd-html.fr

 

10 commentaires


Djb a dit : #1


Petit test du framework SASS pour le CMS PluXml avec l'ajout du mixin animated.sass, visible sur le bloc sidebar à droite. 
N'hésitez pas à commenter pour apporter des modifications et pourquoi pas m'offrir un petit café sur la page d'accueil...

Marc a dit : #2


Bonjour merci, j'aime beaucoup le CMS pluxml mais je préfère quand même utiliser wordpress.

Djb a dit : #3


Je ne les compare pas, ils ont chacun des inconvénients et des avantages, à utiliser suivant le besoin.

Djb a dit : #4


Mise à jour avec l'ajout d'une bibliothèque d'icônes

zobos a dit : #5


J'utilise aussi les deux, WP et Plux, et franchement Pluxml me ravit à chaque tentative d'intégration.
Good job je vais tester ce framework (qui ma foi réintroduit de la complexité dans le simple monde de Plux). Je vais voir çà.
Simer !

Djb a dit : #6


@zobos
N'hésitez pas à me faire un retour

Jerry Wham a dit : #7


On peut avoir un petit tuto sur l'install de sass/compass (j'ai la flemme de me le taper en anglais).

Djb a dit : #8


Pas de problème pour le Tuto sur sass/compass, tu es sous Mac ?
Tu peux regarder ce résumé pour MAC http://libertea.fr/votre-css-avec-sass-et-compass

André a dit : #9


Bonjour,
J'adore ce blog et ces illustrations. Merci pour le tuto, je vais essayer d'en faire quelque chose.
Bravo pour les dessins !

Enzoska a dit : #10


Tu fais un travail super et c’est pour cette raison que j’aime ce site !

Fil Rss des commentaires de cet article

Écrire un commentaire