Présentation
Tiny Typo is a CSS base for web editorial content, ready for use, for readable web pages, on all media.
This microframework makes the typographic minimum necessary for the writing of web documents. Compliant with W3C standards, Tiny Typo is designed for all devices, naturally responsive, without forgetting print, multilingualism and accessibility.
How to use?
Tiny Typo holds only two files! Easy to use, it's a foundation for your own styles. Made of HTML and CSS, it's simple and robust, very light (no image, no font, no JavaScript).
1. Install
the style sheet
Apply the Tiny Typo styles:
- Drop the file
tinytypo.css
in yourcss/
folder. -
Add Tiny Typo in your web pages:
<link rel="stylesheet" href="css/tinytypo.css">
2. Check
with the test page
Use the tinytypo.html
file to view and check your styles. It displays all the HTML elements that are used to write on the Web (HTML5, XHTML and HTML 4). It allows you to adjust your styles to your liking.
You can use it alone (without the Tiny Typo styles), on any web project, as it's an independent test page.
Demonstrative and explanatory, this file also serves as pedagogical support.
3. Customize
To make customization easy, very few colors and fonts are defined in Tiny Typo. Add your fonts and colors to your own style sheet: write your CSS declarations in a new file, for example named custom.css
.
Practical CSS selectors are also available to complete native HTML. They are presented in the demo page (translation coming soon), which also serves as documentation. Use them in your HTML pages.
Advanced use
So that you can choose only those you need, Tiny Typo is also available in several files (organized according to Daisy nomenclature). Generated via preprocessing LESS (and SCSS soon), Tiny Typo is configurable via a dozen variables, which allow you to customize more.
Showcase
Tiny Typo is used by the watch webapp Poche, Visions Carto, the RGAA by Tanaguru, Mooshka Belmont and her Copyleft Library… and several blogs under WordPress, under Dotclear and under SPIP.