From ba23dd246c058366377bb2e85e585665643310fa Mon Sep 17 00:00:00 2001 From: Hossam Gouda Date: Fri, 13 Jun 2025 22:59:49 +0300 Subject: [PATCH] Update grid to use Sass math.div() for division deprecation, improve documentation, and include MIT license with contribution details --- LICENSE | 21 ++++++++++ README.md | 20 ++++++++-- simple-grid.scss | 101 +++++++++++++++++++++++++++++++++++------------ 3 files changed, 113 insertions(+), 29 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..15d56df --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +# MIT License + +Copyright (c) 2025 + +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. \ No newline at end of file diff --git a/README.md b/README.md index 65164b6..b986c09 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Simple Grid -A lightweight, responsive CSS grid + +A lightweight, responsive CSS grid Developed by Zach Cole @@ -7,7 +8,7 @@ Developed by Zach Cole Simple Grid is a mobile-first 12-column CSS grid system to make developing responsive websites easy and fast. -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. +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. 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. @@ -15,8 +16,19 @@ If you don’t want columns to expand on mobile devices and small screens, simpl Update: Grid styles are now available in SASS/SCSS. Hooray! Thanks to [shankariyerr](https://github.com/shankariyerr/) for contributing as well. -Learn more and see code samples at: http://simplegrid.io +### Update Sass Division Deprecation Fix + +To resolve Dart Sass deprecation warnings for `/` division, all grid width calculations now use the `div()` function from the Sass math module. + +**Requirement:** +Ensure your project includes the math module, typically with "It is Included in the top of the Scss file": + +```scss +@use "sass:math"; +``` + +Learn more and see code samples at: [http://simplegrid.io](http://simplegrid.io) ## License - Open source under the MIT License. +This project is licensed under the [MIT License](./LICENSE). diff --git a/simple-grid.scss b/simple-grid.scss index 49a3881..f174dd1 100644 --- a/simple-grid.scss +++ b/simple-grid.scss @@ -1,9 +1,12 @@ // SIMPLE GRID - SASS/SCSS +// import Sass Math +@use "sass:math"; + @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic); // fonts -$font-family: 'Lato', Helvetica, sans-serif; +$font-family: "Lato", Helvetica, sans-serif; $font-weight-light: 300; $font-weight-regular: 400; $font-weight-heavy: 700; @@ -155,32 +158,80 @@ $breakpoint-large: 60em; // 960px width: $width; } -.col-1-sm { width:($width / 12) - ($gutter * 11 / 12); } -.col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); } -.col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); } -.col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); } -.col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } -.col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); } -.col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } -.col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } -.col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } -.col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } -.col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } -.col-12-sm { width: $width; } +.col-1-sm { + width: (div($width, 12)) - (div($gutter * 11, 12)); +} +.col-2-sm { + width: (div($width, 6)) - (div($gutter * 10, 12)); +} +.col-3-sm { + width: (div($width, 4)) - (div($gutter * 9, 12)); +} +.col-4-sm { + width: (div($width, 3)) - (div($gutter * 8, 12)); +} +.col-5-sm { + width: (div($width, div(12, 5))) - (div($gutter * 7, 12)); +} +.col-6-sm { + width: (div($width, 2)) - (div($gutter * 6, 12)); +} +.col-7-sm { + width: (div($width, div(12, 7))) - (div($gutter * 5, 12)); +} +.col-8-sm { + width: (div($width, div(12, 8))) - (div($gutter * 4, 12)); +} +.col-9-sm { + width: (div($width, div(12, 9))) - (div($gutter * 3, 12)); +} +.col-10-sm { + width: (div($width, div(12, 10))) - (div($gutter * 2, 12)); +} +.col-11-sm { + width: (div($width, div(12, 11))) - (div($gutter * 1, 12)); +} +.col-12-sm { + width: $width; +} @media only screen and (min-width: $breakpoint-med) { - .col-1 { width:($width / 12) - ($gutter * 11 / 12); } - .col-2 { width: ($width / 6) - ($gutter * 10 / 12); } - .col-3 { width: ($width / 4) - ($gutter * 9 / 12); } - .col-4 { width: ($width / 3) - ($gutter * 8 / 12); } - .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); } - .col-6 { width: ($width / 2) - ($gutter * 6 / 12); } - .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); } - .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); } - .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); } - .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); } - .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); } - .col-12 { width: $width; } + .col-1 { + width: (div($width, 12)) - (div($gutter * 11, 12)); + } + .col-2 { + width: (div($width, 6)) - (div($gutter * 10, 12)); + } + .col-3 { + width: (div($width, 4)) - (div($gutter * 9, 12)); + } + .col-4 { + width: (div($width, 3)) - (div($gutter * 8, 12)); + } + .col-5 { + width: (div($width, div(12, 5))) - (div($gutter * 7, 12)); + } + .col-6 { + width: (div($width, 2)) - (div($gutter * 6, 12)); + } + .col-7 { + width: (div($width, div(12, 7))) - (div($gutter * 5, 12)); + } + .col-8 { + width: (div($width, div(12, 8))) - (div($gutter * 4, 12)); + } + .col-9 { + width: (div($width, div(12, 9))) - (div($gutter * 3, 12)); + } + .col-10 { + width: (div($width, div(12, 10))) - (div($gutter * 2, 12)); + } + .col-11 { + width: (div($width, div(12, 11))) - (div($gutter * 1, 12)); + } + .col-12 { + width: $width; + } .hidden-sm { display: block;