mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 00:13:59 +02:00
Code Issues Releases Wiki Activity

Added ARIA support for button elements, #40

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-13 00:29:46 +02:00
parent e5a9ba5661
commit a8fea00c58
5 changed files with 158 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/v2/DEVLOG.md
View File

@@ -186,7 +186,7 @@
## 20161025
- Issue maintenance and minor changes to issue structure on Github.
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
- Softcoded changes and optimized some things in the `button` module.
- Updated demo page.
@@ -372,7 +372,7 @@
- Moved flavors from their directory to the `src` directory. CSS files produced from flavor files will go to the `dist` folder, along with the minified versions.
- *TODO* Update the `package.json` and `bower.json` files according to the new framework version.
- Updated live demo page reference to use the new structure.
## 20161110
- Continued module restructure and cleanup as follows:
@@ -380,7 +380,7 @@
- Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module.
- Code cleanup in `grid`, indentation etc.
- Code cleanup in `table`. Media query conversions applied. Optimization.
- Code cleanup in `form`.
- Code cleanup in `form`.
- Code cleanup in `button`. Updated `file` `input`s to be accessible.
- Code cleanup in `checkbox`. Optimizations.
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
@@ -738,7 +738,7 @@
- Created a new branch for the development of v2.1.0.
- Added `$include-parent-layout` flag, which will allow rows declaring column layout for children.
- Implemented the whole *simple* layout structure for the `grid` module, allowing a `.row` to set the layout of its children, using a `.cols-{SZ}-{WD}` class.
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
- Added what is basically an *auto-grid* option in `.row.cols-sm` and similar for other sizes, that auto-sizes all columns in a given row. Might come in handy.
- Updated `index.html` to show *under 10KB* instead of *about 5KB* in the **Minimal** card in order to deal with the controversy surrounding this specific line.
@@ -759,3 +759,7 @@
- Changed the implementation of the new `footer` to `sticky`, instead of absolute.
- Rolled back all pages that were affected. Should work like a charm now!
- Finalized the `sticky` `footer`.
## 20170113
- Added support for `aria-role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB.

19
docs/v2/demo.html
View File

@@ -3,7 +3,7 @@
<head>
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> -->
<link rel="stylesheet" href="../../dist/mini-default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - v2.1.0 Test page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -15,7 +15,7 @@
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/png" href="favicon.png">
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
@@ -23,8 +23,8 @@
padding: 4px;
}
#top-area {
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
background: linear-gradient(#455a64,#192024);
}
#top-logo {
@@ -53,7 +53,7 @@
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
@@ -88,7 +88,7 @@
}
</style>
</head>
<body>
<body>
<div class="container" id="top-area">
<div class="row">
<div class="col-sm">
@@ -134,8 +134,13 @@
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
</div>
<div class="row col-sm-12">
<div>
<a aria-role="button" class="tertiary" href="#">Test span button</a>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer class="sticky"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>
</html>