Libellés

Affichage des articles dont le libellé est css. Afficher tous les articles
Affichage des articles dont le libellé est css. Afficher tous les articles

mardi 28 juin 2011

Compiler des fichers less -> css en Groovy

Less-css est un CSS amélioré.

Pour citer quelques exemples on peut :
- créer des variables et les réutiliser partout
- imbriquer des blocs css, dans d'autre bloc css.
- ...

Par exemple :

@import "global.less";

@size: 14px;

#col{

.odd{
color: red;
font-size: @size;
}

.even{
color: blue;
font-size: @size;
}

}


Les fichiers less sont transformés en CSS par un script js. Ce qui permet de tester en live sur son site web, mais la conversion less/css est plutôt lente.

Il est donc préférable de compiler les fichiers less avant la prod.

Je vous livre donc un code groovy qui permet très facilement de convertir un fichier less en CSS. A vous de le transformer en JAVA et de l'intégrer dans votre environnement de développement.

Pour info, il existe lessc, le compilateur less officiel qui repose sur nodeJS. Si vous ne voulez pas installer node.js, cette version Java vous plaira (elle utilise Rhino).


@Grab(group='com.asual.lesscss', module='lesscss-engine', version='1.0.43')
@GrabResolver(name='asual', root='http://www.asual.com/maven/content/repositories/releases')

import com.asual.lesscss.*

new LessEngine().compile(new File("/home/romain/Bureau/less/root.less"),new File("/home/romain/Bureau/less/root.css"));

vendredi 11 février 2011

CSS stylesheet pour Markdown

J'ai découvert il y a peu de temps le format Markdown.

C'est un format d'écriture de texte très simple qui se transforme ensuite en HTML.

Voici un exemple d'un document en Markdown :
http://daringfireball.net/projects/markdown/basics.text

Et voici sa version HTML:
http://daringfireball.net/projects/markdown/basics

Pour faire très bref, voici un résumé de Markdown :


Titre 1
====
Texte sans saut
de ligne, on peut
écrire à l’infini.

titre 2
------
Pour faire un
saut de ligne,

il faut faire un
vrai saut de ligne.
2x Entrer

### Titre 3
Pour écrire une liste :

 - premier élément précéder d'un saut de ligne
 - deuxième élément

#### Titre 4
Pour insérer un lien c'est très simple : 
Et c'est aussi simple pour mettre un texte en  *italique* ou en **gras** .


Pour vous amuser je conseille d'utiliser l'outil de Job Combe, c'est un éditeur Markdown très bien fait
http://joncom.be/experiments/markdown-editor/edit/

Sinon je recommande également le projet pandoc disponible en paquet debian.

Une fois le texte rédigé en Markdown, on peut le convertir en HTML, mais le résultat est assez brut de fonderie car n'y a pas de CSS.

Donc je vous propose ici, d'utiliser librement mon CSS :

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

<style type="text/css">

body {
  max-width: 900px;
  margin: 0 auto ;
  color: #4a4a4a;
  background: #222;
}

blockquote{
  background: #F7F7F7;
  padding: 10px;
  font-size: 90%;
  line-height: 130%;
}

*{
   font-family: arial, serif;
}

p{
  text-align: justify;
}

h1{
  font-size: 2.5em;
}

h2{
  border-bottom: 1px solid #E0E0E0!important;
}

h2, h3{
  padding:20px 0 0 0;
 
}

h3{
  font-size: 1.1em;
   margin-bottom: 5px;
}

#content{
  background-color:white;
  padding: 10px 50px ;
}
</style>
</head>
<body>
<div id="content">

<!-- Votre Markdown converti en HTML ici -->

</div>
</body>
</html>