GridStrap

Il framework per lo sviluppo web in Grid CSS

download documentation

Il framework con Grid CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eius, illo dicta quam harum, alias architecto, delectus sit fugiat maiores iusto ipsam reprehenderit nisi dignissimos tempore. Perspiciatis impedit id vitae!

Documentation

1 - GRIDS

class .grid-25

25%

            
                
            <section class="grid-25 gap-2 my-2 tac">
               
                <article>
                    <p>25%</p>
                </article>
                
                <article>
                    <p>25%</p>
                </article>
                
                <article>
                    <p>25%</p>
                </article>
                
                <article>
                    <p>25%</p>
                </article>
                
            </section>

class .grid-33

33%

            
                
            <section class="grid-33 gap-2 my-2 tac">
               
                <article>
                    <p>33%</p>
                </article>
                
                <article>
                    <p>33%</p>
                </article>
                
                <article>
                    <p>33%</p>
                </article>
                
            </section>

class .grid-50

50%

            
            
            <section class="grid-50 gap-2 my-2 tac">

                <article>
                    <p>50%</p>
                </article>

                <article>
                    <p>50%</p>
                </article>

            </section>

class .grid-66

66%

33%

            
            
            <section class="grid-66 gap-2 my-2 tac">

                <article>
                    <p>66%</p>
                </article>

                <article>
                    <p>33%</p>
                </article>

            </section>

class .grid-66-reverse

33%

66%

            
            
            <section class="grid-66-reverse gap-2 my-2 tac">

                <article>
                    <p>33%</p>
                </article>

                <article>
                    <p>66%</p>
                </article>

            </section>

2 - NAVBAR

Dark Header Full-Width

        
        
            <header id="header" class="dark">
                <a href="" class="logo">GridStrap</a>
                <a href="" class="hb">
                   <div>
                        <span></span>
                        <span></span>
                    </div>
                </a>
            </header>
            <nav class="dark" id="nav">
                <a href="">Item</a>
                <a href="">Item</a>
                <a href="">Item</a>
            </nav>

Light Header Full-Width

        
            
                <header id="header" class="light">
                    <a href="" class="logo">GridStrap</a>
                    <a href="" class="hb">
                       <div>
                            <span></span>
                            <span></span>
                        </div>
                    </a>
                </header>
                <nav class="light" id="nav">
                    <a href="">Item</a>
                    <a href="">Item</a>
                    <a href="">Item</a>
                </nav>

Color Header Full-Width

            
            
                <header id="header" class="color">
                    <a href="" class="logo">GridStrap</a>
                    <a href="" class="hb">
                       <div>
                            <span></span>
                            <span></span>
                        </div>
                    </a>
                </header>
                <nav class="color" id="nav">
                    <a href="">Item</a>
                    <a href="">Item</a>
                    <a href="">Item</a>
                </nav>

3 - TYPOGRAPHY

The Inter typeface family

                
                    
                        font-family: 'inter', sans-serif;

class .huge

Header 1 - HUGE

class .large

Header 2 - LARGE

class .bigger

Header 3 - BIGGER

class .big

Header 4 - BIG

class .normal

Header 5 - NORMAL

class .small