@benevolar/b-css

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sample</title> <link rel="stylesheet" type="text/css" href="../css/b-css.min.css" /> </head> <body> <div class="body" > <h4 class="title-section">GRID ROW</h4> <div class="grid row " > <section> <h4>LOREM 1</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 2</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> </div> <h4 class="title-section">GRID COL</h4> <div class="grid col " > <section> <h4>LOREM 1</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 2</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> </div> <h4 class="title-section">GRID COL RESPONSIVE-COL</h4> <div class="grid col responsive-col " > <section> <h4>LOREM 1</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 2</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 4</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> </div> <h4 class="title-section">GRID ROW RESPONSIVE-ROW</h4> <div class="grid row responsive-row " > <section> <h4>LOREM 1</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 2</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section> <h4>LOREM 4</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> </div> <h4 class="title-section">GRID COL MAX-COL-12</h4> <div class="grid col max-col-12 " > <section class="col-6 " > <h4>LOREM 1 - col-6</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section class="col-6 " > <h4>LOREM 2 - col-6</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> <section class="col-12 " > <h4>LOREM 3 - col-12</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </section> </div> <h4 class="title-section">GRID ROW MAX-ROW-12</h4> <div class="grid row max-row-12 " > <div class="row-3 negative " > <h4>LOREM 1 - row-3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </div> <div class="row-6 bg-light-blue " > <h4>LOREM 2 - row-6</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </div> <div class="row-3 negative " > <h4>LOREM 3 - row-3</h4> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis itaque autem fuga rem? Quidem assumenda perferendis tempora, suscipit repudiandae quos mollitia enim nulla vel, alias, perspiciatis nam laboriosam atque adipisci? </div> </div> <h4 class="title-section">GRID ROW MAX-ROW-6 MAX-COL-6</h4> <div class="grid row max-row-6 max-col-6 " > <div class="row-6 col-1 negative " > <h4> 1) - row-6 col-1 - </h4> </div> <div class="row-2 col-3 bg-light-blue " > <h4> 2) - row-2 col-3 - </h4> </div> <div class="row-1 col-2 negative " > <h4> 3) - row-1 col-2 - </h4> </div> <div class="row-3 col-3 bg-blue " > <h4> 4) - row-3 col-3 - </h4> </div> <div class="row-1 col-1 negative " > <h4> 5) - row-1 col-1 - </h4> </div> <div class="row-2 col-2 bg-blue " > <h4> 6) - row-2 col-2 - </h4> </div> <div class="row-4 col-2 negative " > <h4> 7) - row-4 col-2 - </h4> </div> </div> <br/> <div class="grid col max-col-12 txt-white bg-grey"> <div class="bg-purple col-1 show-class"></div><div class="bg-green col-11 show-class"></div> <div class="bg-purple col-2 show-class"></div><div class="bg-green col-10 show-class"></div> <div class="bg-purple col-3 show-class"></div><div class="bg-green col-9 show-class"></div> <div class="bg-purple col-4 show-class"></div><div class="bg-green col-8 show-class"></div> <div class="bg-purple col-5 show-class"></div><div class="bg-green col-7 show-class"></div> <div class="bg-purple col-6 show-class"></div><div class="bg-green col-6 show-class"></div> <div class="bg-purple col-7 show-class"></div><div class="bg-green col-5 show-class"></div> <div class="bg-purple col-8 show-class"></div><div class="bg-green col-4 show-class"></div> <div class="bg-purple col-9 show-class"></div><div class="bg-green col-3 show-class"></div> <div class="bg-purple col-10 show-class"></div><div class="bg-green col-2 show-class"></div> <div class="bg-purple col-11 show-class"></div><div class="bg-green col-1 show-class"></div> <div class="bg-purple col-12 show-class"></div> </div> </div> <br/> </body> </html>