Sass & framework

Bonjour,

Je suis en train de réfléchir depuis quelques jours à comment bien intégrer Bootstrap (ou Foundation) dans mes créations, en utilisant que ce dont j'ai besoin et en gardant des css light. J'aimerais également conserver mes class.
Mon idée serait d'utiliser SASS.

Disons que je veux créer deux blocs, un de navigation, un de contenu :

De manière conventionnel, on aurait :

<div class="container">
	<header class="row">
		<nav class="col-mg-4">menu</div>
		<section class="col-mg-8">contenu</section>
	</header>
</div>

Si je veux simplifier :

<div class="page">
	<header>
		<nav>menu</nav>
		<section>contenu</section>
	</header>
</div>

Avec du SCSS, ça règle le problème :

.page {
	@extend .container;
	header {
		@extend .row;
		nav {
			@extend .col-mg-4;
		}
		section {
			@extend .col-mg-8;
		}
	}  
}

Mais le soucis, c'est que pour que ça marche, je suis obligé d'importer bootstrap "@import "bootstrap";" qui va me compiler un énorme fichier CSS avec pleins de classes que je n'utiliserais jamais.

Donc quel est la bonne méthode pour n'utiliser quel les bonnes mixins et que ça ne compile pas un gros code inutile ?

J'ai vu quelque chose du genre :

header {
	@include make-row();
	nav {
		@include make-mg-column(4);
	}
	section {
		@include make-mg-column(8);
	}
}

mais comment l'utiliser ? (que faut il importer pour que ça ne compile que les mixins ?)

Bonjour,

si tu ne voulais que les mixins de Bootstrap, tu n'aurais à importer que ces dernières.

Mais tu veux importer l'effet de ces mixins pour certaines classes (qui elles-mêmes utilisent des mixins en plus d'autres instructions) et pas toutes : avoir une classe que tu as nommée avoir le même effet qu'un .row ou .col-mg-4 ou -8 de BS mais rien d'autre... À part virer à la main tout le reste de BS (ou n'ajouter aux mixins que ce qui est utilisé) ou utiliser le générateur (LESS) http://getbootstrap.com/customize/ je ne vois pas comment faire ça...

Autre solution plus complexe mais assez définitive une fois en place : UnCSS (existe en version grunt, gulp, …) qui prend l'ensemble des gabarits de ton site (ou pages HTML), regarde quelles CSS sont utilisées et retire le reste automatiquement.
2 inconvénients immédiats :
- il ne te faut rater aucune page HTML dans ton site (si elles utilisent des gabarits tu y arriveras mais si ton site est un gros boxon c'est raté d'avance)
- les états au survol, disabled, qui n'arrivent qu'après action de l'utilisateur et/ou JS - modales, tunnel d'achat, dropdown custom etc - , les classes conditionnelles et autres hacks IE/Firefox nécessitent de configurer finement grunt (mais c'est une fois pour toutes, heureusement).
Avantage : il n'y a pas que les classes superflues de Bootstrap qui dégagent mais aussi celles de tes CSS et de tous les frameworks utilisés...
Modifié par Felipe (10 Nov 2014 - 11:03)

Tu peux aussi télécharger la version sass de bootstrap. Et ensuite faire le tri dans les fichiers.
Modifié par marginus (10 Nov 2014 - 19:07)

marginus a écrit :
Tu peux aussi télécharger la version sass de bootstrap. Et ensuite faire le tri dans les fichiers.

C'est justement ce que je voulais faire, mais je n'ai pas bien compris quoi importer pour qu'il ne compile pas les classes CSS mais que ce que j'importe en mixin.

Avec Foundation, quand tu télécharges les fichiers SASS, c'est facile tu peux ne charger que le coeur de Foundation. A toi d'ajouter ce que tu souhaites selon tes besoins.

Il me semble que c'est la bonne méthode (avec Bootstrap ou Foundation), elle te force à bien connaitre la structure du Framework. C'est à mon sens la seule manière de bien en tirer parti : tu perds du temps à l'apprendre pour gagner du temps sur les projets suivants. Là dessus il n'y a pas de secret.

Salut,

Et pourquoi pas se passer de bootstrap si tu ne veux pas du code inutile ?
il y a un plugin sass qui fait du sur mesure c'est "susy" : http://susy.oddbird.net/demos/

J'ai l'impression que ça résoudrait ton problème

Salut,

J'essaye aussi d'utiliser bootstrap avec Sass notamment pour créer des mockup facilement, du coup je te conseil d'utiliser bower.

Concernant l'installation ce n'est pas trop compliqué tu trouveras ça dans la doc de bootstrap. Ensuite quand bower sera installé déplace toi dans ton dossier et fait un

bower install bootstrap-sass-official 

Là il va télécharger toutes les dépendances JS et SASS de bootstrap

Dans ton style .css il te restera à mettre

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap";

Ensuite si tu veux utiliser tel ou tel module de bootstrap il te suffit d'aller dans le fichier _bootstrap.scss afin de choisir ce que tu veux.

Voilà un exemple pour ma part afin de générer des Boutons facilement

@mixin width-btn($width){
	@if $width == "xs"{
	 	@extend .btn-xs;
	} @else if $width == "lg" {
		@extend .btn-lg;
	} @else if $width == "sm"{
		@extend .btn-sm;
	}
}

@mixin type-btn($type){
	@if $type == "success"{
		@extend .btn-success;
	} @else if $type == "primary"{
		@extend .btn-primay;
	} @else if $type == "info"{
		@extend .btn-info;
	} @else if $type == "warning"{
		@extend .btn-warning;
	} @else if $type == "danger"{
		@extend .btn-danger;
	} @else{
		@extend .btn-default;
	}		
}

@mixin bouton($type, $width){
	@extend .btn;
	@include width-btn($width);
	@include type-btn($type);
	text-align: center;
	@include box-sizing(border-box);
}

@mixin custom-btn($color, $bg, $border, $width){
	
	@extend .btn;
	@include width-btn($width);
	@include button-variant($color, $bg, $border);
}

Et enfin :
génération d'un Bouton par défaut de bootstrap

 @include bouton(danger, sm)

génération d'un Bouton personnalisée

@include custom-btn(yellow, black, green, lg)

Voilà j'espère avoir été clair, si d'autres gens ont des petits tips pour Sass avec Bootstrap je suis preneur
Modifié par GameTag (12 Dec 2014 - 14:23)

Mais en effet si tu ne veux pas utiliser les styles (et la vitesse) des composants proposés par Bootstrap (ou Foundation). La vraie question est pourquoi l'utiliser ? Sincèrement.

Il me semble que si tu veux un minimum de code, ne l'utilise pas. Ce que je vois souvent c'est des sites développés "sans rien" et qui au moment du debug on se rend compte que quelque chose ne fonctionne pas et hop on trouve une rustine... Le code s'alourdit. Et ainsi de suite... Et finit par être bien plus lourd que si Bootstrap avait été utilisé. Encore une fois, et je suppose que c'est la millième que c'est dit : pourquoi utiliser un framework et sais-tu vraiment ce qu'il fait (et comment il le fait) ?