General restructure and cleanup + fixes (#1)

* Switch to compiling of SCSS

* Resolve deprecations, rebrand

* Added workflows

* Update build.yml

* Update build.yml

* Fixed package.json, minor fix for workflow

* Split files

* Upload artifacts

* Don't built typography by default

* Fixed & extended util. Made typography separate

* Added a license file, updated readme

* Expanded and improved breakpoints for grid

* Fix the gutter variable not being used

* Made column count configurable, cleanup

* Update README.md

* Fixed breakpoint bugs

* Changed folder structure

.github/dependabot.yml

@@ -0,0 +1,11 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Test
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+
+jobs:
+  build:
+    name: "Build"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - run: npm i
+
+      - run: npm run build
+
+      - name: Upload CSS Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: ./build/dist/*.css

.gitignore

@@ -0,0 +1,3 @@
+
+node_modules/
+build/

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 HostByBelle
+Copyright (c) 2016 Zach Cole
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,22 +1,59 @@
-# Simple Grid
-A lightweight, responsive CSS grid  
+# Simple Grid+
 
-Developed by Zach Cole
+Lightweight (~2KB uncompressed) and responsive CSS grid & utility components for easier front-end development. Optionally includes typography as well.
 
-## Simple Grid and Simple Code
+Based on [Simple Grid](https://github.com/zachacole/Simple-Grid) originally created by Zach Cole.
 
-Simple Grid is a mobile-first 12-column CSS grid system to make developing responsive websites easy and fast.
+## Components
 
-All the code you need is simple and familiar. A parent container class contains the grid. Within the container are rows. Row classes denote rows of content, which can be filled with up to 12 columns. Columns must be nested within a row. 
+### Grid
 
-To define your column width, declare how many columns you want your content to take up on desktop and large screens. For example, if your content should take up 6 out of 12 columns (or half the container), your class name will be .col-6.
+Simple Grid+ is a mobile-first 12-column CSS grid system to make developing responsive websites easy and fast.
 
-If you don’t want columns to expand on mobile devices and small screens, simply add -sm to the end of your column class name. For example, if you want to have two blocks of content floating side-by-side on small screens, each would be given the class name .col-6-sm.
+All the code you need is simple and familiar. A parent container class contains the grid. Within the container are rows. Row classes denote rows of content, which can be filled with up to 12 columns. Columns must be nested within a row.
 
-Update: Grid styles are now available in SASS/SCSS. Hooray! Thanks to [shankariyerr](https://github.com/shankariyerr/) for contributing as well.
+```HTML
+<div class="container">
+  <div class="row">
+    <div class="col-3">
+      <!-- This content will take up 3/12 (or 1/4) of the container -->
+    </div>
+    <div class="col-3">
+      <!-- This content will take up 3/12 (or 1/4) of the container -->
+    </div>
+    <div class="col-6">
+      <!-- This content will take up 6/12 (or 1/2) of the container -->
+    </div>
+  </div>
+</div>
+```
 
-Learn more and see code samples at: http://simplegrid.io
+To control the sizing behavior, you can apply a breakpoint to your column classes (EX: `.col-6-sm`).
+Not specifying a breakpoint is equal to using the medium breakpoint (EX: `.col-6-md`).
 
-## License
+### Utility
 
-    Open source under the MIT License.
+- `left`: Aligns content to the left.
+- `right`: Aligns content to the right.
+- `center`: Centers content.
+- `justify`: Applies the "justify" content alignment.
+- `hidden-sm`
+
+### Breakpoints
+
+- `sm`: 33.75em; // 540px
+- `md`: 45em; // 720px
+- `lg`: 60em; // 960px
+
+### Typography
+
+Note: typography is not included in the default Simple Gride+ CSS files and must be included seperately.
+
+- `font-light`
+- `font-regular`
+- `font-heavy`
+
+## Building
+
+1. `npm i`
+2. `npm run build`