In Spruce CSS, the settings are global options controlled through a Sass map.
diff --git a/src/docs/customization/themes.md b/src/docs/customization/themes.md index 307eb56..5eb100b 100644 --- a/src/docs/customization/themes.md +++ b/src/docs/customization/themes.md @@ -1,8 +1,8 @@ --- -title: 'Themes' -description: 'Create dark - or any additional - theme easily with Spruce CSS and custom CSS properties.' +title: "Themes" +description: "Create dark - or any additional - theme easily with Spruce CSS and custom CSS properties." order: 13 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/themes.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/themes.mdx" ---Spruce uses CSS custom properties to handle the theming. It means that you can easily overwrite the colors if needed (like in a case of a dark theme mode).
diff --git a/src/docs/customization/variables.md b/src/docs/customization/variables.md index 092eb0f..3b73708 100644 --- a/src/docs/customization/variables.md +++ b/src/docs/customization/variables.md @@ -1,8 +1,8 @@ --- -title: 'Variables' -description: 'Spruce CSS is a highly customizable framework through variables. In this post, you will learn how to customize and get them.' +title: "Variables" +description: "Spruce CSS is a highly customizable framework through variables. In this post, you will learn how to customize and get them." order: 10 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/variables.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/variables.mdx" ---Spruce CSS is a highly customizable through variables. In this post, you will learn how to get and customize them.
diff --git a/src/docs/elements/buttons.md b/src/docs/elements/buttons.md index e4b799a..be3f0d3 100644 --- a/src/docs/elements/buttons.md +++ b/src/docs/elements/buttons.md @@ -1,7 +1,7 @@ --- -title: 'Buttons' +title: "Buttons" order: 21 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/buttons.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/buttons.mdx" ---Spruce comes with basic button variations like size, width, color, state and can also generate your custom color variants.
diff --git a/src/docs/elements/forms.md b/src/docs/elements/forms.md index ee537b7..73b3cf7 100644 --- a/src/docs/elements/forms.md +++ b/src/docs/elements/forms.md @@ -1,8 +1,8 @@ --- -title: 'Forms' -description: 'Spruce CSS comes with overall form support for styling the different native elements.' +title: "Forms" +description: "Spruce CSS comes with overall form support for styling the different native elements." order: 22 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/forms.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/forms.mdx" ---Spruce CSS comes with overall form support for styling the different native elements. Also, it has some form layout helpers.
diff --git a/src/docs/elements/generators.md b/src/docs/elements/generators.md index 9657634..a8fb64e 100644 --- a/src/docs/elements/generators.md +++ b/src/docs/elements/generators.md @@ -1,7 +1,7 @@ --- -title: 'Generators' +title: "Generators" order: 18 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/generators.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/generators.mdx" ---The generators are special (a naming convention in Spruce CSS only) mixins, which we use to generate base styles.
diff --git a/src/docs/elements/media.md b/src/docs/elements/media.md index 46989a0..03d207f 100644 --- a/src/docs/elements/media.md +++ b/src/docs/elements/media.md @@ -1,7 +1,7 @@ --- -title: 'Media' +title: "Media" order: 23 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/media.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/media.mdx" ---Under media, you can find some of the media-related styles.
diff --git a/src/docs/elements/tables.md b/src/docs/elements/tables.md index ee2ebb7..85c68aa 100644 --- a/src/docs/elements/tables.md +++ b/src/docs/elements/tables.md @@ -1,7 +1,7 @@ --- -title: 'Tables' +title: "Tables" order: 20 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/tables.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/tables.mdx" ---Spruce ships with some basic table styling targeted only with classes to opt-in.
diff --git a/src/docs/elements/typography.md b/src/docs/elements/typography.md index e15ceeb..d4c387b 100644 --- a/src/docs/elements/typography.md +++ b/src/docs/elements/typography.md @@ -1,8 +1,8 @@ --- -title: 'Typography' -description: 'Spruce CSS comes with fluid typography; it scales automatically depending on the viewport.' +title: "Typography" +description: "Spruce CSS comes with fluid typography; it scales automatically depending on the viewport." order: 19 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/typography.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/typography.mdx" ---Typography is an essential part of any system. With Spruce, you get basic styles for the most related HTML elements.
diff --git a/src/docs/getting-started/accessibility.md b/src/docs/getting-started/accessibility.md index 2377504..9b7bf08 100644 --- a/src/docs/getting-started/accessibility.md +++ b/src/docs/getting-started/accessibility.md @@ -1,8 +1,8 @@ --- -title: 'Inclusivity and Accessibility' -description: 'Create more inclusive and accessible solutions using our micro-framework and its components.' +title: "Inclusivity and Accessibility" +description: "Create more inclusive and accessible solutions using our micro-framework and its components." order: 5 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/accessibility.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/accessibility.mdx" ---Inclusivity and accessibility (A11Y) are some of the main concerns of Spruce CSS. We aim to help you develop more accessible web-based projects through our code and documentation, where we will try to show you small, related tips and guidance where necessary.
diff --git a/src/docs/getting-started/appendix.md b/src/docs/getting-started/appendix.md index 8d7760a..e440a86 100644 --- a/src/docs/getting-started/appendix.md +++ b/src/docs/getting-started/appendix.md @@ -1,8 +1,8 @@ --- -title: 'Appendix' -description: 'In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general.' +title: "Appendix" +description: "In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general." order: 10 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/appendix.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/appendix.mdx" ---In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general.
diff --git a/src/docs/getting-started/contribution.md b/src/docs/getting-started/contribution.md index a6ccc26..3f387b2 100644 --- a/src/docs/getting-started/contribution.md +++ b/src/docs/getting-started/contribution.md @@ -1,8 +1,8 @@ --- -title: 'Contribution' -description: 'You can help us tremendously with any small contribution, like fixing a typo.' +title: "Contribution" +description: "You can help us tremendously with any small contribution, like fixing a typo." order: 9 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/contribution.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/contribution.mdx" ---First, thank you for considering contributing to Spruce. We appreciate your time and effort in making this CSS system better. We want to make contributing to this project as easy and transparent as possible, whether it's:
diff --git a/src/docs/getting-started/installation.md b/src/docs/getting-started/installation.md index 59515da..f4edc65 100644 --- a/src/docs/getting-started/installation.md +++ b/src/docs/getting-started/installation.md @@ -1,8 +1,8 @@ --- -title: 'Installation' +title: "Installation" description: "Install Spruce easily with npm or use it as a standalone dependency; it's all on you." order: 2 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/installation.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/installation.mdx" ---Spruce CSS is built on Sass; to get its full potential, you should use with it. If you want, you can load the compiled CSS too, but you will lose many features.
diff --git a/src/docs/getting-started/internationalization.md b/src/docs/getting-started/internationalization.md index ac229a0..a9914d5 100644 --- a/src/docs/getting-started/internationalization.md +++ b/src/docs/getting-started/internationalization.md @@ -1,8 +1,8 @@ --- -title: 'Internationalization' -description: 'With core internationalization support through modern CSS and its logical properties, you can handle RTL layouts more easily with Spruce CSS.' +title: "Internationalization" +description: "With core internationalization support through modern CSS and its logical properties, you can handle RTL layouts more easily with Spruce CSS." order: 6 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/internationalization.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/internationalization.mdx" ---Internationalization (i18n) means preparing the code and design to handle different languages and writing modes.
diff --git a/src/docs/getting-started/introduction.md b/src/docs/getting-started/introduction.md index d450cf3..72a91cb 100644 --- a/src/docs/getting-started/introduction.md +++ b/src/docs/getting-started/introduction.md @@ -1,8 +1,8 @@ --- -title: 'Introduction' -description: 'Read more about our goals and intentions with Spruce CSS framework. Why we built it, and why is it a good choice for you too?' +title: "Introduction" +description: "Read more about our goals and intentions with Spruce CSS framework. Why we built it, and why is it a good choice for you too?" order: 1 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/introduction.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/introduction.mdx" ---Spruce is a Sass-based minimalistic CSS framework to get the foundation right for any web-based project.
diff --git a/src/docs/getting-started/print.md b/src/docs/getting-started/print.md index b5a569d..e4930ac 100644 --- a/src/docs/getting-started/print.md +++ b/src/docs/getting-started/print.md @@ -1,8 +1,8 @@ --- -title: 'Print' -description: 'With some necessary print styles, you can control better your print view with Spruce CSS framework.' +title: "Print" +description: "With some necessary print styles, you can control better your print view with Spruce CSS framework." order: 7 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/print.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/print.mdx" ---Spruce has some print-related styles. Nothing severe or fancy, but a set of minimal styles.
diff --git a/src/docs/getting-started/sass.md b/src/docs/getting-started/sass.md index 2d6d5ac..4ea82ed 100644 --- a/src/docs/getting-started/sass.md +++ b/src/docs/getting-started/sass.md @@ -1,8 +1,8 @@ --- -title: 'Sass' -description: 'Utilizing Sass helps you achieve more with less code and faster with built-in mixins and functions.' +title: "Sass" +description: "Utilizing Sass helps you achieve more with less code and faster with built-in mixins and functions." order: 4 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/sass.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/sass.mdx" ---Spruce uses Sass (Syntactically Awesome Style Sheets) to generate CSS code. Sass is a popular and mature CSS extension language that lets us write stylesheets more programmatically.
diff --git a/src/docs/getting-started/structure-and-code.md b/src/docs/getting-started/structure-and-code.md index 54826fa..7f835a1 100644 --- a/src/docs/getting-started/structure-and-code.md +++ b/src/docs/getting-started/structure-and-code.md @@ -1,8 +1,8 @@ --- -title: 'Structure and Code' -description: 'Explore the style guide and structure of Spruce CSS micro-framework. You can find some core principles and the main structure on this page.' +title: "Structure and Code" +description: "Explore the style guide and structure of Spruce CSS micro-framework. You can find some core principles and the main structure on this page." order: 3 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/structure-and-code.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/structure-and-code.mdx" ---Spruce tries to be customizable and straightforward. You can find some core principles and the main structure on this page.
diff --git a/src/docs/sass/colors.md b/src/docs/sass/colors.md index 7577372..a603077 100644 --- a/src/docs/sass/colors.md +++ b/src/docs/sass/colors.md @@ -1,8 +1,8 @@ --- -title: 'Colors' -description: 'Through colors, you can genuinely make Spruce CSS your own. Control everything with the $colors map.' +title: "Colors" +description: "Through colors, you can genuinely make Spruce CSS your own. Control everything with the $colors map." order: 14 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx" ---Spruce CSS comes with a bunch of Sass variables and generates CSS custom properties.
diff --git a/src/docs/sass/functions.md b/src/docs/sass/functions.md index d8f6d14..98900a4 100644 --- a/src/docs/sass/functions.md +++ b/src/docs/sass/functions.md @@ -1,8 +1,8 @@ --- -title: 'Functions' -description: 'The functions are an essential part of the Spruce CSS framework. You can get values, set up your fluid typography, and more.' +title: "Functions" +description: "The functions are an essential part of the Spruce CSS framework. You can get values, set up your fluid typography, and more." order: 17 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/functions.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/functions.mdx" --- ## color diff --git a/src/docs/sass/mixins.md b/src/docs/sass/mixins.md index 0b4669d..8b7d435 100644 --- a/src/docs/sass/mixins.md +++ b/src/docs/sass/mixins.md @@ -1,8 +1,8 @@ --- -title: 'Mixins' -description: 'You can do more with less code with the mixins in Spruce CSS micro-framework.' +title: "Mixins" +description: "You can do more with less code with the mixins in Spruce CSS micro-framework." order: 16 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/mixins.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/mixins.mdx" --- ## a11y-card-link diff --git a/src/docs/sass/variables.md b/src/docs/sass/variables.md index 0042a16..cc3ff16 100644 --- a/src/docs/sass/variables.md +++ b/src/docs/sass/variables.md @@ -1,8 +1,8 @@ --- -title: 'Variables' -description: 'The variables are fundamental for better customisability. Luckily Spruce CSS gives you a lot of them.' +title: "Variables" +description: "The variables are fundamental for better customisability. Luckily Spruce CSS gives you a lot of them." order: 15 -github: 'https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx' +github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx" ---Spruce CSS has several Sass variables that it can generate into CSS custom properties.