briannhinton/salt

Simple CSS starter to kickstart projects.

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

This is an opinionated, and simple starter CSS file to use an alternative to a large framework.

Built With

• Code

Getting Started

To get started follow these simple example steps.

Installation

1. Clone the repo

   git clone https://github.com/mrbrianhinton/css-starter

2. Update any CSS variables (color for instance)

   :root {
   /* Before */
   --color-white: #fff;
   /* Updated */
   --color-white: #fafafa;
   }

3. The import the stylesheet into your project

   <link rel="stylesheet" src="styles.css">

(back to top)

Usage

To use the starter reference the variables when shaping the CSS for your layouts.

:root {
   /* Spacing */
  --space-eighth: 0.2rem;

  /* Font Weights */
  --weight-regular: 400;
}

.header {
  padding: var(--space-eighth);
  font-weight: var(--weight-regular);
}

The advantage of a simple starter is that it's all about mixing in your own styles, and you can take advantage of modern CSS without it having to be baked into the framework you are using.

@container sidebar (min-width: 400px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: var(--space-quad);
  }
}

Then you can keep adding, and growing when you see patterns emerge.

(back to top)

Roadmap

• Clean up default fonts, and set a new opinionated default font
• Add helpers for Flex and Grid

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

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

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Brian Hinton - @RealTinyPenguin

(back to top)