2017-03-30 08:00:14 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Grids< / title >
< link rel = "stylesheet" href = "../dist/chota.min.css" >
2017-04-02 22:22:13 +03:00
< style >
.nav {
border: 1px solid red;
}
< / style >
2017-03-30 08:00:14 +03:00
< / head >
< body >
< nav class = "nav" >
< div class = "container" >
< div class = "nav-left" >
< h2 class = "brand" >
< a href = "#" > Logo< / a >
< / h2 >
< / div >
< div class = "nav-center" >
2017-04-02 22:22:13 +03:00
< a class = "button outline" href = "#" > Centered< / a >
2017-03-30 08:00:14 +03:00
< / div >
< div class = "nav-right" >
< a href = "#!1.html" > Link 1< / a >
< a href = "#!2.html" > Link 2< / a >
< a href = "#!3.html" > Link 3< / a >
< / div >
< / div >
< / nav >
2017-04-02 22:22:13 +03:00
< br >
< nav class = "nav" >
< div class = "nav-left" >
< h2 class = "brand" >
< a href = "#" > Logo< / a >
< / h2 >
< / div >
< div class = "nav-center" >
< a href = "#" > Centered< / a >
< / div >
< div class = "nav-right" >
< a href = "#!1.html" > Link 1< / a >
< a href = "#!2.html" > Link 2< / a >
< a href = "#!3.html" > Link 3< / a >
< / div >
< / nav >
2017-03-30 08:00:14 +03:00
< div class = "container" >
< h1 > Nav< / h1 >
< nav class = "nav" >
< div class = "nav-center" >
< a href = "#!1.html" > Link 1< / a >
< a href = "#!2.html" > Link 2< / a >
< a href = "#!3.html" > Link 3< / a >
2017-04-02 22:22:13 +03:00
< a href = "#!" class = "button primary" > Button< / a >
2017-03-30 08:00:14 +03:00
< / div >
< / nav >
2017-04-02 22:22:13 +03:00
< br > < hr > < br >
< nav class = "nav" >
< div class = "nav-left" >
< h3 class = "brand" > < a href = "#" > Brand< / a > < / h3 >
< / div >
< div class = "nav-right" >
< div class = "tabs" >
< a href = "#!1.html" > Link 1< / a >
< a href = "#!2.html" > Link 2< / a >
< a href = "#!3.html" > Link 3< / a >
< / div >
< / div >
< / nav >
< br > < hr > < br >
< nav class = "nav" >
< div class = "nav-left" >
< a class = "brand" href = "#" >
< img src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt = "" >
< / a >
2017-03-30 08:00:14 +03:00
< div class = "tabs" >
2017-04-02 22:22:13 +03:00
< a href = "#!1.html" > Link 1< / a >
< a href = "#!2.html" > Link 2< / a >
< a href = "#!3.html" > Link 3< / a >
2017-03-30 08:00:14 +03:00
< / div >
< / div >
2017-04-02 22:22:13 +03:00
< / nav >
< br > < hr > < br >
< h1 > Tabs< / h1 >
< div class = "tabs" >
< a class = "active" href = "#!1.html" > Tab 1< / a >
< a href = "#!2.html" > Tab 2< / a >
< a href = "#!3.html" > Tab 3< / a >
< / div >
< br > < hr > < br >
< div class = "tabs is-full" >
< a class = "active" href = "#!1.html" > Tab 1< / a >
< a href = "#!2.html" > Tab 2< / a >
< a href = "#!3.html" > Tab 3< / a >
2017-03-30 08:00:14 +03:00
< / div >
< h1 > Card< / h1 >
< div class = "row is-center" >
< div class = "col-4" >
< div class = "card" >
< header >
< h4 > Card title< / h4 >
< / header >
< p > 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.< / p >
< footer class = "is-right" >
< a href = "#!" class = "button primary" > Submit< / a >
< a href = "#!" class = "button" > Cancel< / a >
< / footer >
< / div >
< / div >
< div class = "col-6" >
< div class = "card" >
< p > 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.< / p >
< p > Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis, debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!< / p >
< / div >
< / div >
< / div >
< h1 > Grid< / h1 >
< div class = "row" >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-2" >
< div class = "card is-center" > .col-2< / div >
< / div >
< div class = "col-2" >
< div class = "card is-center" > .col-2< / div >
< / div >
< div class = "col-2" >
< div class = "card is-center" > .col-2< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-3" >
< div class = "card is-center" > .col-3< / div >
< / div >
< div class = "col-3" >
< div class = "card is-center" > .col-3< / div >
< / div >
< div class = "col-3" >
< div class = "card is-center" > .col-3< / div >
< / div >
< div class = "col-3" >
< div class = "card is-center" > .col-3< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-4" >
< div class = "card is-center" > .col-4< / div >
< / div >
< div class = "col-4" >
< div class = "card is-center" > .col-4< / div >
< / div >
< div class = "col-4" >
< div class = "card is-center" > .col-4< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-5" >
< div class = "card is-center" > .col-5< / div >
< / div >
< div class = "col-5" >
< div class = "card is-center" > .col-5< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-6" >
< div class = "card is-center" > .col-6< / div >
< / div >
< div class = "col-6" >
< div class = "card is-center" > .col-6< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-7" >
< div class = "card is-center" > .col-7< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-8" >
< div class = "card is-center" > .col-8< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-9" >
< div class = "card is-center" > .col-9< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< div class = "col-1" >
< div class = "card is-center" > .col-1< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-10" >
< div class = "card is-center" > .col-10< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-11" >
< div class = "card is-center" > .col-11< / div >
< / div >
< div class = "col" >
< div class = "card is-center" > .col< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-12" >
< div class = "card is-center" > .col-12< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
