Статьи

Чистая CSS-сетка от Yahoo

Август 23, 2018
  • Pure CSS — это легкая коллекция стилей от Yahoo.
  • Это отзывчивый характер.
  • Этот фреймворк создан для маленьких мобильных устройств.
  • Это легко расширить, чтобы создать свои собственные стили.
  • Эта библиотека CSS может быть загружена или включена из CDN.
  • Ссылка ниже ?
  • <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  • В этом демо , «Мы будем исследовать Сетки Layout , представленную чистым CSS» .
  • Чистые сетки , pure-g / pure-gr — родительский класс каждой сетки. Дочерние классы могут быть pure-u-1-2, pure-u-1-3, pure-u-1-4 …
  • Ниже приведен пример кода pure-g. Он предоставляет только функцию компоновки сетки. Но он не является адаптивным по своей природе. Тексты накладываются друг на друга после определенной ширины.

       Используйте
класс pure-g (
pure-g-not-responseive.html ),

<html>
 <head>
  <title>Yahoo's Pure Css Use : g-r Responsive</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  <style>
   .my-style{
    border: 1px solid green;
     border-right: 1px solid green;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
   }
  </style>
 </head>
 <body>
   
  <div class="pure-g-r">
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
  </div>
   
 </body>
</html>
  • Вывод в браузере

  • Если мы уменьшим ширину окна браузера , тогда текст начнет перекрывать другие,

 Использование класса
pure-g- r (
pure-gr-responseive.html ),

<html>
 <head>
  <title>Yahoo's Pure Css Use : g-r Responsive</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  <style>
   .my-style{
    border: 1px solid green;
     border-right: 1px solid green;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
   }
  </style>
 </head>
 <body>
   
  <div class="pure-g-r">
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
  </div>
   
 </body>
</html>
  • Вывод в браузере,
  •  pure-g-r class is pure responsive in nature. If we will reduce the width of the browser window, you can see it is not overlapping any grid or text unlike pure-g.

36
Share: