Skip to content

Commit

Permalink
New Updates and Fixes along with Documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggedde
ggedde committed May 4, 2021
1 parent 9f73239 commit 9ede24b
Show file tree
Hide file tree
Showing 14 changed files with 664 additions and 141 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# sprycss
Lightweight Mini Utility CSS Framework

sass --watch --style compressed spry.scss:dist/spry.min.css
![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/ggedde/spry-css?include_prereleases)   ![GitHub](https://img.shields.io/github/license/ggedde/spry-css?label=license)

## [View Documentation](https://ggedde.github.io/spry-css)
33 changes: 33 additions & 0 deletions _colors.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@each $color_name, $color_value in $colors {
.color-#{$color_name} {
color: $color_value !important;
}
.bg-#{$color_name} {
background-color: $color_value;
}
.border-#{$color_name} {
border-color: $color_value;
}
.btn-#{$color_name} {
background-color: $color_value;
border-color: $color_value;
&:hover,
&:focus {
background-color: darken($color_value, 10%);
border-color: darken($color_value, 10%);
}
&.btn-outline {
color: $color_value;
&:hover,
&:focus {
background-color: $color_value;
border-color: $color_value;
}
}
&.btn-outline:active,
&:active {
background-color: darken($color_value, 5%);
border-color: darken($color_value, 5%);
}
}
}
5 changes: 4 additions & 1 deletion _reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@ ul {

ol,
ul {
list-style: none;
list-style: circle inside;
nav > & {
list-style: none;
}
}

img {
Expand Down
59 changes: 20 additions & 39 deletions _ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ fieldset {
border-color: map-get($colors, 'primary');
}
&.small {
height: 30px;
line-height: 30px;
min-width: 30px;
height: 28px;
line-height: 28px;
min-width: 28px;
}
&.large {
height: 50px;
Expand All @@ -50,8 +50,7 @@ input[type="submit"] {
color: white;
cursor: pointer;
font-size: 1.2rem;

padding: 0 2.5rem;
padding: 0 1.5rem;
text-align: center;
text-transform: uppercase;
width: auto;
Expand Down Expand Up @@ -80,6 +79,22 @@ input[type="submit"] {
opacity: .4;
cursor: not-allowed;
}
svg {
width: 24px;
height: 24px;
}
&.small {
svg {
width: 18px;
height: 18px;
}
}
&.large {
svg {
width: 32px;
height: 32px;
}
}
}

input[type="checkbox"],
Expand Down Expand Up @@ -271,40 +286,6 @@ hr {
}
}

@each $color_name, $color_value in $colors {
.color-#{$color_name} {
color: $color_value !important;
}
.bg-#{$color_name} {
background-color: $color_value;
}
.border-#{$color_name} {
border-color: $color_value;
}
.btn-#{$color_name} {
background-color: $color_value;
border-color: $color_value;
&:hover,
&:focus {
background-color: darken($color_value, 10%);
border-color: darken($color_value, 10%);
}
&.btn-outline {
color: $color_value;
&:hover,
&:focus {
background-color: $color_value;
border-color: $color_value;
}
}
&.btn-outline:active,
&:active {
background-color: darken($color_value, 5%);
border-color: darken($color_value, 5%);
}
}
}

nav ul li {
display: inline-block;
}
83 changes: 65 additions & 18 deletions _utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ General Utility Classes
.bottom-0{ bottom: 0 }
.left-0{ left: 0 }
.h-100{ height: 100% }
.h-100vh{ height: 100vh }
.vh-100{ height: 100vh }
.w-100{ width: 100% }
.w-100vw{ width: 100vw }
.vw-100{ width: 100vw }
.index-1{ z-index: 1 }
.index-2{ z-index: 2 }
.index-3{ z-index: 3 }
Expand Down Expand Up @@ -77,21 +77,22 @@ Layout Utility Classes - Can include Grid Prefix Ex. .sm-left .md-right, etc
/*************************************
Flex Utility Classes
**************************************/
.align-items-start{ align-items: flex-start }
.align-items-end{ align-items: flex-end }
.align-items-center{ align-items: center }
.align-items-stretch{ align-items: stretch }
.align-content-start{ align-content: flex-start }
.align-content-end{ align-content: flex-end }
.align-content-center{ align-content: center }
.align-content-between{ align-content: space-between }
.align-content-around{ align-content: space-around }
.align-content-stretch{ align-content: stretch }
.justify-content-start{ justify-content: flex-start }
.justify-content-end{ justify-content: flex-end }
.justify-content-center{ justify-content: center }
.justify-content-between{ justify-content: space-between }
.justify-content-around{ justify-content: space-around }
.ai-start{ align-items: flex-start }
.ai-end{ align-items: flex-end }
.ai-center{ align-items: center }
.ai-stretch{ align-items: stretch }
.ac-start{ align-content: flex-start }
.ac-end{ align-content: flex-end }
.ac-center{ align-content: center }
.ac-between{ align-content: space-between }
.ac-around{ align-content: space-around }
.ac-stretch{ align-content: stretch }
.jc-start{ justify-content: flex-start }
.jc-end{ justify-content: flex-end }
.jc-center{ justify-content: center }
.jc-between{ justify-content: space-between }
.jc-around{ justify-content: space-around }
.flex-center{ display: flex; align-items: center; justify-content: center }
.flex-wrap{ flex-wrap: wrap }
.flex-direction-column{ flex-direction: column }

Expand All @@ -111,6 +112,17 @@ Padding and Margin Utility Classes
display: block;
}
@each $i, $space in $spacing {
.pad-#{$i} > * {
margin: #{$space}rem;
}
.padx-#{$i} > * {
margin-left: #{$space}rem;
margin-right: #{$space}rem;
}
.pady-#{$i} > * {
margin-top: #{$space}rem;
margin-bottom: #{$space}rem;
}
@each $prop in (padding, margin) {
.#{str-slice($prop, 0, 1)}-#{$i} {
#{$prop}: #{$space}rem;
Expand All @@ -137,6 +149,9 @@ Padding and Margin Utility Classes
}
}
@each $side in (top, bottom, left, right){
.pad#{str-slice($side, 0, 1)}-#{$i} > * {
margin-#{$side}: #{$space}rem;
}
.#{str-slice($prop, 0, 1)}#{str-slice($side, 0, 1)}-#{$i} {
#{$prop}-#{$side}: #{$space}rem;
}
Expand Down Expand Up @@ -179,9 +194,38 @@ Padding and Margin Utility Classes
&-order-2{ order:2 }
&-order-3{ order:3 }
&-order-last{ order:99999 }
&-ai-start{ align-items: flex-start }
&-ai-end{ align-items: flex-end }
&-ai-center{ align-items: center }
&-ai-stretch{ align-items: stretch }
&-ac-start{ align-content: flex-start }
&-ac-end{ align-content: flex-end }
&-ac-center{ align-content: center }
&-ac-between{ align-content: space-between }
&-ac-around{ align-content: space-around }
&-ac-stretch{ align-content: stretch }
&-jc-start{ justify-content: flex-start }
&-jc-end{ justify-content: flex-end }
&-jc-center{ justify-content: center }
&-jc-between{ justify-content: space-between }
&-jc-around{ justify-content: space-around }
&-flex-center{ display: flex; align-items: center; justify-content: center }
&-flex-wrap{ flex-wrap: wrap }
&-flex-direction-column{ flex-direction: column }
}

@each $i, $space in $spacing {
.#{$breakpoint}-pad-#{$i} > * {
margin: #{$space}rem;
}
.#{$breakpoint}-padx-#{$i} > * {
margin-left: #{$space}rem;
margin-right: #{$space}rem;
}
.#{$breakpoint}-pady-#{$i} > * {
margin-top: #{$space}rem;
margin-bottom: #{$space}rem;
}
@each $prop in (padding, margin) {
.#{$breakpoint}-#{str-slice($prop, 0, 1)}-#{$i} {
#{$prop}: #{$space}rem;
Expand All @@ -207,7 +251,10 @@ Padding and Margin Utility Classes
#{$prop}-bottom: -#{$space}rem;
}
}
@each $side in (top, bottom, left, right){
@each $side in (top, bottom, left, right){
.#{$breakpoint}-pad#{str-slice($side, 0, 1)}-#{$i} > * {
margin-#{$side}: #{$space}rem;
}
.#{$breakpoint}-#{str-slice($prop, 0, 1)}#{str-slice($side, 0, 1)}-#{$i} {
#{$prop}-#{$side}: #{$space}rem;
}
Expand Down
13 changes: 7 additions & 6 deletions _variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ $row-max-width: map-get($breakpoints, 'lg') !default;
$gutter-width: 2rem !default;

$colors: (
"white": #ffffff,
"light": #efefef,
"grey": #aaaaaa,
"dark": #333333,
"primary": #4488ff,
"text": #606c76,
"white": #ffffff,
"light": #efefef,
"grey": #aaaaaa,
"dark": #333333,
"primary": #4488ff,
"text": #606c76,
"transparent": transparent,
) !default;

/*************************************
Expand Down
2 changes: 1 addition & 1 deletion dist/spry.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9ede24b

Please sign in to comment.