Layout example: Default

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <main class="layout-example">
    <div class="leyenda">
        <p>Container <span class="c-container"> </span> / Columnas <span class="c-col"> </span> / Espacio de contenido de las columnas <span class="c-cont"> </span></p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>2</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>3</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>4</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>5</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>6</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>7</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>8</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>9</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>10</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>11</p>
            </div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml">
                <p>12</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>2</p>
            </div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>3</p>
            </div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>4</p>
            </div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>5</p>
            </div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                <p>6</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml">
                <p>2</p>
            </div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml">
                <p>3</p>
            </div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml">
                <p>4</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <p>2</p>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <p>3</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
            <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                <p>2</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 col col-ms-mr col-sm-ml">
                <p>1</p>
            </div>
        </div>
    </div>
    <div class="leyenda">
        <p>Ejemplo de columnas anidadas: 3 columnas con 6 columnas dentro cada una de ellas</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>3</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>4</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>5</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>6</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>3</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>4</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>5</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>6</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>3</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>4</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>5</p>
                    </div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml">
                        <p>6</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="leyenda">
        <p>Ejemplo de columnas anidadas: 3 columnas con 2 columnas dentro cada una de ellas</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>1</p>
                    </div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml">
                        <p>2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>


        <main class="layout-example">
    <div class="leyenda"><p>Container <span class="c-container"> </span> / Columnas <span class="c-col"> </span> / Espacio de contenido de las columnas <span class="c-cont"> </span></p></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>1</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>2</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>3</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>4</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>5</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>6</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>7</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>8</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>9</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>10</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>11</p></div>
            <div class="col-xs-1 col-ms-1 col-sm-1 col-md-1 col-lg-1 col col-ms-mr col-sm-ml"><p>12</p></div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>1</p></div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>2</p></div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>3</p></div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>4</p></div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>5</p></div>
            <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>6</p></div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml"><p>1</p></div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml"><p>2</p></div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml"><p>3</p></div>
            <div class="col-xs-3 col-ms-3 col-sm-3 col-md-3 col-lg-3 col col-ms-mr col-sm-ml"><p>4</p></div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml"><p>1</p></div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml"><p>2</p></div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml"><p>3</p></div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>1</p></div>
            <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>2</p></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 col col-ms-mr col-sm-ml"><p>1</p></div>
        </div>
    </div>
    <div class="leyenda"><p>Ejemplo de columnas anidadas: 3 columnas con 6 columnas dentro cada una de ellas</p></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>2</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>3</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>4</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>5</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>6</p></div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>2</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>3</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>4</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>5</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>6</p></div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>2</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>3</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>4</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>5</p></div>
                    <div class="col-xs-2 col-ms-2 col-sm-2 col-md-2 col-lg-2 col col-ms-mr col-sm-ml"><p>6</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="leyenda"><p>Ejemplo de columnas anidadas: 3 columnas con 2 columnas dentro cada una de ellas</p></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>2</p></div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>2</p></div>
                </div>
            </div>
            <div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4 col col-ms-mr col-sm-ml">
                <div class="row no-margin">
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>1</p></div>
                    <div class="col-xs-6 col-ms-6 col-sm-6 col-md-6 col-lg-6 col col-ms-mr col-sm-ml"><p>2</p></div>
                </div>
            </div>
        </div>
    </div>
</main>


        
            
            /* No context defined. */

File:

Content:


                                .layout-example {
    .container{
        background-color: var(--color-accent-light);
        .row{margin-bottom: 40px;
            &.no-margin{margin-bottom: 0;}
            .col{
                background-color: var(--color-accent-dark);
                p{
                    background-color: var(--color-accent);text-align: center; color:#fff;padding:20px 0;
                }
            }
        }
    }
    .leyenda{ text-align: center; margin: 50px 0 30px;
        span{padding:5px 10px; margin: 0 10px 0 5px;
            &.c-container{background-color: var(--color-accent-light);}
            &.c-col{background-color: var(--color-accent-dark);}
            &.c-cont{background-color: var(--color-accent);}
        }
    }
}

URL: /components/raw/layout-example/layout-example.css
Filesystem Path: src/00-examples/layout-example/layout-example.css
Size: 737 Bytes

Handle: @layout-example--default
Variants (2): Default , Hipotecas
Preview:
- With layout
- Component only
Filesystem Path: src/00-examples/layout-example/layout-example.hbs

No notes defined.