Features

Getting Started

All you need is 1 CSS file, retto.min.css to be linked in your webpage. We recommend using https://unpkg.com


Link this CSS in your HTML:


      <link rel="stylesheet" href="https://unpkg.com/allegretto">
    

You can get the latest release on Github.

Visit Repo Download .zip

You can also come and join-in on the chat!

Join the Community on Spectrum


Install it from npm or yarn like so: npm allegretto or yarn allegretto

Docs


Allegretto was created as a lightweight framework to help prototype front-end markup that requires strict A.O.D.A. (WCAG 2.0) compliance by taking advantage of HTML5 Semantic markup structures.

Below is a demo of the semantic HTML5 elements styled by Allegretto.


Customizing

allegretto comes with a basic set of CSS variables:


  :root {
    --color-primary: #0099cc;
    --color-lightGrey: #d2d6dd;
    --color-grey: #7e818b;
    --color-darkGrey: #3f4144;
    --color-error: #d43939;
    --color-success: #28bd14;
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-size: 1.6rem;
    --font-family: "Inter UI", sans-serif;
  }
      

To override the variables, just add them to your :root selector after importing retto.css.


      @import url(retto.css) 
      :root { 
        --primary-color: #da1d50; /* brand color */ 
        --grid-maxWidth: 108rem; /* max container width 1080px */
        --font: 0.9rem/1.2 "Roboto", sans-serif; /* size/line-height | family */
      } 
      /* Other styles..... */
    

Grid

The grid system is a flexbox system with a default max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the --grid-maxWidth in the :root.

Much like other frameworks, wrap your content in a .container to center it on the page.


Flexible grid

A simple way to build flexible responsive columns:

  • Add a .row container
  • Add as many .col elements as you want

Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

.col
.col
.col
.col

  <div class="row">
    <div class="col"> .col </div>
  </div>
  <div class="row">
    <div class="col"> .col </div>
    <div class="col"> .col </div>
    <div class="col"> .col </div>
  </div>
  

Sized

You can also specify the size of the columns

  • Add a .row container
  • Add a .col-n child where n can be from 1 to 12

Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4.

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-4
.col-4
.col-4
.col-12

  <div class="row">
    <div class="col-1"> .col-1 </div>
    <!-- repeat 11 times -->
  </div>
  <div class="row">
    <div class="col-4"> .col-4 </div>
    <!-- repeat twice -->
  </div>
  <div class="row">
    <div class="col-12"> .col-12 </div>
  </div>
  

Mix-n-Match

You can use a combination of flexible and sized columns.

When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

.col-2
.col-2
auto
.col-3
.col-10
auto
auto
auto
auto
auto

Pro tip: Create equal-width columns that span multiple rows by inserting a .is-full-width where you want the columns to break to a new line. Here .is-full-width is one of the utility class.


Buttons

Allegretto includes five predefined button styles, each serving its own semantic purpose.


  <a class="button">Default</a>
  <a class="button primary">Primary</a>
  <a class="button secondary">Secondary</a>
  <a class="button dark">Dark</a>
  <a class="button error">Error</a>
  <a class="button success">Success</a>
  <a class="button outline">Outline</a>
  <a class="button outline primary">Primary outline</a>
  <a class="button outline secondary">Secondary outline</a>
  <a class="button outline dark">Dark outline</a>
  <a class="button clear">Clear</a>
  <button type="button" class="button primary icon">New file <img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon"> </button>
  <button class="button icon-only"> <img src="https://icongr.am/feather/search.svg?size=24"> </button>
      


Card

The .card element is simply a container with a shadow, a border, a radius, and some padding.

You can add a simple header element with a heading tag in it to add a heading to the card.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cumque velit id.


      <div class="card">
        <p>Lorem ipsum ... </p>
      </div>    
    

Card title

A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate?


      <div class="card">
        <header>
          <h4>Card title</h4>
        </header>
        <p>A nisi ullam impedit molestiae, sapiente id, ... Quae, cupiditate?</p>
        <footer class="is-right">
          <a href="#!" class="button primary">Submit</a>
          <a href="#!" class="button">Cancel</a>
        </footer>
      </div>    
    

Tags

Labels to insert anywhere! They come in 3 sizes — small, medium, large

One Two Three Small Large


  <p>
    <span class="tag">One</span>
    <span class="tag">Two</span>
    <span class="tag">Three</span>
    <span class="tag is-small">Small</span>
    <span class="tag is-large">Large</span>
  </p>
  

Utilities

You can apply these helper classes to almost any element, in order to alter its style.

  • pull-right - floats an element to the right
  • pull-left - floats an element to the left
  • is-text-center - center aligns text
  • is-text-left - left aligns text
  • is-text-right - right aligns text
  • is-text-uppercase - text to uppercase
  • is-text-lowercase - text to lowercase
  • is-text-capitalize - capitalizes text
  • is-full-screen - makes the element 100% view height
  • is-full-width - make the element 100% width
  • is-vertical-align - vertically centers element using flex
  • is-horizontal-align - horizontal centers element using flex
  • is-center - centers element using flex
  • is-right - right aligns element using flex
  • is-left - left aligns element using flex
  • is-fixed - fixed positioned element
  • is-paddingless - removes any padding
  • is-marginless - removes any margin
  • clearfix - clears the floats
  • is-hidden - hides the element completely
  • hide-phone - hides the element for screens <480px
  • hide-tablet - hides the element for screens <768px
  • is-highlighted - useful if you want to apply highlights on hover, or style sub-text in a slider to have a highlighted look

Elements

These are all the elements styled by Allegretto, out of the box.

Text

Allegretto uses the Inter UI font. Inter UI is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.

The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom. Said no one, ever.

Lists

Definition list

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Tabular data

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Code

Keyboard input: Cmd
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.

Pre-formatted text

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~
  ~ 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ 
<h2>Pre-formatted text</h2>

Inline elements

This is a text link.
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:

Embedded content

Images

No <figure> element

Image alt text

Wrapped in a <figure> element, no <figcaption>

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text
Here is a caption for this image.

Meter

2 out of 10

Progress

progress

Form elements

Input fields

[Top]

Select menus

[Top]

Checkboxes

[Top]

Radio buttons

[Top]

Textareas

[Top]

HTML5 inputs

[Top]

Action buttons

[Top]


Components

Here are some starting components with the framework.
















Tabs




Card

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.

Tag

One Two Three Small Large

Grid

.col
.col
.col
.col
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-2
.col-2
.col-2
.col
.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-5
.col-5
.col
.col-6
.col-6
.col-7
.col
.col-1
.col-8
.col
.col-1
.col-9
.col
.col-1
.col-10
.col
.col-11
.col
.col-12

Common Helpers

Along with the base styles, we also provide some commonly used helper classes.

.hidden
The hidden class can be added to any element that you want to hide visually and from screen readers. It could be an element that will be populated and displayed later, or an element you will hide with JavaScript.

.visuallyhidden
The visuallyhidden class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.

See also:

N.B. The visuallyhidden class can be an accessibility issue for users using high contrast modes.

Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative. Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.

.invisible
The invisible class can be added to any element that you want to hide visually and from screen readers, but without affecting the layout.

As opposed to the hidden class that effectively removes the element from the layout, the invisible class will simply make the element invisible while keeping it in the flow and not affecting the positioning of the surrounding content.

N.B. Try to stay away from, and don't use the classes specified above for keyword stuffing as you will harm your site's ranking!

.clearfix
The clearfix class can be added to any element to ensure that it always fully contains its floated children.

Over the years there have been many variants of the clearfix hack, but currently, we use the micro clearfix.

.no-svg .icon-only
If you use SVGs for interactable elements such as buttons, and the SVG fails to load, a rule like this one will help maintain accessibility. Make sure it has the appropriate aria attributes set in the HTML.

Empty links will be shown by default.

Broken Images should provide some output so you notice they're broken.


Give a shout-out