Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
devwiki:gui [2015/10/02 00:59]
ying [Flat Web Design layout]
devwiki:gui [2016/10/20 01:17] (current)
Line 107: Line 107:
   ​   ​
  
 +  * Example of foundation framework
 +    * html <code html><​!doctype html>
 +<​html>​
 +    <​head>​
 +        <​title>​a flat design</​title>​
 +        <meta charset="​UTF-8">​
 +        <link rel="​stylesheet"​ href="​css/​foundation.min.css">​
 +        <link rel="​stylesheet"​ href="​css/​custom.css">​
 +        <link href='​https://​fonts.googleapis.com/​css?​family=Open+Sans:​400,​400italic,​600,​600italic,​700,​700italic,​800,​800italic,​300,​300italic'​ rel='​stylesheet'​ type='​text/​css'>​
 +        <link href='​https://​fonts.googleapis.com/​css?​family=Lato:​400,​100,​100italic,​300,​300italic,​400italic,​700,​700italic,​900,​900italic'​ rel='​stylesheet'​ type='​text/​css'>​
 +        <link href='​https://​fonts.googleapis.com/​css?​family=Pacifico'​ rel='​stylesheet'​ type='​text/​css'>​
 +    </​head>​
 +    <​body>​
 +        <div class="​container-spacy bg-orange">​
 +            <header class="​row"​ id="​main">​
 +                <div class="​large-4 column">​
 +                    <div class="​brand">​
 +                        <a href="#">​Coloristic</​a>​
 +                    </​div>​
 +                </​div>​
 +                <nav id="​main"​ class="​large-8 column">​
 +                    <ul>
 +                        <​li><​a href="#">​Home</​a></​li>​
 +                        <​li><​a href="#">​Service</​a></​li>​
 +                        <​li><​a href="#">​Portfolio</​a></​li>​
 +                        <​li><​a href="#">​Blog</​a></​li>​
 +                        <​li><​a href="#">​About</​a></​li>​
 +                        <​li><​a href="#">​Contact</​a></​li>​
 +                        <​li><​a href="#"​ class="​button button-primary">​Sign up</​a></​li>​
 +                    </ul>
 +                </​nav>​
 +            </​header>​
 +            <div class="​row feature">​
 +                <div class="​large-5 column">​
 +                    <​h1>​Make Things Happen.</​h1>​
 +                </​div>​
 +                <div class="​large-7 column">​
 +                    <img src="​imac.png"​ alt=""​ height="​400"​ width="​400">​
 +                </​div>​
 +            </​div>​
 +            ​
 +        </​div>​
 +    ​
 +        <div class="​container-spacy bg-white">​
 +            <div class="​row features">​
 +                <div class="​large-4 column">​
 +                    <img src="​call.png"​ alt=""​ height="​64"​ width="​64">​
 +                    <​h5>​Call Anyone</​h5>​
 +                    <​p>​Dial anyone in just 1 click without pain.</​p>​
 +                </​div>​
 +                <div class="​large-4 column">​
 +                    <img src="​music.png"​ alt=""​ height="​64"​ width="​64">​
 +                    <​h5>​Music Anywhere</​h5>​
 +                    <​p>​Feel in air anywhere, bus or boat.</​p>​
 +                </​div>​
 +                <div class="​large-4 column">​
 +                    <img src="​mail.png"​ alt=""​ height="​64"​ width="​64">​
 +                    <​h5>​Mail Unstop</​h5>​
 +                    <​p>​Stay in contact and in line.</​p>​
 +                </​div>​
 +            </​div>​
 +        </​div>​
 +        <div class="​container-spacy bg-green recent">​
 +            <​h2>​Recent Works</​h2>​
 +            <​p>​Tons of to do, lots of to work. I have no idea.</​p>​
 +            ​
 +            <ul class="​list-line">​
 +                <li class="​marked"​ ><a href="#">​All</​a></​li>​
 +                <​li><​a href="#">​Web</​a></​li>​
 +                <​li><​a href="#">​Mobile</​a></​li>​
 +                <​li><​a href="#">​Design</​a></​li>​
 +                <​li><​a href="#">​Photo</​a></​li>​
 +                <​li><​a href="#">​Type</​a></​li>​
 +            </ul>
 +            ​
 +            <div class="​row">​
 +                <div class="​large-4 small-6 column">​
 +                    <div class="​item bg-grey">​AAAA</​div>​
 +                </​div>​
 +                <div class="​large-4 small-6 column">​
 +                    <div class="​item bg-white">​AAAA</​div>​
 +                </​div>​
 +                <div class="​large-4 column">​
 +                    <div class="​item bg-blue">​AAAA</​div>​
 +                </​div>​
 +            </​div>​
 +            <div class="​row">​
 +                <div class="​large-4 small-6 column">​
 +                    <div class="​item bg-red">​AAAA</​div>​
 +                </​div>​
 +                <div class="​large-4 small-6 column">​
 +                    <div class="​item bg-yellow">​AAAA</​div>​
 +                </​div>​
 +                <div class="​large-4 column">​
 +                    <div class="​item bg-dark">​AAAA</​div>​
 +                </​div>​
 +            </​div>​
 +            <a href="#"​ class="​button button-2nd">​Show More</​a>​
 +            ​
 +        </​div>​
 +    </​body>​
 +</​html>​
 +
 +</​code>​
 +  * css <code css>body {
 +    font-family:"​Open Sans";
 +}
 +/*
 +    headers
 + */
 +
 +h1,​h2,​h3,​h4,​h5{
 +    font-family:​ "​lato";​
 +}
 +
 +.container {
 +    padding: 40px 20px; /* top-btm, left-right */
 +}
 +
 +.container-spacy {
 +    padding: 80px 20px;
 +}
 +
 +/* color */
 +.bg-orange {
 +    background-color:​ #f8bc3b;
 +}
 +.bg-white {
 +    background-color:​ white;
 +}
 +.bg-green {
 +    background-color:​ #27ae60;
 +}
 +.bg-grey {
 +    background-color:​ #3a3a3a;
 +}
 +.bg-red {
 +    background-color:​ red;
 +}
 +.bg-yellow {
 +    background-color:​ #fec400;
 +}
 +.bg-blue {
 +    background-color:​ #7ecefd;
 +}
 +.bg-dark {
 +    background-color:​ #111111;
 +}
 +
 +.button {
 +    padding: 14px 30px;
 +    border-radius:​ 5px;
 +}
 +.button-primary,​.button-primary:​hover {
 +    background: #3a3a3a;
 +    color:​white;​
 +}
 +.button-2nd,​.button-2nd:​hover {
 +    background: #fff;
 +    color: #3a3a3a;
 +}
 +
 +/* headers */
 +header#main {
 +    margin-bottom:​ 40px;
 +}
 +
 +header#main .brand a{
 +    display: block;
 +    font-family:​ "​Pacifico";​
 +    font-size: 2em;
 +    color:#​393f4a;​
 +    margin-bottom:​ 20px;
 +}
 +
 +nav#main ul{
 +    list-style-type:​ none;
 +    margin: 0;
 +    padding: 9;
 +    float: right;
 +}
 +nav#main ul li{
 +    display: inline-block;​
 +    margin-right:​ 20px;
 +}
 +nav#main ul li:​last-child{
 +    margin-right:​ 0px;
 +}
 +nav#main ul li a{
 +    font-size: 78%;
 +    text-transform:​ uppercase;
 +    font-weight:​ 600;
 +    ​
 +}
 +nav#main ul li a:​not(.button){
 +    color:#​393f4a;​
 +}
 +
 +
 +.feature {
 +    margin-top:​20px;​
 +    text-align: center;
 +}
 +.feature h1{
 +    text-align: left;
 +    font-size: 5.5em;
 +    color:​white;​
 +    text-transform:​ uppercase;
 +    font-weight:​ 900;
 +    line-height:​ 70px;
 +    margin-top: 60px;
 +    margin-bottom:​ 40px;
 +}
 +
 +.features {
 +    text-align: center;
 +}
 +
 +.features h5{
 +    font-weight:​ 600;
 +    font-size: 1.4em;
 +}
 +
 +.features p{
 +    font-size:​80%;​
 +    margin-bottom:​ 40px;
 +}
 +
 +.features img{
 +    margin-bottom:​ 20px;
 +}
 +
 +.recent {
 +    text-align: center;
 +}
 +.recent h2 {
 +    text-transform:​ uppercase;
 +    color: white;
 +    letter-spacing:​ 3px;
 +}
 +.recent p{
 +    margin: 0 auto 60px auto;
 +    color: white;
 +}
 +
 +.recent .item{
 +    padding: 100px 0;
 +    margin-top: 30px;
 +}
 +.recent ul li a{
 +    color: white;
 +    border: 2px solid transparent;​
 +    padding: 8px 20px;
 +    border-radius:​ 5px;
 +    font-weight:​ 600;
 +}
 +
 +.recent ul li.marked a{
 +    color: #27ae60;
 +    background: white; ​   ​
 +}
 +.recent ul li a:hover{
 +    border: 2px solid #fff;
 +}
 +.recent .button-2nd{
 +    margin-top: 20px;
 +    font-weight:​ 600;
 +}
 +
 +
 +
 +.list-line {
 +    list-style-type:​ none;
 +}
 +.list-line li{
 +    display: inline-block;​
 +    margin: 0 20px;
 +    margin-bottom:​ 40px;
 +}
 +
 +</​code>​
 ====== Web Tool and Framework ====== ====== Web Tool and Framework ======