Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility updates #120

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Accessibility updates #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
04e898f
Fixes for insufficient colour contrast (#53)
Oct 10, 2019
0490ad9
Ensure every HTML document has a lang attribute
Oct 10, 2019
4e58a9e
Ensures <meta name="viewport"> does not disable text scaling and zoom…
Oct 10, 2019
a45407c
Ensures the document has only one `main` landmark
Oct 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 68 additions & 66 deletions src/html/css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,82 @@
<!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">
<link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">
</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>
83 changes: 43 additions & 40 deletions src/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">

<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">
Expand Down Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/html/layout.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
doctype html
html
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')
Expand Down
23 changes: 23 additions & 0 deletions src/scss/froala_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}