Pure.CSS-概述

简介

Pure.CSS是一款基于CSS的响应式前端框架。它以简洁、轻巧为特点，仅仅有4.5KB（压缩后），且没有JavaScript依赖，适合用来快速搭建简单的网站或应用。

特点

• 响应式布局：自适应大小的栅格系统和易于使用的媒体查询。
• 极简主义：轻量级，没有JavaScript依赖，易于定制和集成。
• 网格系统：可灵活运用的栅格系统，支持12列布局。
• 样式：包括常用的CSS样式，如表格、表单、按钮、导航等。
• 设计：基于“移动优先”的设计理念，灵活且美观。

使用方法

引入 Pure.CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css" integrity="sha512-jh+3yE9u9QbNuad8Q+esn/4hwd4aPu4mw5ca5ec5l1LhJN9obS5HjnCb+73FtgdhgYeITpRctytJ+75KjkevQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

开始使用

<div class="pure-g">
  <div class="pure-u-1">
    <p>Hello, Pure.CSS!</p>
  </div>
</div>

• pure-g表示一个根级的Pure.CSS网格。
• pure-u-*用来分列，星号代表列宽（整除12，1-12）。

示例

媒体查询

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <p>1</p>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <p>2</p>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <p>3</p>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <p>4</p>
  </div>
</div>

<style>
  @media (max-width: 991px) {
    .pure-u-1-2 {
      width: 50%;
    }
  }
  @media (max-width: 767px) {
    .pure-u-1-2, .pure-u-1-4 {
      width: auto !important;
    }
  }
</style>

• 在屏幕小于992像素（md）时，四个元素将会显示成两列。
• 在屏幕小于768像素（sm）时，所有元素都将显示为单列。

登录表单

<form class="pure-form pure-form-aligned">
  <fieldset>
    <div class="pure-control-group">
      <label for="name">Username</label>
      <input id="name" type="text" placeholder="Username">
    </div>

    <div class="pure-control-group">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">
    </div>

    <div class="pure-control-group">
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
    </div>

    <div class="pure-control-group">
      <label for="optionsRadios">Options radios</label>

      <div class="pure-radio">
        <input id="radio" type="radio" name="optionsRadios" value="option1" checked>
        <label for="radio">Option One</label>
      </div>

      <div class="pure-radio">
        <input id="checkbox" type="radio" name="optionsRadios" value="option2">
        <label for="checkbox">Option Two</label>
      </div>
    </div>

    <div class="pure-controls">
      <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </div>
  </fieldset>
</form>

结尾

Pure.CSS是一款很好的响应式前端框架，既轻量，又简洁，易于使用和扩展。欢迎大家试用！