diff --git a/README.md b/README.md index 29e9bb9..a100f76 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,10 @@ # barrel.css A CSS Framework aiming to be as opinionated as possible for maximum restyling possibilities. -It is a combination of classless styles, a mix of high and low level utilities, and a tiny selection of components. +It is a combination of classless styles, a mix of high and low level utilities, and a tiny selection of components. Unlike utility-first frameworks, we don't have millions of styles for every possible color and size. + +You do as much as you can semantically, and fill in the rest with semi-semantic classes. There are classes like .margin-bottom, letting the theme decide how much margin, not specific things like .margin-bottom-3px. + It supports automatic dark/light theme switching with the system preference, desktop, mobile, and also aims to work as well as possible in print media, especially if you use extra hint classes. @@ -170,7 +173,10 @@ Add padding just to bottom. Useful for fixing scrollbar showing up when not needed. ### .margin -The element will have a reasonable theme dependent amount of margin. +The element will have a reasonable theme dependent amount of margin(Determined by --gap). + +### .margin-top, .margin-bottom +Add margin to the top or bottom of an element. ### .align-left, .align-center, .align-right These apply to both text content, and flex items. diff --git a/css/barrel.css b/css/barrel.css index 2e670fa..8f53756 100644 --- a/css/barrel.css +++ b/css/barrel.css @@ -1729,6 +1729,14 @@ footer.padding { margin: var(--gap); } +.margin-top { + margin-bottom: var(--gap); +} + +.margin-bottom { + margin-bottom: var(--gap); +} + .nomargin { margin: 0px; } diff --git a/index.html b/index.html index 1d1198f..339446a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
-
+

🍂Basic Page🌱