Ceci est une ancienne révision du document !
CSS
Générateurs de CSS
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 <html> 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"
table {
border-collapse: collapse;
& thead,
& tbody {
& tr {
&.collapsible {
&.collapsed {
transition-delay: $transition-delay;
visibility: collapse;
& td {
line-height: 0%;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
& > div { // Uniquement si le tableau doit contenir autre chose que du texte
max-height: 0rem;
}
}
}
& td {
transition: all $transition-delay ease-in;
line-height: 140%;
& > div { // Uniquement si le tableau doit contenir autre chose que du texte
transition: max-height $transition-delay ease-in;
max-height: 10rem; // A adapter
overflow: hidden;
}
}
}
& td {
opacity: 1;
&:has(> .expand-button) {
padding-top: 0;
padding-bottom: 0;
}
& .expand-button {
padding: 4px 10px;
width: 28px;
}
}
}
}
}
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)
<style id="csscode"></style>
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;
});