A free collection of HTML/CSS components to use as a starting point for new web designs.

The Markup Framework is a simple, minimalist front-end framework for designing modern websites and web apps.

An alternative to Bootstrap and Foundation, the Markup Framework is simpler and lighter. It follows the Elementary CSS web design methodology.

  • Pure HTML5 + CSS3
  • No JavaScript
  • No CSS pre-processing
  • No browser hacks
  • No bloat
  • Efficient style cascades
  • Mobile-first responsive
  • Semantic markup
  • Accessible
  • Print friendly
  • Readable source
  • Well commented
  • Concise documentation
  • Standards-compliant
  • For websites and apps

Browsers

The Markup Framework is extensively tested with these web browsers:

  • Internet Explorer (9, 10, 11)
  • IE Mobile (latest)
  • Chrome (latest)
  • Chrome for Mobile (latest)
  • Firefox (latest)
  • Firefox for Android (latest)
  • Safari (latest)
  • Safari for iOS (latest)
  • Opera (latest)
  • Opera Mobile (latest)
  • Android 4.4 browser

This framework targets modern, standards-compliant web browsers. You should not use this framework if you still need to support Internet Explorer < 9.

    Usage

    There are four parts to the Markup Framework:

    1. Reset
    2. Elements
    3. Layouts
    4. Widgets

    To start a new web design, start with the reset and elements style sheets, and one layout. Finally, choose one or more widgets – commonly occurring user interface patterns such as navigation menus, sidebars, and footnotes.

    Each component has its own style sheet. We recommend keeping them separate while you develop a new web design. This makes it easier to change things.

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    Notice that the reset style sheet comes first, followed by elements, then layout and widgets. The order is important for proper style cascades.
    

    When your design is ready for production, merge and minify the style sheets into a single cached file.
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    

    

    

    

    

    

    

    

    

    

    

    

    

    The Markup Framework provides only a starting point for new web designs. It is not intended for production as is. Choose the layout and widgets that you need, and develop your own web themes from there.
    

    You are also free to extend the style sheets with variables and mixins from your preprocessor of choice: Less, Sass, Stylus, etc.
    

    

    

    

    

    Follow
    

    For news and updates, follow us on Twitter . Comments and suggestions to , please.