From 04e898fbea02ab8702e16678fd23ebebb17bdb4d Mon Sep 17 00:00:00 2001 From: Caroline Hagan <hello@blueocto.co.uk> Date: Thu, 10 Oct 2019 20:32:20 +0100 Subject: [PATCH 1/4] Fixes for insufficient colour contrast (#53) --- src/scss/froala_blocks.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/scss/froala_blocks.scss b/src/scss/froala_blocks.scss index 7f216e0..9bf760f 100644 --- a/src/scss/froala_blocks.scss +++ b/src/scss/froala_blocks.scss @@ -237,3 +237,26 @@ header + header { background-color: #f4f7fe; color: $font-color; } + +// ============================================== +// Accesibility overrides +// ============================================== + +// Insufficient contrast + +.btn-primary { + background-color: hsl(207, 92%, 43%); + border-color: hsl(207, 92%, 43%); +} + +.btn-outline-primary { + color: hsl(207, 92%, 43%); + border-color: hsl(207, 92%, 43%); +} + +// .lead +p { + color: hsl(215, 11%, 47%); +} + + From 0490ad9803e8d650dd06097529a86cca89b07de4 Mon Sep 17 00:00:00 2001 From: Caroline Hagan <hello@blueocto.co.uk> Date: Thu, 10 Oct 2019 20:39:27 +0100 Subject: [PATCH 2/4] Ensure every HTML document has a lang attribute --- src/html/css.html | 2 +- src/html/index.html | 2 +- src/html/layout.pug | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/html/css.html b/src/html/css.html index bb7f48f..c545899 100644 --- a/src/html/css.html +++ b/src/html/css.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> diff --git a/src/html/index.html b/src/html/index.html index 9a92e3d..feff33c 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <title>Froala Design Blocks</title> diff --git a/src/html/layout.pug b/src/html/layout.pug index 504ef7c..0660d7f 100644 --- a/src/html/layout.pug +++ b/src/html/layout.pug @@ -1,5 +1,5 @@ doctype html -html +html(lang='en') block vars head title Froala Design Blocks - #{blockName} From 4e58a9e79277bd712128a029fbddc680b1840022 Mon Sep 17 00:00:00 2001 From: Caroline Hagan <hello@blueocto.co.uk> Date: Thu, 10 Oct 2019 20:41:26 +0100 Subject: [PATCH 3/4] Ensures <meta name="viewport"> does not disable text scaling and zooming. --- src/html/index.html | 2 +- src/html/layout.pug | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/html/index.html b/src/html/index.html index feff33c..841b87c 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -3,7 +3,7 @@ <head> <title>Froala Design Blocks</title> - <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> diff --git a/src/html/layout.pug b/src/html/layout.pug index 0660d7f..fcb8e12 100644 --- a/src/html/layout.pug +++ b/src/html/layout.pug @@ -3,7 +3,7 @@ html(lang='en') block vars head title Froala Design Blocks - #{blockName} - meta(name='viewport', content='width=device-width, height=device-height, initial-scale=1.0') + meta(name='viewport', content='width=device-width, initial-scale=1.0') link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO', crossorigin='anonymous') link(href='https://fonts.googleapis.com/css?family=Lato', rel='stylesheet') link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.3.1/css/all.css') From a45407cc74db5f000729d47c478edef691408ef9 Mon Sep 17 00:00:00 2001 From: Caroline Hagan <hello@blueocto.co.uk> Date: Thu, 10 Oct 2019 20:43:13 +0100 Subject: [PATCH 4/4] Ensures the document has only one `main` landmark --- src/html/css.html | 132 ++++++++++++++++++++++---------------------- src/html/index.html | 79 +++++++++++++------------- 2 files changed, 108 insertions(+), 103 deletions(-) diff --git a/src/html/css.html b/src/html/css.html index c545899..d17921c 100644 --- a/src/html/css.html +++ b/src/html/css.html @@ -7,74 +7,76 @@ </head> <body> - <section class="fdb-block"> - <div class="container"> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius dolor purus, et eleifend lectus congue id. Quisque tempor metus ligula, lacinia rutrum enim ultrices eget. Etiam vitae sem massa. Pellentesque vestibulum ex lectus, nec cursus - tortor sollicitudin ut. Nullam volutpat ligula ut odio condimentum, sit amet facilisis nulla tempus. Morbi et hendrerit diam, sit amet luctus orci. Quisque egestas, lacus ac iaculis accumsan, quam eros tempus sem, ac ultrices felis eros porttitor - nibh. Nunc condimentum mauris dapibus, pretium ipsum ac, lacinia nisi. Nulla facilisi.</p> + <main> + <section class="fdb-block"> + <div class="container"> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius dolor purus, et eleifend lectus congue id. Quisque tempor metus ligula, lacinia rutrum enim ultrices eget. Etiam vitae sem massa. Pellentesque vestibulum ex lectus, nec cursus + tortor sollicitudin ut. Nullam volutpat ligula ut odio condimentum, sit amet facilisis nulla tempus. Morbi et hendrerit diam, sit amet luctus orci. Quisque egestas, lacus ac iaculis accumsan, quam eros tempus sem, ac ultrices felis eros porttitor + nibh. Nunc condimentum mauris dapibus, pretium ipsum ac, lacinia nisi. Nulla facilisi.</p> - <br> - <h2>Button styles</h2> - <p> - <a href="#" class="btn btn-primary">Button</a> - <a href="#" class="btn btn-outline-primary">Button Empty</a> - <a href="#" class="btn btn-dark">Button Black</a> - <a href="#" class="btn btn-dark btn-outline-dark">Button Black Empty</a> + <br> + <h2>Button styles</h2> + <p> + <a href="#" class="btn btn-primary">Button</a> + <a href="#" class="btn btn-outline-primary">Button Empty</a> + <a href="#" class="btn btn-dark">Button Black</a> + <a href="#" class="btn btn-dark btn-outline-dark">Button Black Empty</a> - <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> - <a href="#" class="btn btn-light">Button White</a> - <a href="#" class="btn btn-light btn-outline-light">Button White Empty</a> - </div> - </p> + <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> + <a href="#" class="btn btn-light">Button White</a> + <a href="#" class="btn btn-light btn-outline-light">Button White Empty</a> + </div> + </p> - <br> - <h2>Buttons with shadows</h2> - <p> - <a href="#" class="btn btn-shadow">Button</a> - <a href="#" class="btn btn-outline-primary btn-shadow">Button Empty</a> - <a href="#" class="btn btn-dark btn-shadow">Button Black</a> - <a href="#" class="btn btn-dark btn-outline-dark btn-shadow">Button Black Empty</a> - <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> - <a href="#" class="btn btn-light btn-shadow">Button White</a> - <a href="#" class="btn btn-light btn-outline-light btn-shadow">Button White Empty</a> - </div> - <a href="#">Link</a> - </p> + <br> + <h2>Buttons with shadows</h2> + <p> + <a href="#" class="btn btn-shadow">Button</a> + <a href="#" class="btn btn-outline-primary btn-shadow">Button Empty</a> + <a href="#" class="btn btn-dark btn-shadow">Button Black</a> + <a href="#" class="btn btn-dark btn-outline-dark btn-shadow">Button Black Empty</a> + <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> + <a href="#" class="btn btn-light btn-shadow">Button White</a> + <a href="#" class="btn btn-light btn-outline-light btn-shadow">Button White Empty</a> + </div> + <a href="#">Link</a> + </p> - <br> - <h2>Rounded buttons</h2> - <p> - <a href="#" class="btn btn-primary">Button</a> - <a href="#" class="btn btn-outline-primary btn-round">Button Empty</a> - <a href="#" class="btn btn-dark btn-round">Button Black</a> - <a href="#" class="btn btn-dark btn-outline-dark btn-round">Button Black Empty</a> - <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> - <a href="#" class="btn btn-light btn-round">Button White</a> - <a href="#" class="btn btn-light btn-outline-light btn-round">Button White Empty</a> - </div> - </p> + <br> + <h2>Rounded buttons</h2> + <p> + <a href="#" class="btn btn-primary">Button</a> + <a href="#" class="btn btn-outline-primary btn-round">Button Empty</a> + <a href="#" class="btn btn-dark btn-round">Button Black</a> + <a href="#" class="btn btn-dark btn-outline-dark btn-round">Button Black Empty</a> + <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;"> + <a href="#" class="btn btn-light btn-round">Button White</a> + <a href="#" class="btn btn-light btn-outline-light btn-round">Button White Empty</a> + </div> + </p> - <br> - <h1>Heading 1 + P</h1> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - <h2>Heading 2 + P</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - <h3>Heading 3 + P</h3> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - <h4>Heading 4 + P</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - <h5>Heading 5 + P</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - <h6>Heading 6 + P</h6> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - </div> - </section> -</body> + <br> + <h1>Heading 1 + P</h1> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <h2>Heading 2 + P</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <h3>Heading 3 + P</h3> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <h4>Heading 4 + P</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <h5>Heading 5 + P</h5> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <h6>Heading 6 + P</h6> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + </div> + </section> + </main> -</html> +</body> +</html> \ No newline at end of file diff --git a/src/html/index.html b/src/html/index.html index 841b87c..0800350 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -40,51 +40,54 @@ </head> <body> - <section class="fdb-block py-0 my-5"> - <div class="container bg-r py-5" style="background-image: url(./imgs/shapes/1.svg);"> - <div class="row justify-content-start"> - <div class="col-12 col-sm-10 col-md-8 text-center text-sm-left"> - <h1>Froala Design Blocks</h1> - <p class="lead">Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p> - <p class="mt-4"> - <a class="btn btn-dark mr-3 mr-sm-0" href="https://github.com/froala/design-blocks"><i class="fab fa-github"></i> Github Docs</a> - <a class="btn btn-primary ml-sm-3 mr-3 mr-sm-0 mt-3 mt-sm-0" href="https://froala.com/design-blocks#playground">Official Website</a> - </p> + + <main> + <section class="fdb-block py-0 my-5"> + <div class="container bg-r py-5" style="background-image: url(./imgs/shapes/1.svg);"> + <div class="row justify-content-start"> + <div class="col-12 col-sm-10 col-md-8 text-center text-sm-left"> + <h1>Froala Design Blocks</h1> + <p class="lead">Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p> + <p class="mt-4"> + <a class="btn btn-dark mr-3 mr-sm-0" href="https://github.com/froala/design-blocks"><i class="fab fa-github"></i> Github Docs</a> + <a class="btn btn-primary ml-sm-3 mr-3 mr-sm-0 mt-3 mt-sm-0" href="https://froala.com/design-blocks#playground">Official Website</a> + </p> + </div> </div> </div> - </div> - </section> + </section> - <section class="fdb-block p-2" id="navigator"> - <div class="container-fluid"> - <nav class="navbar navbar-expand-md"> - <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0"> - <p class="m-auto"> - <a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a> - <a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a> - <a class="btn btn-outline-primary m-1" href="contents.html">Contents</a> - <a class="btn btn-outline-primary m-1" href="features.html">Features</a> - <a class="btn btn-outline-primary m-1" href="footers.html">Footers</a> - <a class="btn btn-outline-primary m-1" href="forms.html">Forms</a> - <a class="btn btn-outline-primary m-1" href="headers.html">Headers</a> - <a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a> - <a class="btn btn-outline-primary m-1" href="teams.html">Teams</a> - <a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a> - </p> - </div> - </nav> - </div> - </section> + <section class="fdb-block p-2" id="navigator"> + <div class="container-fluid"> + <nav class="navbar navbar-expand-md"> + <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0"> + <p class="m-auto"> + <a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a> + <a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a> + <a class="btn btn-outline-primary m-1" href="contents.html">Contents</a> + <a class="btn btn-outline-primary m-1" href="features.html">Features</a> + <a class="btn btn-outline-primary m-1" href="footers.html">Footers</a> + <a class="btn btn-outline-primary m-1" href="forms.html">Forms</a> + <a class="btn btn-outline-primary m-1" href="headers.html">Headers</a> + <a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a> + <a class="btn btn-outline-primary m-1" href="teams.html">Teams</a> + <a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a> + </p> + </div> + </nav> + </div> + </section> - <div id="playground"> - </div> + <div id="playground"> + </div> + </main> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> -</html> +</html> \ No newline at end of file