Initiation à mdcss

Mdcss est un simple outils permettant de générer facilement un guide des styles css.
Nous allons voir comment l'utiliser sur un cas simple.
Dans cet exemple, j'utiliserai un fichier gulpfile.

Pour commencer, il faut l'installer via npm ou yarn.

yarn add mdcss --dev

Nous installons également gulp-line-ending-corrector afin de corriger un bug sur les retours chariot sur windows qui empêche la génération du guide des styles

yarn add gulp-line-ending-corrector --dev

Une fois nos modules installés, nous les configurons sur ce gulpfile basique.

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer')({
    browsers: ['last 3 versions', 'ie>=11'],
    cascade: false
});
const mqpacker = require('css-mqpacker')({
	sort: true
});
const cssnano = require('cssnano')({
	autoprefixer: false,
	svgo: false,
	zindex: false
});
const watch = require('gulp-watch');

gulp.task('css', function(){
	return gulp.src('./sass/**/*.scss')
	.pipe(sourcemaps.init())
	.pipe(sass().on('error', sass.logError))
	.pipe(postcss([autoprefixer,mqpacker,cssnano]))
	.pipe(sourcemaps.write('../maps'))
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
	watch('sass/**/*.scss', function() {
    	gulp.start('css');
	});
});
Gulpfile.js

Premièrement nous appelons nos deux nouveaux modules.

const mdcss = require('mdcss')({
	title: 'Guide des styles',
	examples: {
		css: ['../css/style.css']
	}
});

const lec = require('gulp-line-ending-corrector')

Le paramètre title permet de changer le titre de votre guide des styles.
Exemple.css lui définit la feuille de style à utiliser pour vos exemples, il faut donc pointer sur le css de votre site.

Voici notre gulpfile final :

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer')({
    browsers: ['last 3 versions', 'ie>=11'],
    cascade: false
});
const mqpacker = require('css-mqpacker')({
	sort: true
});
const cssnano = require('cssnano')({
	autoprefixer: false,
	svgo: false,
	zindex: false
});
const mdcss = require('mdcss')({
	title: 'Guide des styles',
	examples: {
		css: ['../css/style.css']
	}
});
const watch = require('gulp-watch');
const lec = require('gulp-line-ending-corrector')

gulp.task('css', function(){
	return gulp.src('./sass/**/*.scss')
	.pipe(sourcemaps.init())
	.pipe(sass().on('error', sass.logError))
	.pipe(lec())
	.pipe(postcss([mdcss,autoprefixer,mqpacker,cssnano]))
	.pipe(sourcemaps.write('../maps'))
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
	watch('sass/**/*.scss', function() {
    	gulp.start('css');
	});
});
gulpfile.js

Désormais attaquons nous au fichier scss.
Nous aurons un fichier style.scss contenant les variables et un fichier _btn.scss et _input.scss qui nous permettrons de styliser respectivement les boutons et les champs input.

Voici le fichier style

/*---
title:   Couleur
section: Base CSS
order: 0
---

Voici les différentes couleurs que le retrouvera sur le site accessible via des balises scss

```example:color
@color: #000 @name: $colorDark
@color: #2a2a2a @name: $colorDefault
@color: #e1e1e1 @name: $colorLight
@color: #1b5e20 @name: $colorSuccess
@color: #d50000 @name: $colorAlert

```
*/
$colorDark: #000;
$colorDefault: #2a2a2a;
$colorLight: #e1e1e1;
$colorSuccess: #1b5e20;
$colorAlert: #d50000;


@import 'btn';
@import 'input';
style.scss

/*--- */ vous permet d'écrire du code que l'on retrouvera dans votre guide des styles.
La partie title, section, et order sert à générer le menu.
Le title est également présent sur le contenu principal en tant que titre.
Le texte qui suit se retrouve à la suite du titre.
```example:color génère des pastilles de couleurs contenant un code couleur et un nom, qui dans notre cas représente les variables scss.

Maintenant les fichiers _btn.scss et _input.scss

/*---
title:   Bouton
section: Base CSS
order: 1
---

Les styles des boutons utilisables sur des balises `<a>`, `<button>` ou `<input type="submit" />` 

```example:html
<button class="btn btn--dark">Un bouton</button>
<a class="btn btn--light" href="#">Un lien</a>
```
*/
.btn{
	display: inline-block;
	padding: 1.2rem 1.2rem;
	border-width: 1px;
	border-style: solid;
	font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
	font-size: 1.3rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.5s ease-out, color 0.5s ease-out , border-color 0.5s ease-out;
	&--dark{
		border-color: $colorDefault;
		background-color: $colorDefault;
		color: #fff;
		&:hover, &:focus{
			border-color: $colorDark;
			background-color: $colorDark;
			color: #fff;
		}
	}
	&--light{
		border-color: $colorLight;
		background-color: #fff;
		color: $colorDefault;
		&:hover, &:focus{
			border-color: $colorDefault;
		}
	}
}
_btn.scss
/*---
title:   Formulaire
section: Base CSS
order: 2
---

Les styles des formulaires sont utilisables sur les `<input />`  et `<select>`

```example:html
<input class="input-field" />
```
*/
.input-field{
	width: 20rem;
	height: 4rem;
	padding-left: 1rem;
	border: 1px solid $colorLight;
	font-family: "Times New Roman", Times, Baskerville, Georgia, serif;;
	font-size: 1.3rem;
	color: $colorDefault;
	outline: 0;
	transition: border-color 0.5s ease-out;
	&:focus{
		border-color: $colorDefault;
	}
}
_input.scss

Le code est relativement similaire.
La différence ce fait au niveau de l'exemple, ou nous voulons afficher du html pour illustrer notre code.

Voici le résultat final

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *