===== CSS =====
==== Générateurs de CSS ====
https://cssgenerator.org
==== Un body qui s'adapte bien à la fenêtre ====
html {
display: table;
width: 100%;
}
body {
display: inline-flex;
min-height: 100%;
}
Le width sur l'élément est nécessaire à cause des spécificités du display table.
==== Une image de fond qui s'adapte bien à la fenêtre ====
body {
height: 100vh;
margin: 0;
background-color: #d7c0a2;
background-image: url(img.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
==== Des lignes de tableau "collapsible" ====
$transition-delay: 200ms;
table {
border-collapse: collapse;
& tbody {
& tr {
&.collapsible {
& td {
line-height: 140%;
opacity: 1;
transition: all $transition-delay ease-in;
& > div { // Si le tableau doit contenir autre chose que du texte
max-height: 10rem; // A adapter
overflow: hidden;
transition: max-height $transition-delay ease-in;
}
}
&.collapsed {
visibility: collapse;
transition-delay: $transition-delay; // Utile ??
& td {
line-height: 0%;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
& > div { // Si le tableau doit contenir autre chose que du texte
max-height: 0rem;
}
}
}
}
}
}
}
==== Texte gravé ====
.el {
color: rgba(0,0,0,.1);
text-shadow: 1px 1px rgba(255,255,255,1),
-1px -1px rgba(0,0,0,.6)
}
ou
.el {
color: black;
opacity: .25;
text-shadow: 1px 1px rgb(255 255 255);
}
==== Points de rupture ====
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
==== Points de rupture SCSS avec mixin ====
$breakpoints: (
"phone-down": 500px,
"tablet-up": 768px,
"tablet-down": 900px,
"desktop-up": 1024px,
"desktop-down": 1280px,
"widescreen-up": 1440px
);
@mixin media-min($_key) {
@media screen and (min-width: map-get($breakpoints, $_key)) {
&{ @content; }
}
}
.class {
font-size: 1em;
@include media-min("tablet-up") {
font-size: 1.2em;
}
}
==== Code SCSS compilé à la volée ====
Télécharger sass.js (https://github.com/medialize/sass.js)
var sass = new Sass();
var scss = `
.my-class {
color: red;
& .my-subclass {
color: blue;
}
}
`;
sass.compile(scss, {
style: Sass.style.expanded
}, function(result) {
document.getElementById('csscode').innerHTML = result.text;
});