* Replace variables.json with colors.json and update related files accordingly
* Add variables data files
* Update variables include template and all related files to use new variables data
* Fix mobile breakpoint id typo in responsivness docs page
* Fix Liquid syntax error in made-with-bulma docs page
* Update bulma sass files count in modular docs page
* Use breakpoints data in responsiveness helpers docs page
* Use breakpoints and variables data in typography helpers docs page
* Add missing page titles in docs pages front matter
The card needs more enhancements but I need more help to determine the perfect solution for it.
the issue we face is:
- the markup needs to change and when to change the markup the style needs to change to be suitable for it.
example:
`
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
`
should be:
`
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
<button class="card-footer-item">Save</button>
<button class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
`
when I do that the style change and when I use the `button` class name the style change also, so you need to try it and edit the style as you need to card show to people.
- I replaced the <small> with <time> but the time does not have the same `font-size` so you maybe need to set `font-size` to time
