From 35516d30bf6865b8555bebcec6d7edb8d2adf8af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Soulas?= Date: Mon, 28 Oct 2019 18:23:20 +0100 Subject: [PATCH] Remove maxWidth maxHeight systems in favor of a generic sizing system --- README.md | 3 +- elm.json | 2 +- src/Css/Systems/Colors.elm | 2 + src/Css/Systems/Spacing.elm | 242 +++++++++++------------------------- 4 files changed, 78 insertions(+), 171 deletions(-) diff --git a/README.md b/README.md index 48082f2..45a47b0 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ elm install cedricss/elm-css-systems import Css exposing (..) import Css.Systems.Colors exposing (..) import Css.Systems.Spacing exposing (..) -import Css.Systems.Utitilies exposing (..) +import Css.Systems.Utilities exposing (..) import Html.Styled exposing (div) import Html.Styled.Attributes as Attributes exposing (css) ``` @@ -25,6 +25,7 @@ view = div [ css [ backgroundColor indigo300 + , hover [ backgroundColor indigo400 ] , color indigo900 ] ] diff --git a/elm.json b/elm.json index 42077b7..b4a52a5 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "cedricss/elm-css-systems", "summary": "Design systems based on elm-css, inspired by Tailwind.", "license": "MIT", - "version": "2.0.2", + "version": "3.0.0", "exposed-modules": [ "Css.Systems.Colors", "Css.Systems.Spacing", diff --git a/src/Css/Systems/Colors.elm b/src/Css/Systems/Colors.elm index fe59b43..143dcbf 100644 --- a/src/Css/Systems/Colors.elm +++ b/src/Css/Systems/Colors.elm @@ -4,6 +4,8 @@ module Css.Systems.Colors exposing (black, blue100, blue200, blue300, blue400, b [cedricsoulas.com/elm/css/systems#colors](https://cedricsoulas.com/elm/css/systems#colors) +![Color system](https://github.com/cedricss/elm-css-systems/raw/master/img/colors.png) + @docs black, blue100, blue200, blue300, blue400, blue500, blue600, blue700, blue800, blue900, gray100, gray200, gray300, gray400, gray500, gray600, gray700, gray800, gray900, green100, green200, green300, green400, green500, green600, green700, green800, green900, indigo100, indigo200, indigo300, indigo400, indigo500, indigo600, indigo700, indigo800, indigo900, orange100, orange200, orange300, orange400, orange500, orange600, orange700, orange800, orange900, pink100, pink200, pink300, pink400, pink500, pink600, pink700, pink800, pink900, purple100, purple200, purple300, purple400, purple500, purple600, purple700, purple800, purple900, red100, red200, red300, red400, red500, red600, red700, red800, red900, teal100, teal200, teal300, teal400, teal500, teal600, teal700, teal800, teal900, white, yellow100, yellow200, yellow300, yellow400, yellow500, yellow600, yellow700, yellow800, yellow900 -} diff --git a/src/Css/Systems/Spacing.elm b/src/Css/Systems/Spacing.elm index a1087f2..ab6ca7d 100644 --- a/src/Css/Systems/Spacing.elm +++ b/src/Css/Systems/Spacing.elm @@ -1,29 +1,47 @@ module Css.Systems.Spacing exposing - ( maxHeightXS, maxHeightSM, maxHeightMD, maxHeightLG, maxHeightXL, maxHeight2XL, maxHeight3XL, maxHeight4XL, maxHeight5XL, maxHeight6XL, maxHeightFull - , maxWidthXS, maxWidthSM, maxWidthMD, maxWidthLG, maxWidthXL, maxWidth2XL, maxWidth3XL, maxWidth4XL, maxWidth5XL, maxWidth6XL, maxWidthFull - , fluid, space0, space1, space10, space12, space16, space2, space20, space24, space3, space32, space4, space40, space48, space5, space56, space6, space64, space8 + ( fluid, space0, space1, space2, space3, space4, space5, space6, space8, space10, space12, space16, space20, space24, space32, space40, space48, space56, space64 + , sizeXS, sizeSM, sizeMD, sizeLG, sizeXL, size2XL, size3XL, size4XL, size5XL, size6XL, sizeFull ) {-| Spacing and sizing system -# Max height +# Spacing -@docs maxHeightXS, maxHeightSM, maxHeightMD, maxHeightLG, maxHeightXL, maxHeight2XL, maxHeight3XL, maxHeight4XL, maxHeight5XL, maxHeight6XL, maxHeightFull +Spacing values work great with padding, margin, width and height. + view = + div + [ css + [ marginTop space8 + , padding space2 + , width space32 + ] + ] -# Max width +![Spacing systems](https://github.com/cedricss/elm-css-systems/raw/master/img/spacing.png) -@docs maxWidthXS, maxWidthSM, maxWidthMD, maxWidthLG, maxWidthXL, maxWidth2XL, maxWidth3XL, maxWidth4XL, maxWidth5XL, maxWidth6XL, maxWidthFull +@docs fluid, space0, space1, space2, space3, space4, space5, space6, space8, space10, space12, space16, space20, space24, space32, space40, space48, space56, space64 -# Spacing +# Sizing + +Sizing values work great with width, height, maxWidth and maxHeight. + + view = + div + [ css + [ displayFlex + , flexWrap wrap + , maxWidth size3XL + ] + ] -@docs fluid, space0, space1, space10, space12, space16, space2, space20, space24, space3, space32, space4, space40, space48, space5, space56, space6, space64, space8 +@docs sizeXS, sizeSM, sizeMD, sizeLG, sizeXL, size2XL, size3XL, size4XL, size5XL, size6XL, sizeFull -} -import Css exposing (Pct, maxHeight, maxWidth, pct, px, rem) +import Css exposing (Pct, pct, px, rem) {-| px 0 @@ -171,228 +189,114 @@ fluid numerator denominator = -{- MAX WIDTH -} - - -{-| - - maxWidth (rem 20) - --} -maxWidthXS : Css.Style -maxWidthXS = - maxWidth (rem 20) - - -{-| - - maxWidth (rem 24) - --} -maxWidthSM : Css.Style -maxWidthSM = - maxWidth (rem 24) - - -{-| - - maxWidth (rem 28) - --} -maxWidthMD : Css.Style -maxWidthMD = - maxWidth (rem 28) - - -{-| - - maxWidth (rem 32) - --} -maxWidthLG : Css.Style -maxWidthLG = - maxWidth (rem 32) - - -{-| - - maxWidth (rem 36) - --} -maxWidthXL : Css.Style -maxWidthXL = - maxWidth (rem 36) - - -{-| - - maxWidth (rem 42) - --} -maxWidth2XL : Css.Style -maxWidth2XL = - maxWidth (rem 42) - - -{-| - - maxWidth (rem 48) - --} -maxWidth3XL : Css.Style -maxWidth3XL = - maxWidth (rem 48) - - -{-| - - maxWidth (rem 56) - --} -maxWidth4XL : Css.Style -maxWidth4XL = - maxWidth (rem 56) - - -{-| - - maxWidth (rem 64) - --} -maxWidth5XL : Css.Style -maxWidth5XL = - maxWidth (rem 64) - - -{-| - - maxWidth (rem 72) - --} -maxWidth6XL : Css.Style -maxWidth6XL = - maxWidth (rem 72) - - -{-| - - maxWidth (pct 100) - --} -maxWidthFull : Css.Style -maxWidthFull = - maxWidth (pct 100) - - - -{- MAX HEIGHT -} +{- SIZING -} {-| - maxHeight (rem 20) + rem 20 -} -maxHeightXS : Css.Style -maxHeightXS = - maxHeight (rem 20) +sizeXS : Css.Rem +sizeXS = + rem 20 {-| - maxHeight (rem 24) + rem 24 -} -maxHeightSM : Css.Style -maxHeightSM = - maxHeight (rem 24) +sizeSM : Css.Rem +sizeSM = + rem 24 {-| - maxHeight (rem 28) + rem 28 -} -maxHeightMD : Css.Style -maxHeightMD = - maxHeight (rem 28) +sizeMD : Css.Rem +sizeMD = + rem 28 {-| - maxHeight (rem 32) + rem 32 -} -maxHeightLG : Css.Style -maxHeightLG = - maxHeight (rem 32) +sizeLG : Css.Rem +sizeLG = + rem 32 {-| - maxHeight (rem 36) + rem 36 -} -maxHeightXL : Css.Style -maxHeightXL = - maxHeight (rem 36) +sizeXL : Css.Rem +sizeXL = + rem 36 {-| - maxHeight (rem 42) + rem 42 -} -maxHeight2XL : Css.Style -maxHeight2XL = - maxHeight (rem 42) +size2XL : Css.Rem +size2XL = + rem 42 {-| - maxHeight (rem 48) + rem 48 -} -maxHeight3XL : Css.Style -maxHeight3XL = - maxHeight (rem 48) +size3XL : Css.Rem +size3XL = + rem 48 {-| - maxHeight (rem 56) + rem 56 -} -maxHeight4XL : Css.Style -maxHeight4XL = - maxHeight (rem 56) +size4XL : Css.Rem +size4XL = + rem 56 {-| - maxHeight (rem 64) + rem 64 -} -maxHeight5XL : Css.Style -maxHeight5XL = - maxHeight (rem 64) +size5XL : Css.Rem +size5XL = + rem 64 {-| - maxHeight (rem 72) + rem 72 -} -maxHeight6XL : Css.Style -maxHeight6XL = - maxHeight (rem 72) +size6XL : Css.Rem +size6XL = + rem 72 {-| - maxHeight (pct 100) + pct 100 -} -maxHeightFull : Css.Style -maxHeightFull = - maxHeight (pct 100) +sizeFull : Css.Pct +sizeFull = + pct 100