DOCSEARCHbyAlgolia
Submit Docs

Pure CSS

repository·main·Indexed 12 days ago

https://github.com/pure-css/pure

A collection of small, responsive, and highly customizable CSS modules providing a lightweight foundation for web projects. Version 3.0.0 features a customizable responsive grid, base styles built on Normalize.css, and optimized styling for buttons, menus, forms, and tables, with a minified + gzip footprint of approximately 3.7KB.

Tokens
1.5K
Snippets
6
Records
10
Agent score
97%

What's inside Pure CSS

  1. Overview of Pure CSS modules

    main

    Pure is a set of small, responsive CSS modules designed as a starting point for websites and web applications. It provides essential styling without a 'cookie-cutter' look, focusing on a minimalist and highly customizable aesthetic.

    Key features include:

    • A customizable responsive grid.
    • A base built on Normalize.css for cross-browser compatibility.
    • Consistent styling for buttons (works with both <a> and <button> elements).
    • Vertical and horizontal menu styles, including dropdown support.
    • Form alignments optimized for all screen sizes.
    • Common table styles.
    • Extremely small footprint (approx. 3.7KB minified + gzip).
    • Responsive by default, with non-responsive options available.

  2. Overview of Pure Grids

    main

    Pure Grids provide a responsive grid system based on built-in unit styles. By default, Pure includes styles for 5ths-based and 24ths-based units. These unit styles are generated using the rework-pure-grids plugin for Rework.

    While Pure ships with these standard units, the underlying tooling allows developers to create custom grids using any arbitrary nth-unit base.

  3. Run Pure documentation in local development mode

    main

    Start a local development server to view the documentation. This command opens a browser window and supports live reloading, meaning most changes are reflected immediately without a server restart.

    $ npm run start

  4. Deploy the Pure documentation site

    main

    Deploy the site using the provided deployment script. You must provide your GitHub username via the GIT_USER environment variable. The site is hosted on Vercel and also automatically deploys when commits are merged to the main branch.

    $ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy

  8. Build Pure from source

    main

    If you need to build Pure from its source code, you must have Node.js and npm installed. The build process uses Grunt.

    Follow these steps:

    1. Clone the repository.
    2. Navigate to the directory.
    3. Install dependencies.
    4. Run the Grunt build task.
    git clone git@github.com:pure-css/pure.git
cd pure
npm install
grunt

  9. Configure Docusaurus for Pure CSS documentation

    main

    The Pure documentation site is built using Docusaurus. The configuration defines the site metadata, plugins, and custom fields used to display library information like versioning and module sizes.

    Key configuration areas include:

    • title and tagline: Site branding.
    • url and baseUrl: Deployment paths.
    • plugins: Includes @docusaurus/plugin-content-pages for custom pages and @docusaurus/plugin-google-analytics for tracking.
    • customFields: Injects library-specific data into the Docusaurus environment, such as PURE_DOWNLOAD_SNIPPET, moduleSizes, and pureVersion.
    module.exports = {
    title: 'Pure',
    tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
    url: 'https://pure-css.github.io',
    baseUrl: '/',
    favicon: 'img/favicon.ico',
    organizationName: 'pure-css',
    plugins: [
        ['@docusaurus/plugin-content-pages', { path: 'src/pages' }],
        ['@docusaurus/plugin-google-analytics', { trackingID: 'UA-41480445-1', anonymizeIP: true }],
    ],
    projectName: 'pure-css.github.io',
    scripts: [
        { src: 'https://kit.fontawesome.com/f7f35653b1.js', defer: true }
    ],
    themes: ['@docusaurus/theme-classic'],
    trailingSlash: true,
    customFields: {
        PURE_DOWNLOAD_SNIPPET,
        moduleSizes: moduleSizes(),
        pureVersion: version,
        repoName: 'pure',
    },
};

  10. Understand Pure CSS build file naming conventions

    main

    When building from source or browsing the pure/build/ directory, files follow specific naming conventions based on their functionality and responsiveness:

    Module-specific files

    • [module]-core.css: Minimal structural styles that serve as a base for the module.
    • [module]-nr.css: The non-responsive version of a module (rollup of core, base, and feature styles).
    • [module].css: The responsive version of a module (rollup of the non-responsive version plus responsive styles).
    • *-min.css: Minified versions of any of the above files.

    Global rollups

    • pure.css: A responsive rollup of all modules (does not include responsive grids with @media queries).
    • pure-min.css: Minified version of pure.css. Use this for production.
    • pure-nr.css: A non-responsive rollup of all modules (no @media queries).
    • pure-nr-min.css: Minified version of pure-nr.css. Use this for production.

    Grid files

    • grids-responsive.css: Unminified version of the grid stylesheet including @media queries.
    • grids-responsive-min.css: Minified version of the grid stylesheet. Use this for production.