Overblog Suivre ce blog
Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

15 mai 2014 4 15 /05 /mai /2014 16:44

Très utile pour taper rapidement du code HTML/CSS (Inclus avec Web Essentials)

Exemples

(Il suffit d’appuyer sur Tab)

Ce qui donne …

http://vswebessentials.com/

http://code.google.com/p/zen-coding/

http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 16:29
  • Gestionnaire de package NuGet chercher « sassandcoffee »

  • Ou taper directement dans la console install-package SassAndCoffee

 sass1

Ajouter une feuille de style SASS (extension *.scss)

 sass2.png

 

<link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

 

Lorsque l’on sauvegarde une feuille de style correspondante est automatiquement générée

Variables

Les variables SASS sont déclarées avec $

$nomvariable :valeur

 

Quelques utilisations

sass71.png

 

sass8.png

 sass7.png

 On peut également faire des boucles avec Sass.@extend et les rules sont également intéressants.

Code

DemoSass.scss

@import "SizesSass.scss"; // Import

@import "MixinsSass.scss";

 

//Variables

$base-background:Skyblue;

$base-color:white;

$alternative-color:gray;

$root:"/Images/";

$base-class-name:"maclasse";

 

 

// fonction

@function big-size($size)

{

    @if($size < 50)

    {

        @return ($size + 20px);

    }

    @else

    {

        @return ($size);

    }

}

 

.#{$base-class-name}1

{

    color:$alternative-color;

    font-size:big-size(40px); // utilisation de  la fonction

}

 

body { 

    background-image:url("#{$root}backgr1.png"); // injection de chaine

}

 

p{

     color:lighten($base-color,50%); // une fonction de couleur

     font-size:$base-font-size + 10px; // une opération

}

 

#content{

     background:$base-background;

    @include border-radius-all(10px); //mixin

}

 

// nested rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

 

MixinsSass.scss

@mixin border-radius-all($size) {

  -webkit-border-radius: $size;

     -moz-border-radius: $size;

          border-radius: $size;

}

 

SizesSass.scss

$base-font-size:12px;

 

Et Default.aspx

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LessSassTraining.Default" %> 

 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="content">

     <p>Hello World ! <a href="#">Sass is cool !!</a></p>

        <p class="maclasse1">Demo injection</p>

    </div>

    </form>

</body>

</html>

 

 

Ressources

http://sass-lang.com/guide

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Chirpy  http://chirpy.codeplex.com/

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 00:43

Pourquoi utiliser Less ? quelques exemples

  • Permet de définir des variables (couleurs, taille, chaine de caractères, etc.) syntaxe :  @nomvariable :valeur

  • Fonctions  exemple       color:fade(@main-forecolor,50%); 

  • Opérations exemple     font-size:@main-font-size + 10px;

  • Mixins

Exemple

/*.border-radius{

    border-radius:5px;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

 

}*/

.border-radius(@size:5px){

    border-radius:@size;

    -moz-border-radius:@size;

    -webkit-border-radius:@size;

 

}

Utilisations

   // .border-radius;

    .border-radius(10px);// ou  .border-radius()

  • Nested Rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

donne

a {

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

 

Ressources

http://lesscss.org/features/

Fonctions http://lesscss.org/functions/

Comparaison code généré dans Visual Studio  

 less7.png

Utilisation des outils de développement (exemple avec Chrome)

 less6.png

Dotless

http://www.dotlesscss.org/

Dans web.config : <dotless minifyCss="false" cache="true" web="false" />

On peut demander à minimiser le fichier css ;

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 00:04

1-« Installation »

  • Ajouter un fichier less (exemple « Default.less »)

  • Depuis le gestionnaire de package NuGet chercher le fichier JavaScript(chercher « lesscss » ou « less.js ») .

  • On peut aussi utiliser un CDN .

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>


less1

  • Dans l'en-tête de la page :

<link rel="stylesheet" type="text/css" href="Css/Default.css" />

<script type="text/javascript" src="Scripts/less-1.5.1.min.js"></script>

   

http://lesscss.org/#

2-Variable

On tape quelques variables que l’on utilise. Une feuille de style « Default.css » est générée automatiquement à partir de mon fichier « Default.less » dès que l’on sauvegarde .

less3.png

 

Le style est bien appliqué à la page …

less4.png

Astuce : on peut créer un fichier avec toutes les couleurs et l’importer ensuite

 

 

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
4 mai 2014 7 04 /05 /mai /2014 23:17
Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article