AlexisLefebvre.com

Ce qui m'a plu avec new.css :

• minimaliste : le fichier CSS complet pèse moins de 5 ko
• sans classe : plus besoin d'utiliser des classes CSS comme container ou panel-title, il suffit d'utiliser les balises <header> pour ajouter une entête à la page, ou <main> pour le contenu de la page
• mode sombre automatique : il s'adapte aux préférences de l'utilisateur^[1]
• joli : c'est épuré et aéré

Après avoir supprimé les classes de Boostrap, j'avais du code HTML plus lisible et sémantique.

J'ai utilisé flexbox afin de séparer les projets et les données additionnelles (année, technologies, etc.) en 2 colonnes.

J'ai préféré utiliser des sélecteurs CSS plutôt que des classes :

/* container */
section > div {
    display: flex;
    padding-bottom: 0.75em;
    justify-content: space-between;
    align-items: stretch;
}

/* first content */
section > div > div:first-child {
    width: 45%;
    margin: auto;
}

/* second content */
section > div > div:last-child {
    width: 55%;
    margin: auto;
}

Enfin, des règles media queries @media all and (max-width: 800px) {…} ajustent l'affichage pour les écrans plus petits en passant de 2 à 1 colonne.

J'avais également testé bullframe.css qui répondait à mon besoin initial mais son système de grille via des classes CSS rendait le code presque aussi complexe que lors de l'utilisation de Boostrap.

Voici le résultat :

En mode sombre :

L'ancien style avant la bascule :