Template Framework

Rédigé par Djb le 30 juin 2015 2 commentaires

framework pour Pluxml

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.

Classé dans : Templates, Frameworks

CSS3 HTML5 Framework

Retrouvez les plugins et templates pour PluXml

Information sur Djb, auteur de l'article:

La drogue cause des trous de mémoire et plein d’autres trucs moches dont je me souviens jamais.

2 commentaires

#1 

Hi,

I use this theme to my blog. It's pretty good for me.
But I have a question about how to change the width of sidebar.
I want to change it to be 300px.
Please help me to figure it out.

Adi Commentaire de Adi

Répondre

#2 

@Adi : Just change the html code

class="bloc-xx"

see: http://libertea.fr/framework-sass-responsive-pluxml

if you want I can create plugin to customize the width. Commentaire de Djb

Répondre

Écrire un commentaire