CSS Grids et design responsive

Question

Je prévois d'utiliser un système de grille pour un site, mais j'aimerais pouvoir casser la grille de manière sélective. Cela signifierait, par exemple, transformer un OOCSS size1of2 en size1of1). Idéalement, le html ressemblerait à ceci:

        1/2
        Lorem ipsum dolor sit amet...

        1/2
        Lorem ipsum dolor sit amet...

Ensuite, j'aurais quelque chose comme le css suivant:

@media screen and (max-device-width: 480px) {
    .respond-480 {
        /* quelque chose pour linéariser la boîte */
    }
}

Est-ce que quelqu'un sait comment faire cela avec OOCSS, ou un autre système de grille? Je recherche ce niveau de contrôle, par opposition à une grille responsive plus simple responsive grid.

Answer 1

Il s'avère que cela a plus de sens d'ajouter la classe respond480 à la ligne plutôt qu'à l'unité. Pas surprenant. Le code suivant fonctionne plutôt bien pour les navigateurs modernes. J'ai utilisé le sélecteur d'enfant pour simplifier les choses -- bien qu'il soit peut-être possible de contourner, les anciens navigateurs (IE<6) ne prennent de toute façon pas en charge ces requêtes multimédias.

@media screen and (max-width: 480px) {
    .respond480 > .unit {
        width: auto;
        float: none;
    }
}

Je fouillais dans la source OOCSS, et je suis tombé sur grids/grids_iphone.css. Cela donne quelques crédibilité à ma stratégie. Est-ce que quelqu'un sait si !important est obligatoire? La sélectivité semble fonctionner pour moi sans -- probablement à cause des deux sélecteurs de classe.

@media screen and (max-width: 319px) {
    .unit {
        float: none !important;
        width: auto !important;
    }
}

Et voici une page le montrant en action. J'ai utilisé le test de grille de Nicole Sullivan d'Arnaud Gueras, mais avec plus de texte de remplissage. Remarquez que j'ai laissé un segment 2sur2 intentionnellement non linéarisé, pour démontrer qu'il n'est pas nécessaire de linéariser tout.

Answer 2

Parce qu'elle a dit d'éviter !important sauf s'il s'agit d'un nœud feuille lors de la conférence Velocity, il est étrange qu'elle l'ait mis dans son code.

Answer 3

Découvrez Cascade Framework. Il a une architecture OOCSS et prend en charge le design responsive dès le départ (bien que ce soit facultatif et peut être omis si vous le souhaitez).

Avec Cascade Framework, vous implémenteriez votre exemple de la manière suivante :

            1/2
            Lorem ipsum dolor sit amet...

            1/2
            Lorem ipsum dolor sit amet...