Pure.CSS - Thiết lập môi trường

Có hai cách để sử dụng Pure -

Local Installation - Bạn có thể tải xuống tệp pure.css trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể đưa tệp pure.css vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

Đi đến https://purecss.io/start/ để tải xuống phiên bản mới nhất có sẵn.
Đặt tệp pure-min.css đã tải xuống vào thư mục trên trang web của bạn, ví dụ: / css.

Thí dụ

Bạn có thể bao gồm css tệp trong tệp HTML của bạn như sau:

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể đưa tệp pure.css vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN). yui.yahooapis.com cung cấp nội dung cho phiên bản mới nhất.

Chúng tôi đang sử dụng phiên bản CDN của yui.yahooapis.com trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng cách sử dụng pure.css từ PureCSS.io CDN.

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: