ESC
Documentation
Version

Getting Started

We made Madosel easy to get started making amazing Sites and Apps. We put together these guides to help you get up and running in no time. We put together some guides to help you get started ultra fast. The fastest way to start is to dowload the CSS version.

If you want the power of Sass, we created a CLI to help you create and update projects. Harness the power of variables, mixins and CSS nesting with Sass! It’s the easiest way to customize Madosel styles, use your own naming, and develop faster.
  • Looking to quickly add Madosel to your project? Use jsDelivr or UNPKG, a free open source CDN.
    JSDELIVR
    Copy
    
    <!-- CSS JSDELIVR -->
    https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel.min.css
    https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel-component.min.css
    
    <!-- JS JSDELIVR -->
    https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/js/madosel-component.min.js
    
    UNPKG
    Copy
    
    <!-- CSS UNPKG -->
    https://unpkg.com/madosel@1.0.0-alpha11/dist/css/madosel.min.css
    https://unpkg.com/madosel@1.0.0-alpha11/dist/css/madosel-component.min.css
    
    <!-- JS UNPKG -->
    https://unpkg.com/madosel@1.0.0-alpha11/dist/js/madosel-component.min.js
    
  • Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
    JSDELIVR
    Copy
    
    <!-- CSS JSDELIVR -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel-component.min.css">
    
    <!-- JS JSDELIVR -->
    <script src="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/js/madosel-component.min.js"></script>
            
    UNPKG
    Copy
    
    <!-- CSS UNPKG -->
    <link rel="stylesheet" href="https://unpkg.com/madosel@1.0.0-alpha11/dist/css/madosel.min.css">
    <link rel="stylesheet" href="https://unpkg.com/madosel@1.0.0-alpha11/dist/css/madosel-component.min.css">
    
    <!-- JS UNPKG -->
    <script src="https://unpkg.com/madosel@1.0.0-alpha11/dist/js/madosel-component.min.js"></script>
            
  • Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.
    Copy
    
    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <!-- Madosel CSS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel.min.css">
            
            <!-- Madosel Component CSS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/css/madosel-component.min.css">
    
            <!-- Madosel Component JS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha11/dist/js/madosel-component.min.js">
    
            <title>Hello, world!</title>
        </head>
    
        <body>
            <h1>Hello, world!</h1>
        </body>
    </html>
            
  • Compile Madosel with your own asset pipeline by downloading our source Sass, and documentation files.
    This option requires some additional tooling:

If you like the content
BUY ME A COFFEE