-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: make the docs comments optional
- Loading branch information
Showing
98 changed files
with
1,538 additions
and
1,339 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,56 @@ | ||
| @if settings(loop-mq) { | ||
| /* --- | ||
| title: Media Queries System | ||
| section: Systems | ||
| --- | ||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| title: Media Queries System | ||
| section: Systems | ||
| --- | ||
| The media queries of this system are not intended to be the only media queries in your styles, but are meant to be the major media queries and inform the responsive suffixes that are applied to the utility classes. | ||
| The media queries of this system are not intended to be the only media queries in your styles, but are meant to be the major media queries and inform the responsive suffixes that are applied to the utility classes. | ||
| ### Media Queries Function | ||
| ### Media Queries Function | ||
| ```scss | ||
| @media (min-width: mq(<key>)) { | ||
| ... | ||
| } | ||
| ``` | ||
| ```scss | ||
| @media (min-width: mq(<key>)) { | ||
| ... | ||
| } | ||
| ``` | ||
| ### Responsive Suffix Classes | ||
| ### Responsive Suffix Classes | ||
| Responsive suffix classes scope a utility class’s styles to a media query. For example a class named `.display-block` add the property and value of `display: block`, it will have a companion class called `.display-block@md` that applies `display: block` only when the screen width is at the defined size for the `md` media query key. | ||
| Responsive suffix classes scope a utility class’s styles to a media query. For example a class named `.display-block` add the property and value of `display: block`, it will have a companion class called `.display-block@md` that applies `display: block` only when the screen width is at the defined size for the `md` media query key. | ||
| ### Framework Media Queries | ||
| ### Framework Media Queries | ||
| The following table contains a list of the media query values defined in this framework. | ||
| The following table contains a list of the media query values defined in this framework. | ||
| <table> | ||
| <title>Framework Media Queries</title> | ||
| <thead> | ||
| <tr> | ||
| <th>Function</th> | ||
| <th>Screen Width Size</th> | ||
| <th>Class Suffix</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| */ | ||
|
|
||
| @each $key, $val in $media-queries { | ||
| /* --- | ||
| section: Systems | ||
| --- | ||
| <tr> | ||
| <td>mq(#{$key})</td> | ||
| <td>#{$val}</td> | ||
| <td>@#{$key}</td> | ||
| </tr> | ||
| */ | ||
| } | ||
|
|
||
| <table> | ||
| <title>Framework Media Queries</title> | ||
| <thead> | ||
| <tr> | ||
| <th>Function</th> | ||
| <th>Screen Width Size</th> | ||
| <th>Class Suffix</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| */ | ||
| @each $key, $val in $media-queries { | ||
| /* --- | ||
| section: Systems | ||
| --- | ||
| <tr> | ||
| <td>mq(#{$key})</td> | ||
| <td>#{$val}</td> | ||
| <td>@#{$key}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| */ | ||
| } | ||
|
|
||
| /* --- | ||
| section: Systems | ||
| --- | ||
| </tbody> | ||
| </table> | ||
| */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,61 @@ | ||
| /* --- | ||
| section: Introduction | ||
| order: -1 | ||
| --- | ||
| // This file generates the Sparkle Docs file | ||
| // The variable below, `$sparkle-show-docs` | ||
| // turns off and on the comments used to generate | ||
| // the Docs. If this variable is set to false, the | ||
| // docs will not generate. | ||
| $sparkle-show-docs: true; | ||
|
|
||
| /* Begin Sparkle Docs */ | ||
|
|
||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| section: Introduction | ||
| order: -1 | ||
| --- | ||
| The Sparkle Utility Framework is a customizable system of Sass tools and classes that is intended to work within the Inverted Triangle CSS (ITCSS) organization method. This site is a resource of the settings, tools, and utility classes available, including documentation about what each is, how to use them, and the CSS that they'll output. | ||
| */ | ||
|
|
||
| /* --- | ||
| section: Settings | ||
| order: -1 | ||
| --- | ||
| In the ITCSS method, settings are declared first and at the top of the Sass document. These contain all variables used throughout the tools and utilities. The settings inform what Tools, Systems, and Utilities are available in the framework. More details about settings setup can be found on the [Sparkle repo](https://github.com/sparkbox/sparkle). | ||
| */ | ||
| } | ||
|
|
||
| The Sparkle Utility Framework is a customizable system of Sass tools and classes that is intended to work within the Inverted Triangle CSS (ITCSS) organization method. This site is a resource of the settings, tools, and utility classes available, including documentation about what each is, how to use them, and the CSS that they'll output. | ||
| */ | ||
|
|
||
| /* --- | ||
| section: Settings | ||
| order: -1 | ||
| --- | ||
| In the ITCSS method, settings are declared first and at the top of the Sass document. These contain all variables used throughout the tools and utilities. The settings inform what Tools, Systems, and Utilities are available in the framework. More details about settings setup can be found on the [Sparkle repo](https://github.com/sparkbox/sparkle). | ||
| */ | ||
| @import "../settings"; | ||
|
|
||
| /* --- | ||
| section: Tools | ||
| order: -1 | ||
| --- | ||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| section: Tools | ||
| order: -1 | ||
| --- | ||
| The second declaration of the ITCSS method are the tools. Tools are the Sass mixins and functions used throughout the framework. | ||
| */ | ||
| } | ||
|
|
||
| The second declaration of the ITCSS method are the tools. Tools are the Sass mixins and functions used throughout the framework. | ||
| */ | ||
| @import "../tools"; | ||
| @import "mdcss"; | ||
|
|
||
| /* --- | ||
| section: Systems | ||
| order: -1 | ||
| --- | ||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| section: Systems | ||
| order: -1 | ||
| --- | ||
| Systems are not on their own part of the ITCSS organization, but instead are a collection of Settings, Tools, and Utilities. Systems are the most complex and customizable part of this framework. Each System usually has at least a Sass Function and Sass Map, while some generate Utility classes as well. | ||
| */ | ||
| } | ||
|
|
||
| Systems are not on their own part of the ITCSS organization, but instead are a collection of Settings, Tools, and Utilities. Systems are the most complex and customizable part of this framework. Each System usually has at least a Sass Function and Sass Map, while some generate Utility classes as well. | ||
| */ | ||
| @import "../globals/media-queries/docs"; | ||
| @import "../systems"; | ||
|
|
||
| /* --- | ||
| section: Utilities | ||
| --- | ||
| The final declaration of the ITCSS method are the utilities. Any additional styles should be declared between Tools and Utilities. The utilities are classes that have distinct purposes. Some of the Utilities are part of a System. Systems contain specific mixins, functions, and utility classes around a specific aspect of the framework, for example the Color and Spacing systems. | ||
| */ | ||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| section: Utilities | ||
| --- | ||
| The final declaration of the ITCSS method are the utilities. Any additional styles should be declared between Tools and Utilities. The utilities are classes that have distinct purposes. Some of the Utilities are part of a System. Systems contain specific mixins, functions, and utility classes around a specific aspect of the framework, for example the Color and Spacing systems. | ||
| */ | ||
| } | ||
| @import "../utilities"; | ||
|
|
||
| /* End Sparkle Docs */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| @import "mixins"; | ||
|
|
||
| @if settings(utility-border-position) { | ||
| @if $sparkle-show-docs { | ||
| /* --- | ||
| title: Border System | ||
| section: Systems | ||
| --- | ||
| ### Border Position and Width | ||
| ### Border Position and Width | ||
| */ | ||
| } | ||
| @include sparkle-border-spacing-loop(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.