Example List News

Example-List-News.markdown

Example List News

Example List News using grid Pure Css

A Pen by diegocuruma on CodePen.

License.

index.html

<header>
   <h2>Example List News</h2>
   <h3>Was designed for mobile</h3>
 </header>

<ul class="blc pure-g">
            <li class="blc-1 pure-u-1 pure-u-md-7-24 pure-u-sm-10-24" style="background:#990">
            <a href="#">  
                <div class="pure-u-md-1-1">
                <img src="http://radiopontoalternativo.com.br/one.jpg" class="pure-img" />			          </div>
                <h3> 
                Skate Ipsum 
                </h3>
                <p>
            Skate ipsum dolor sit amet, handplant Venice freestyle snake airwalk. Tuna-flip stalefish gnar bucket airwalk. Japan air casper flail crail grab Vision.
                </p>
              </a>
            </li>
            
            <li class="blc-1 pure-u-1 pure-u-md-7-24 pure-u-sm-10-24" style="background:#990">
              <a href="#"> 
                <div class="pure-u-md-1-1">
                <img src="http://radiopontoalternativo.com.br/two.jpg" class="pure-img" />			          </div>
                <h3> 
                Skate Ipsum 
                </h3>
                <p>
            Skate ipsum dolor sit amet, handplant Venice freestyle snake airwalk. Tuna-flip stalefish gnar bucket airwalk. Japan air casper flail crail grab Vision.
                </p>
              </a> 
            </li>
            
            <li class="blc-1 pure-u-1 pure-u-md-7-24 pure-u-sm-10-24" style="background:#990">
              <a href="#"> 
                <div class="pure-u-md-1-1">
                <img src="http://radiopontoalternativo.com.br/tree.jpg" class="pure-img" />			          </div>
                <h3> 
                Skate Ipsum 
                </h3>
                <p>
            Skate ipsum dolor sit amet, handplant Venice freestyle snake airwalk. Tuna-flip stalefish gnar bucket airwalk. Japan air casper flail crail grab Vision.
                </p>
              </a> 
            </li>
                
    
        </ul>

style.scss

@import "compass/css3";
*{padding:0; margin:0}
body{background:#bbb}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
h2{margin:15px 10px; font:1em 'Open Sans', sans-serif; font-weight:bold;}
h3{margin:15px 10px; font:.8em 'Open Sans', sans-serif;}

.l-box {
    padding: 1em;
 }


// BLOCO - notícias
.blc{
width: 100%;   
}
.blc-1{    
   @extend .l-box;
  p{
   font:.95em 'Open Sans', sans-serif; 
  }
  h3{
    margin-left:0;
    font-size:1em; font-weight:bold;
  }
}