Next Phenomenal Microbrewery

    uniformcss

    1.5.3 • Public • Published

    Logo

    UniformCSS

    A fully configurable utility class generator and
    CSS framework built for Sass projects.
    Explore the docs »

    View Site · Report Bug · Request Feature




    Table of Contents
    1. Introduction
    2. Getting Started
    3. Community
    4. Contributing
    5. License
    6. Contact

    Introduction

    UniformCSS is a fully configurable utility generator and CSS framework built entirely in Sass. Get the power of a utility-first workflow without losing the productiveness of Sass. To see documentation, visit uniformcss.com

    • Load and configure Uniform directly in Sass
    • Build complex UI without ever touching your CSS
    • Customizable CSS variable support
    • Strict and consistent naming convention
    • Collapse pseudo variants with comma compression
    • Change utility shorthands, delimiters, and more
    • Extract reusable components with apply() mixin
    • Access theme settings with API functions
    • Enjoy a wide range of colors, tints, shades, and opacities
    • Built-in custom keyframe and animation support

    Getting Started

    Here are the instructions to build your first uniform.css. Please make sure you have the prerequisites installed before continuing on with the installation steps.

    Prerequisites

    Before you get started, ensure you have the following installed.

    Install Dart Sass on Mac OS X or Linux

    Install Dart Sass with Homebrew on Mac OS X or Linux by running the following command.

    brew install sass/sass/sass

    Install Dart Sass on Windows

    Install Dart Sass with Chocolatey on Windows by running the following command.

    choco install sass

    Load and Compile Uniform

    Add Uniform as a Sass module to your main.scss project. Follow these steps to load UniformCSS, compile, and watch for changes.

    1. Clone the repository
      # Change directory to where your main sass file lives
      cd my-project/sass/
      
      # Clone project
      git clone https://github.com/ThinkUniform/uniformcss
    2. Include the Uniform module in your main.scss
      // main.scss
      @use "uniform" as *;
    3. Compile your uniform.css
      yarn uniform
    4. Alternatively, you can compile and watch for changes
      yarn uniform:watch
    5. Configure Uniform (optional)
      // main.scss
      @use "uniform" as * with (
        $config: (
          important: true,
          comma-compression: true,
          prefix: myProject,
          colors: (
            custom-color-1: red,
            custom-color-2: blue
          ),
          ...
        )
      );

    Community

    If you're ever stuck, need help, or wish to have a general discussion about this project, please get involved with the following community channels.

    Contributing

    Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. Thanks to all the people that have contributed in making this project great!

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
    3. Commit your Changes (git commit -m 'Add some AmazingFeature')
    4. Push to the Branch (git push origin feature/AmazingFeature)
    5. Open a Pull Request

    License

    The source code is licensed under the MIT agreement. You are more than welcome to clone and customize this repo to suit your needs.

    Contact

    Jin Su Park – Creator and Author
    @jinsujinsupark.com

    Install

    npm i uniformcss

    DownloadsWeekly Downloads

    211

    Version

    1.5.3

    License

    MIT

    Unpacked Size

    3.64 MB

    Total Files

    194

    Last publish

    Collaborators

    • jinsupark