Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2f4c21397b | |||
| 7b935d1a85 | |||
| 7b965d18f7 | |||
| 9c15304340 | |||
| 51c2c569b8 | |||
| a08cfbafa0 | |||
| 352147b7e2 | |||
| 4532389e3d |
20
Readme.md
20
Readme.md
@@ -1,6 +1,25 @@
|
||||
# DS2 Core
|
||||
|
||||
## "Installation"
|
||||
|
||||
File | Processes to
|
||||
------------------------------|------------------------------
|
||||
src/js/scaffolding.js | public/assets/
|
||||
src/scss/scaffolding.scss | public/assets/
|
||||
src/pg/core/core.scss.pug | src/scss/
|
||||
src/pg/core/download.php.pug | public
|
||||
|
||||
All other pug files should compile to from src/pg/ to a relative path of public/*
|
||||
|
||||
|
||||
## Running the core
|
||||
|
||||
functions
|
||||
|
||||
beforeArticleLoad - called before any patterns are started to load
|
||||
success - called when loading a pattern is successful if the result is an HTTP 200
|
||||
afterArticleLoad - called after any patterns are started to load
|
||||
done - called when the ajax for any pattern is done, whether successful or not. This is a useful place to load any javascript initializations that pattern.
|
||||
|
||||
|
||||
## About the content variable
|
||||
@@ -10,6 +29,7 @@ The content variable in \_config.pug defines your array of patterns. It is made
|
||||
- status - this should be one of the statuses from your status array
|
||||
- display - (optional) if present this will be displayed, as is, instead of the name
|
||||
- template - (optional) [ pug (default) | md ] the file type of a pattern's index file
|
||||
- core - (optional ) [ true | false ] if true, it will pull from the core folder
|
||||
- files - (optional) an array of patterns under the parent.
|
||||
|
||||
By changing and resaving the \_config.pug file, (our change is often adding or removing a random space) all of the pug patterns will recompile. Note that md templates will not recompile automatically when config is saved and updated as markdown files don't have an include.
|
||||
|
||||
@@ -191,262 +191,6 @@
|
||||
},
|
||||
"buffers":
|
||||
[
|
||||
{
|
||||
"file": "src/pg/core/_master-index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1848,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "../"
|
||||
},
|
||||
"AwAAAAgAAAAAAAAACQAAAAAAAAAAAAAACQAAAAAAAAAKAAAAAAAAAAAAAAAKAAAAAAAAAAsAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAACAAAAAAAAAAIAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/colours-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 141,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Unix"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
|
||||
],
|
||||
[
|
||||
6,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAAEIAAAAAAAAAQwAAAAAAAAAAAAAAQwAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEUAAAAAAAAAAAAAAEUAAAAAAAAARgAAAAAAAAAAAAAARgAAAAAAAABHAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAQgAAAAAAAABCAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/status-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 4216,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "../"
|
||||
},
|
||||
"AwAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
|
||||
],
|
||||
[
|
||||
4,
|
||||
3,
|
||||
"left_delete",
|
||||
null,
|
||||
"AwAAABAAAAAAAAAAEAAAAAAAAAABAAAALw8AAAAAAAAADwAAAAAAAAABAAAALg4AAAAAAAAADgAAAAAAAAABAAAALg",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
],
|
||||
[
|
||||
5,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/layouts/tabs-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1262,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAAGEAAAAAAAAAYgAAAAAAAAAAAAAAYgAAAAAAAABjAAAAAAAAAAAAAABjAAAAAAAAAGQAAAAAAAAAAAAAAGQAAAAAAAAAZQAAAAAAAAAAAAAAZQAAAAAAAABmAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAYQAAAAAAAABhAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/layouts/header-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 512,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/layouts/breakpoints-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 385,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Unix"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/components/tooltip-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 583,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Unix"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/components/switch-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 497,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Unix"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/patterns/components/sticky-note-core/index.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 966,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Unix"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
3,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "core/"
|
||||
},
|
||||
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"file": "src/pg/_config.pug",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 2309,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
},
|
||||
"undo_stack":
|
||||
[
|
||||
[
|
||||
4,
|
||||
1,
|
||||
"left_delete",
|
||||
null,
|
||||
"AQAAAJwAAAAAAAAAnAAAAAAAAAABAAAACg",
|
||||
"AQAAAAAAAAABAAAAnQAAAAAAAACdAAAAAAAAAAAAAAAAADBA"
|
||||
],
|
||||
[
|
||||
5,
|
||||
1,
|
||||
"insert",
|
||||
{
|
||||
"characters": "\n"
|
||||
},
|
||||
"AQAAAJwAAAAAAAAAnQAAAAAAAAAAAAAA",
|
||||
"AQAAAAAAAAABAAAAnAAAAAAAAACcAAAAAAAAAAAAAAAAAPC/"
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"build_system": "",
|
||||
"build_system_choices":
|
||||
@@ -536,17 +280,37 @@
|
||||
},
|
||||
"expanded_folders":
|
||||
[
|
||||
"/Users/am/Desktop/ds2 core",
|
||||
"/Users/am/Desktop/ds2 core/public",
|
||||
"/Users/am/Desktop/ds2 core/public/assets",
|
||||
"/Users/am/Desktop/ds2 core/src",
|
||||
"/Users/am/Desktop/ds2 core/src/js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns",
|
||||
"/Users/am/Desktop/ds2 core/src/scss"
|
||||
"/Users/am/Desktop/ds2-core",
|
||||
"/Users/am/Desktop/ds2-core/src",
|
||||
"/Users/am/Desktop/ds2-core/src/pg",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip"
|
||||
],
|
||||
"file_history":
|
||||
[
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/breakpoints/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/header/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/tabs/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/status/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/colours/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/core/_master-index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/_config.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/sticky-note-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/switch-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/tooltip-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/breakpoints-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/header-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/tabs-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/status-core/index.pug",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns/colours-core/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/sticky-note-core/_sticky-note.js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/_tabs.js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/_master-index.pug",
|
||||
@@ -655,36 +419,18 @@
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/layouts/breakpoints/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/notifications/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/spacing.css",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/colours/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio/portfolio-item/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/images/image/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/images/sprite/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio/portfolio-landing/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio-item/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/border-radius/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/_master-index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/textarea/untitled.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/sticky-note/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/_master-pattern.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/other-docs/status/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/other-docs/status/_status.scss",
|
||||
"/Volumes/am/www/test/assets/public/img/feature/index.php",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/_header.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/_header.js",
|
||||
"/Users/am/Desktop/My DS2/README.md",
|
||||
"/Users/am/Desktop/My DS2/todo.md"
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/colours/index.pug"
|
||||
],
|
||||
"find":
|
||||
{
|
||||
"height": 38.0
|
||||
"height": 26.0
|
||||
},
|
||||
"find_in_files":
|
||||
{
|
||||
"height": 179.0,
|
||||
"where_history":
|
||||
[
|
||||
"<open files>"
|
||||
]
|
||||
},
|
||||
"find_state":
|
||||
@@ -692,6 +438,8 @@
|
||||
"case_sensitive": false,
|
||||
"find_history":
|
||||
[
|
||||
"../core/_master-pattern.pug",
|
||||
"../core",
|
||||
"hide-deprecated",
|
||||
"deprecated",
|
||||
"ajx",
|
||||
@@ -740,6 +488,7 @@
|
||||
"regex": false,
|
||||
"replace_history":
|
||||
[
|
||||
"../../core/_master-pattern.pug",
|
||||
"colors",
|
||||
"core.cookie.get",
|
||||
"core.cookie.set"
|
||||
@@ -757,317 +506,6 @@
|
||||
{
|
||||
"sheets":
|
||||
[
|
||||
{
|
||||
"buffer": 0,
|
||||
"file": "src/pg/core/_master-index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1848,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
11,
|
||||
11
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 9,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 1,
|
||||
"file": "src/pg/patterns/colours-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 141,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
71,
|
||||
71
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 8,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 2,
|
||||
"file": "src/pg/patterns/status-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 4216,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
19,
|
||||
19
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 7,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 3,
|
||||
"file": "src/pg/patterns/layouts/tabs-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1262,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
102,
|
||||
102
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 6,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 4,
|
||||
"file": "src/pg/patterns/layouts/header-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 512,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
22,
|
||||
22
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 5,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 5,
|
||||
"file": "src/pg/patterns/layouts/breakpoints-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 385,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
22,
|
||||
22
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 4,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 6,
|
||||
"file": "src/pg/patterns/components/tooltip-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 583,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
22,
|
||||
22
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 3,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 7,
|
||||
"file": "src/pg/patterns/components/switch-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 497,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
22,
|
||||
22
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 2,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 8,
|
||||
"file": "src/pg/patterns/components/sticky-note-core/index.pug",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 966,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
22,
|
||||
22
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 1,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 9,
|
||||
"file": "src/pg/_config.pug",
|
||||
"selected": true,
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 2309,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
157,
|
||||
157
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
|
||||
"tab_size": 4,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 0,
|
||||
"stack_multiselect": false,
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
@@ -1118,7 +556,7 @@
|
||||
"project": "ds2 core.sublime-project",
|
||||
"replace":
|
||||
{
|
||||
"height": 48.0
|
||||
"height": 68.0
|
||||
},
|
||||
"save_all_on_build": false,
|
||||
"select_file":
|
||||
|
||||
@@ -1191,6 +1191,7 @@
|
||||
}
|
||||
},
|
||||
"minify-js": {
|
||||
"enable": false,
|
||||
"options": {
|
||||
"toplevel": true
|
||||
}
|
||||
@@ -1494,16 +1495,6 @@
|
||||
"config": {
|
||||
"customOutput": "src/scss/_status.scss"
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "src/scss/scaffolding.scss",
|
||||
"config": {
|
||||
"tasks": {
|
||||
"minify-css": {
|
||||
"enable": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
BIN
public/assets/.DS_Store
vendored
BIN
public/assets/.DS_Store
vendored
Binary file not shown.
2
public/assets/jquery-min.js
vendored
2
public/assets/jquery-min.js
vendored
File diff suppressed because one or more lines are too long
3389
public/assets/scaffolding-min.js
vendored
3389
public/assets/scaffolding-min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
52
public/download.php
Normal file
52
public/download.php
Normal file
@@ -0,0 +1,52 @@
|
||||
<?php
|
||||
function recursor($dir, $type) {
|
||||
$result = array();
|
||||
|
||||
// create the pattern to get the type
|
||||
$x = "/_*.";
|
||||
for ($i = 0; $i < strlen($type); $i++){
|
||||
$x .= "[" . strtolower($type[$i]) . strtoupper($type[$i]) ."]";
|
||||
}
|
||||
|
||||
// get the directories
|
||||
foreach(glob($dir . "/*") as $d) {
|
||||
if ( is_dir( $d ) ) {
|
||||
|
||||
// find the files in each directory
|
||||
foreach (glob($d . $x) as $f) {
|
||||
$result[] = $f;
|
||||
}
|
||||
// $more = recursor($d, $type);
|
||||
// $result = array_merge($result, $more);
|
||||
$result = array_merge($result, recursor($d, $type));
|
||||
}
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
$allowed_types = ["scss", "js"];
|
||||
$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
|
||||
|
||||
|
||||
if (!isset($_SERVER['QUERY_STRING']) || !in_array($_SERVER['QUERY_STRING'], $allowed_types)) {
|
||||
echo "File extension type is not defined. Ensure that you have added ?[file extension] to the URL. If you have defined a file extension and it is not allowed, you'll need to contact the an administrator to get the requested files.";
|
||||
die();
|
||||
}
|
||||
|
||||
$type = $_SERVER['QUERY_STRING'];
|
||||
|
||||
$file_list = recursor($patterns, $type);
|
||||
|
||||
$f = tmpfile();
|
||||
$t = stream_get_meta_data($f)['uri'];
|
||||
$z = new ZipArchive();
|
||||
|
||||
$zf = $z->open($t, ZipArchive::CREATE);
|
||||
foreach($file_list as $f) {
|
||||
$z->addFile($f, preg_replace('/^.*?patterns\//', '', $f));
|
||||
}
|
||||
$z->close();
|
||||
|
||||
header('Content-type: application/zip');
|
||||
header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
|
||||
echo(file_get_contents($t)); ?>
|
||||
@@ -8,9 +8,14 @@
|
||||
<link rel="icon" href="https://assets.gamv.ca/favicon.svg" media="(prefers-color-scheme:no-preference),(prefers-color-scheme:light)">
|
||||
<link rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)">
|
||||
<link href="assets/scaffolding.css" rel="stylesheet">
|
||||
<script src="assets/jquery-min.js"></script>
|
||||
</head>
|
||||
<body><a class="skip" href="#main">Skip to main content</a>
|
||||
<body>
|
||||
<!--
|
||||
DS2 core (c) 2024 Alexander McIlwraith
|
||||
Core licensed under CC BY-SA 4.0
|
||||
|
||||
|
||||
--><a class="skip" href="#main">Skip to main content</a>
|
||||
<div class="container">
|
||||
<header>
|
||||
<!-- The headline banner area -->
|
||||
@@ -19,15 +24,14 @@
|
||||
</svg>
|
||||
<div>
|
||||
<div class="header-title">
|
||||
<h1> <a>DS2 core</a></h1>
|
||||
<h1> <a href="./">DS2 core</a></h1>
|
||||
</div>
|
||||
<!-- Other sections can go here, such as search and directory-->
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li> <a href="./">Home</a></li>
|
||||
<li><a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></li>
|
||||
<li><a href="./?p=this-pattern-doesnt-exist">This pattern doesn't exist</a></li>
|
||||
<li><a href="./?p=colours">Colours</a></li>
|
||||
<li><a href="./?p=components">Components</a></li>
|
||||
<li><a href="./?p=layouts">Layouts</a></li>
|
||||
@@ -39,47 +43,47 @@
|
||||
</p>
|
||||
<main id="main">
|
||||
<h1>DS2 core</h1>
|
||||
<article class="status-deprecated" id="this-pattern-doesn't-exist" data-path="this-pattern-doesn't-exist" data-template="pug" data-pattern="this-pattern-doesn't-exist" data-status="deprecated" data-core="false">
|
||||
<article id="this-pattern-doesnt-exist" data-name="this pattern doesn't exist" data-status="deprecated" data-template="pug" data-core="false" data-path="this-pattern-doesnt-exist">
|
||||
<h1 class="status-deprecated"><span>This pattern doesn't exist
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="colours" data-path="colours" data-template="pug" data-pattern="colours" data-status="complete" data-core="true">
|
||||
<article id="colours" data-name="colours" data-status="complete" data-template="pug" data-core="true" data-path="colours">
|
||||
<h1 class="status-complete"><span>Colours
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="components" data-path="components" data-template="none" data-pattern="components" data-status="complete" data-core="false">
|
||||
<article id="components" data-name="components" data-status="complete" data-template="none" data-core="false" data-path="components">
|
||||
<h1 class="status-complete"><span>Components
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="components-sticky-note" data-path="components/sticky-note" data-template="pug" data-pattern="sticky-note" data-status="in-progress" data-core="true">
|
||||
<h1 class="status-in-progress"><span>Sticky note
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
<article id="components-sticky-note" data-name="sticky-note" data-status="complete" data-template="pug" data-core="true" data-path="components/sticky-note">
|
||||
<h1 class="status-complete"><span>Sticky note
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="components-switch" data-path="components/switch" data-template="pug" data-pattern="switch" data-status="in-progress" data-core="true">
|
||||
<article id="components-switch" data-name="switch" data-status="in-progress" data-template="pug" data-core="true" data-path="components/switch">
|
||||
<h1 class="status-in-progress"><span>Switch
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="components-tooltip" data-path="components/tooltip" data-template="pug" data-pattern="tooltip" data-status="in-progress" data-core="true">
|
||||
<article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip">
|
||||
<h1 class="status-in-progress"><span>Tooltip
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="layouts" data-path="layouts" data-template="none" data-pattern="layouts" data-status="complete" data-core="true">
|
||||
<article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts">
|
||||
<h1 class="status-complete"><span>Layouts
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="layouts-header" data-path="layouts/header" data-template="pug" data-pattern="header" data-status="in-progress" data-core="true">
|
||||
<article id="layouts-header" data-name="header" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/header">
|
||||
<h1 class="status-in-progress"><span>Header
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="layouts-breakpoints" data-path="layouts/breakpoints" data-template="pug" data-pattern="breakpoints" data-status="in-progress" data-core="true">
|
||||
<article id="layouts-breakpoints" data-name="breakpoints" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/breakpoints">
|
||||
<h1 class="status-in-progress"><span>Breakpoints
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="layouts-tabs" data-path="layouts/tabs" data-template="pug" data-pattern="tabs" data-status="complete" data-core="true">
|
||||
<h1 class="status-complete"><span>Tabs
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
<article id="layouts-tabs" data-name="tabs" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/tabs">
|
||||
<h1 class="status-in-progress"><span>Tabs
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
|
||||
</article>
|
||||
<article id="status" data-path="status" data-template="pug" data-pattern="status" data-status="complete" data-core="true">
|
||||
<article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
|
||||
<h1 class="status-complete"><span>Status
|
||||
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
|
||||
</article>
|
||||
|
||||
@@ -4,7 +4,14 @@
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>Primary colours</h2>
|
||||
<h2>What is it</h2>
|
||||
<p>Colours are used to represent your site and are an implementation of your brand's visual identity. </p>
|
||||
<h2>When to use it</h2>
|
||||
<p>Colours are used throughout your patterns. </p>
|
||||
<h2>How to use it</h2>
|
||||
<p>Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. </p>
|
||||
<p>Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option ⌥ key) will copy the colour token, and the meta key (Windows key or Mac command ⌘ key) will copy a CSS colour var. </p>
|
||||
<h3>Primary colours</h3>
|
||||
<color-samples>
|
||||
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
|
||||
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>
|
||||
@@ -4,6 +4,9 @@
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>What is it</h2>
|
||||
<h2>When to use it</h2>
|
||||
<h2>How to use it</h2>
|
||||
<div class="tab-group" id="header">
|
||||
<pre class="language-html" data-tab="html">
|
||||
<!-- create temp variables and store the design system values-->
|
||||
@@ -14,7 +17,7 @@
|
||||
</svg>
|
||||
<div>
|
||||
<div class="header-title">
|
||||
<h1> <a href="[site root]">[site name]</a></h1>
|
||||
<h1> <a href="./">[site name]</a></h1>
|
||||
</div>
|
||||
<!-- Other sections can go here, such as search and directory-->
|
||||
</div>
|
||||
@@ -12,7 +12,7 @@
|
||||
<td colspan="2">This pattern doesn't exist (1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./?p=this-pattern-doesn't-exist"> This pattern doesn't exist</a></td>
|
||||
<td><a href="./?p=this pattern doesn't exist"> This pattern doesn't exist</a></td>
|
||||
<td><span class="status-deprecated">Deprecated</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -30,7 +30,7 @@
|
||||
<td><span class="status-complete">Complete</span></td>
|
||||
<tr>
|
||||
<td><a href="./?p=components/sticky-note"> Sticky note</a></td>
|
||||
<td><span class="status-in-progress">In progress</span></td>
|
||||
<td><span class="status-complete">Complete</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./?p=components/switch"> Switch</a></td>
|
||||
@@ -57,7 +57,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./?p=layouts/tabs"> Tabs</a></td>
|
||||
<td><span class="status-complete">Complete</span></td>
|
||||
<td><span class="status-in-progress">In progress</span></td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -88,12 +88,12 @@
|
||||
<td>Layouts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
|
||||
<td> <a href="./?p=components/switch">Switch</a></td>
|
||||
<td>Components</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=components/switch">Switch</a></td>
|
||||
<td>Components</td>
|
||||
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
|
||||
<td>Layouts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
|
||||
@@ -119,14 +119,14 @@
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
|
||||
<td>Layouts</td>
|
||||
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
|
||||
<td>Components</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
|
||||
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -167,7 +167,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
|
||||
<td><span><span class="status-in-progress">In Progress</span></span></td>
|
||||
<td><span><span class="status-complete">Complete</span></span></td>
|
||||
<td>Components</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -177,11 +177,11 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
|
||||
<td><span><span class="status-complete">Complete</span></span></td>
|
||||
<td><span><span class="status-in-progress">In Progress</span></span></td>
|
||||
<td>Layouts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
|
||||
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
|
||||
<td><span><span class="status-deprecated">Deprecated</span></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@@ -5,15 +5,20 @@
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>What is it</h2>
|
||||
<p>Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. </p>
|
||||
<h2>When to use it</h2>
|
||||
<p>Use a sticky when you want to make a note without adding it to the content. </p>
|
||||
<h2>How to use it</h2>
|
||||
<p>Uses absolute positioning.
|
||||
<sticky-note class="blue" float="right">This <strong>is</strong> a test</sticky-note>You might need to add relative positioning to it's container.
|
||||
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note>
|
||||
</p>
|
||||
<p>If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". </p>
|
||||
<sticky-note>another one</sticky-note>
|
||||
<p>If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". </p>
|
||||
<div class="tab-group" id="sticky-note">
|
||||
<sticky-note>You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).</sticky-note>
|
||||
<tabset id="sticky-note">
|
||||
<pre class="language-html" tab="html">
|
||||
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
|
||||
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This <strong>is</strong> a sample sticky.
|
||||
| You can drag it out of the way if you need to see the content under it.</pre>
|
||||
<pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
|
||||
sticky-note-wrapper {
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -423,6 +428,6 @@ export function init(p = document){
|
||||
});
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</tabset>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,6 +5,7 @@
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>What is it</h2>
|
||||
<p>Switches are used to toggle application state between two mutually exlusive values. </p>
|
||||
<h2>When to use it</h2>
|
||||
<h2>How to use it</h2>
|
||||
<h2>Example</h2>
|
||||
@@ -91,19 +92,18 @@ function flip(e) {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function init(callback){
|
||||
let sw = document.querySelectorAll("[role='switch']");
|
||||
for (let i=0; i < sw.length; i++) {
|
||||
sw[i].innerHTML = "<span></span>";
|
||||
sw[i].setAttribute("aria-checked", "false");
|
||||
sw[i].setAttribute("tabindex", "0");
|
||||
sw[i].addEventListener("click", flip, false);
|
||||
sw[i].addEventListener("keypress", flip, false);
|
||||
module.exports = {
|
||||
init: (p = document) => {
|
||||
p.querySelectorAll("[role='switch']").forEach((sw) => {
|
||||
sw.innerHTML = "<span></span>";
|
||||
sw.setAttribute("aria-checked", "false");
|
||||
sw.setAttribute("tabindex", "0");
|
||||
sw.addEventListener("click", flip, false);
|
||||
sw.addEventListener("keypress", flip, false);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export {init};</pre>
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +1,25 @@
|
||||
const getDate = function(){
|
||||
var d = new Date();
|
||||
return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
}
|
||||
String.prototype.toTitleCase = function() {
|
||||
return this.replace(/\w\S*/g, function(txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
}
|
||||
|
||||
String.prototype.toSentenceCase = function() {
|
||||
return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
|
||||
}
|
||||
|
||||
String.prototype.toContent = function() {
|
||||
return this.replace(/-/g, " ");
|
||||
}
|
||||
String.prototype.toPath = function() {
|
||||
return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
|
||||
}
|
||||
|
||||
const font = {
|
||||
size: 0
|
||||
}
|
||||
|
||||
const copyColourFallback = (copyInfo, attr) => {
|
||||
console.log("fallback")
|
||||
@@ -50,13 +59,16 @@ const copyColourFallback = (copyInfo, attr) => {
|
||||
const showMessage = (m, s) => {
|
||||
s = s == undefined ? true : s;
|
||||
console.log("Copy success (navigator.clipboard)");
|
||||
$("body").prepend("<div id='copystatus' style='display: none;'><div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div></div>");
|
||||
$("#copystatus > div").css("top", (window.scrollY + 100)+ "px");
|
||||
$("#copystatus").fadeIn(1000, function(){
|
||||
$(this).fadeOut( 1000, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
})
|
||||
let status = document.createElement("div");
|
||||
status.setAttribute("id", "copystatus");
|
||||
// status.style.display = "none";
|
||||
status.innerHTML = "<div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div>";
|
||||
document.querySelector("body").prepend(status)
|
||||
|
||||
status.querySelector("div").style.top = (window.scrollY + 100)+ "px";
|
||||
setTimeout( () => {
|
||||
status.remove();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const oneClickSelect = (e, t = e.currentTarget) => {
|
||||
@@ -126,9 +138,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
colour: {
|
||||
// showMessage: (m, s) => {
|
||||
// showMessage(m, s);
|
||||
// },
|
||||
|
||||
copy: (w, t) => {
|
||||
let c = t.parentNode.getAttribute("data-" + (w=="var" ? "token" : w));
|
||||
c = w == "var" ? `var(${c})` : c;
|
||||
@@ -143,37 +153,44 @@ module.exports = {
|
||||
copyColourFallback(c, w);
|
||||
}
|
||||
},
|
||||
|
||||
positionTooltip: () => {
|
||||
$("color-pill > span").each(function(){
|
||||
if ((Number($("p").css('font-size').replace("px","")) * 10) > $(this).offset().left) {
|
||||
$(this).children("div.tooltip-tc").attr("tip-position", "right");
|
||||
} else {
|
||||
$(this).children("div.tooltip-tc").attr("tip-position", "bottom");
|
||||
}
|
||||
document.querySelectorAll("color-pill > span").forEach((ps) => {
|
||||
ps.querySelectorAll("div.tooltip-tc").forEach((tip) => {
|
||||
if ( (font.size * 10) > ps.offsetLeft ) {
|
||||
tip.setAttribute("tip-position", "right");
|
||||
} else {
|
||||
tip.setAttribute("tip-position", "bottom");
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
init: (args = {}) => {
|
||||
const url = getURLVars();
|
||||
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
if (url.p !== undefined) {
|
||||
document.querySelectorAll("main article:not([data-path^='" + url.p + "'])").forEach((a) => {
|
||||
a.remove();
|
||||
});
|
||||
|
||||
if (url.p == -1) {
|
||||
document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`;
|
||||
document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`;
|
||||
} else {
|
||||
document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`
|
||||
document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${ document.querySelector("title").getAttribute("data-site") }`
|
||||
}
|
||||
document.querySelector("nav ul li a[href='./?p=" + (url.p.indexOf("/") == -1 ? url.p : url.p.substring(0, url.p.indexOf("/")) ) + "']").parentNode.classList.add("active");
|
||||
} else {
|
||||
document.querySelector("nav ul li a[href='./']").parentNode.classList.add("active");
|
||||
}
|
||||
|
||||
if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad();
|
||||
|
||||
document.querySelectorAll("article").forEach((a) => {
|
||||
if ( a.getAttribute("data-template") != "none" ) {
|
||||
let path = "patterns/" + a.getAttribute("data-path") + (a.getAttribute("data-core") == "true" ? "-core" : "") + "/index.html";
|
||||
let path = a.getAttribute("data-path");
|
||||
path = "patterns/" +
|
||||
(a.getAttribute("data-core") == "true" ?
|
||||
"core/" + path.substring(path.lastIndexOf("/") + 1) :
|
||||
a.getAttribute("data-path"))
|
||||
+ "/index.html";
|
||||
const ASYNC = true;
|
||||
let ajx = new XMLHttpRequest();
|
||||
ajx.onreadystatechange = () => {
|
||||
@@ -195,6 +212,7 @@ module.exports = {
|
||||
})
|
||||
break;
|
||||
}
|
||||
|
||||
a.querySelectorAll("code").forEach((c)=> {
|
||||
c.classList.add("line-numbers");
|
||||
c.innerHTML = c.innerHTML.replace(/</g, "<");
|
||||
@@ -235,17 +253,23 @@ module.exports = {
|
||||
break;
|
||||
|
||||
case 404:
|
||||
|
||||
if (typeof args.notFound == "function") args.notFound(a, path);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
|
||||
}
|
||||
|
||||
if (typeof args.done == "function") args.done(a);
|
||||
|
||||
}
|
||||
};
|
||||
ajx.open("GET", path, ASYNC);
|
||||
ajx.send();
|
||||
}
|
||||
})
|
||||
|
||||
if (typeof args.afterArticleLoad == "function") args.afterArticleLoad();
|
||||
}
|
||||
};
|
||||
@@ -1,16 +1,16 @@
|
||||
// core and prism
|
||||
import * as core from './_core.js';
|
||||
import * as core from './core/_core.js';
|
||||
import * as Prism from "../../node_modules/prismjs/prism";
|
||||
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
||||
import '../../node_modules/prismjs/components/prism-json';
|
||||
import '../../node_modules/prismjs/components/prism-pug';
|
||||
import '../../node_modules/prismjs/components/prism-sass';
|
||||
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
||||
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
|
||||
// import pattern stuff.
|
||||
import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
|
||||
import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
|
||||
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
|
||||
import * as stickynote from "../pg/patterns/core/sticky-note/_sticky-note.js";
|
||||
import * as swtch from "../pg/patterns/core/switch/_switch.js";
|
||||
import * as tabs from "../pg/patterns/core/tabs/_tabs.js";
|
||||
|
||||
// init core
|
||||
core.init({
|
||||
@@ -26,56 +26,31 @@ core.init({
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// handler for the deprecated switch
|
||||
|
||||
/*
|
||||
// selectable content
|
||||
jQuery.fn.OneClickSelect = function () {
|
||||
return jQuery(this).on('click', function () {
|
||||
// In here, "this" is the element
|
||||
var range, selection;
|
||||
if (window.getSelection) {
|
||||
selection = window.getSelection();
|
||||
range = document.createRange();
|
||||
range.selectNodeContents(this);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
} else if (document.body.createTextRange) {
|
||||
range = document.body.createTextRange();
|
||||
range.moveToElementText(this);
|
||||
range.select();
|
||||
}
|
||||
// deprecated switch handler
|
||||
const flipDeprecated = (e, s = e.currentTarget) => {
|
||||
core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
|
||||
document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => {
|
||||
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
|
||||
});
|
||||
};
|
||||
*/
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
// show deprecated switch
|
||||
function flipDeprecated() {
|
||||
setTimeout(function(){
|
||||
if ($("#deprecated").attr("aria-checked") == "false") {
|
||||
$(".status-deprecated").closest("article").addClass("status-deprecated");
|
||||
core.cookie.set("show-deprecated", false, 30, "/");
|
||||
} else {
|
||||
$("article.status-deprecated").removeClass("status-deprecated");
|
||||
core.cookie.set("show-deprecated", true, 30, "/");
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
// create a pure JS mouse click event
|
||||
const click = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
});
|
||||
|
||||
$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
|
||||
setTimeout( function() {
|
||||
if (core.cookie.get("show-deprecated") == "true") {
|
||||
$("#deprecated").attr("aria-checked", "true");
|
||||
flipDeprecated();
|
||||
}
|
||||
}, 200);
|
||||
console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
|
||||
// /hide deprecated switch
|
||||
// get the switch, initialize it and add the handler
|
||||
let deprecated = document.querySelector("#deprecated");
|
||||
swtch.init(deprecated.parentNode)
|
||||
deprecated.onclick = flipDeprecated;
|
||||
deprecated.keypress = flipDeprecated;
|
||||
|
||||
})
|
||||
// check a cookie to get the switch's state
|
||||
if (core.cookie.get("show-deprecated") == "true") {
|
||||
deprecated.dispatchEvent(click);
|
||||
}
|
||||
|
||||
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
|
||||
// just for fun... We'll show deprecated if they match the path
|
||||
// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
-
|
||||
var content = [
|
||||
{
|
||||
name: "this-pattern-doesn't-exist",
|
||||
name: "this pattern doesn't exist",
|
||||
status: "deprecated",
|
||||
},
|
||||
{
|
||||
@@ -22,7 +22,7 @@
|
||||
files: [
|
||||
{
|
||||
name: "sticky-note",
|
||||
status: "in-progress",
|
||||
status: "complete",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
@@ -55,7 +55,7 @@
|
||||
},
|
||||
{
|
||||
name: "tabs",
|
||||
status: "complete",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
include ../_config
|
||||
block config
|
||||
//-
|
||||
DS2 core (c) 2024 Alexander McIlwraith
|
||||
Core licensed under CC BY-SA 4.0
|
||||
|
||||
- var getDate = function(){
|
||||
- const getDate = function(){
|
||||
- var d = new Date();
|
||||
- return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
- }
|
||||
@@ -16,23 +17,27 @@ block config
|
||||
- String.prototype.toContent = function() {
|
||||
- return this.replace(/-/g, " ");
|
||||
- }
|
||||
- String.prototype.toPath = function() {
|
||||
- return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
|
||||
- }
|
||||
|
||||
include ../_config
|
||||
block config
|
||||
|
||||
|
||||
mixin show-content(items, path)
|
||||
- path = (path == "" ? "" : path + "/") + items.name
|
||||
- if (items.status == "deprecated") {
|
||||
- articlestatus = "status-deprecated"
|
||||
- } else {
|
||||
- articlestatus = ""
|
||||
- }
|
||||
|
||||
article(id=path.replace(/\//g, "-")
|
||||
class=articlestatus
|
||||
data-path=path
|
||||
data-template=(items.template == undefined ? "pug" : items.template)
|
||||
data-pattern=items.name
|
||||
- path = (path == "" ? "" : path + "/") + items.name.toPath()
|
||||
|
||||
article(id=path.replace(/\//g, "-").toPath()
|
||||
data-name=items.name
|
||||
data-status=items.status
|
||||
data-display=items.display
|
||||
data-template=(items.template == undefined ? "pug" : items.template)
|
||||
data-core= (items.core ? "true" : "false")
|
||||
data-path=path
|
||||
)
|
||||
|
||||
h1(class="status-" + items.status )
|
||||
span= items.name.toSentenceCase().toContent()
|
||||
tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
|
||||
@@ -52,9 +57,13 @@ html(lang= lang )
|
||||
|
||||
block head
|
||||
link( href="assets/scaffolding.css" rel="stylesheet" )
|
||||
script(src="assets/jquery-min.js")
|
||||
|
||||
body
|
||||
//
|
||||
DS2 core (c) 2024 Alexander McIlwraith
|
||||
Core licensed under CC BY-SA 4.0
|
||||
|
||||
|
||||
a.skip(href="#main") Skip to main content
|
||||
div.container
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
//-
|
||||
DS2 core (c) 2024 Alexander McIlwraith
|
||||
Core licensed under CC BY-SA 4.0
|
||||
|
||||
include ../_config
|
||||
block config
|
||||
|
||||
@@ -5,7 +9,7 @@ mixin h(h)
|
||||
if headings[h]
|
||||
h2= headings[h]
|
||||
|
||||
- var getDate = function(){
|
||||
- const getDate = function(){
|
||||
- var d = new Date();
|
||||
- return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
- }
|
||||
@@ -20,6 +24,9 @@ mixin h(h)
|
||||
- String.prototype.toContent = function() {
|
||||
- return this.replace(/-/g, " ");
|
||||
- }
|
||||
- String.prototype.toPath = function() {
|
||||
- return this.trim().replace(/ /g, "_").replace(/-/g, "_").replace(/[\/\W]/g, "").replace(/_/g, "-");
|
||||
- }
|
||||
|
||||
|
||||
html
|
||||
|
||||
@@ -8,15 +8,13 @@ block head
|
||||
link(rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)")
|
||||
|
||||
block header
|
||||
include patterns/layouts/header-core/_header.pug
|
||||
include patterns/core/header/_header.pug
|
||||
|
||||
nav
|
||||
ul
|
||||
li
|
||||
a(href="./") Home
|
||||
each first in content
|
||||
li(class= navClass)
|
||||
a(href="./?p=" + first.name )= first.name.toContent().toSentenceCase()
|
||||
a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
|
||||
|
||||
p.deprecated-switch
|
||||
span
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
extends ../../core/_master-pattern
|
||||
|
||||
|
||||
block content
|
||||
include ../../core/_colour-samples
|
||||
h2 Primary colours
|
||||
+colour-samples(colours, "colors")
|
||||
@@ -1,24 +0,0 @@
|
||||
extends ../../../core/_master-pattern.pug
|
||||
block content
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
p Uses absolute positioning.
|
||||
sticky-note(float="right").blue This #[strong is] a test
|
||||
| You might need to add relative positioning to it's container.
|
||||
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
sticky-note another one
|
||||
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
|
||||
|
||||
div#sticky-note.tab-group
|
||||
pre.language-css(data-tab="css")
|
||||
include sticky-note.css
|
||||
pre.language-css(data-tab="scss")
|
||||
include _sticky-note.scss
|
||||
pre.language-js(data-tab="js")
|
||||
include _sticky-note.js
|
||||
@@ -1,28 +0,0 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
switch(sw.getAttribute("aria-checked")) {
|
||||
case "true":
|
||||
sw.setAttribute("aria-checked", "false");
|
||||
break;
|
||||
case "false":
|
||||
sw.setAttribute("aria-checked", "true");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function init(callback){
|
||||
let sw = document.querySelectorAll("[role='switch']");
|
||||
for (let i=0; i < sw.length; i++) {
|
||||
sw[i].innerHTML = "<span></span>";
|
||||
sw[i].setAttribute("aria-checked", "false");
|
||||
sw[i].setAttribute("tabindex", "0");
|
||||
sw[i].addEventListener("click", flip, false);
|
||||
sw[i].addEventListener("keypress", flip, false);
|
||||
}
|
||||
}
|
||||
|
||||
export {init};
|
||||
@@ -1,5 +1,7 @@
|
||||
extends ../../../core/_master-pattern.pug
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
20
src/pg/patterns/core/colours/index.pug
Normal file
20
src/pg/patterns/core/colours/index.pug
Normal file
@@ -0,0 +1,20 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
p Colours are used to represent your site and are an implementation of your brand's visual identity.
|
||||
|
||||
+h(1)
|
||||
p Colours are used throughout your patterns.
|
||||
|
||||
+h(2)
|
||||
p Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white.
|
||||
|
||||
p Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option ⌥ key) will copy the colour token, and the meta key (Windows key or Mac command ⌘ key) will copy a CSS colour var.
|
||||
|
||||
include ../../../core/_colour-samples
|
||||
h3 Primary colours
|
||||
+colour-samples(colours, "colors")
|
||||
@@ -12,5 +12,5 @@ header
|
||||
div
|
||||
div.header-title
|
||||
h1
|
||||
a(href= root )= site
|
||||
a(href="./")= site
|
||||
// Other sections can go here, such as search and directory
|
||||
@@ -1,8 +1,13 @@
|
||||
extends ../../../core/_master-pattern.pug
|
||||
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
|
||||
div.tab-group#header
|
||||
pre.language-html(data-tab="html")
|
||||
// create temp variables and store the design system values
|
||||
@@ -1,5 +1,7 @@
|
||||
extends ../../core/_master-pattern.pug
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
-
|
||||
- let list = []
|
||||
31
src/pg/patterns/core/sticky-note/index.pug
Normal file
31
src/pg/patterns/core/sticky-note/index.pug
Normal file
@@ -0,0 +1,31 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
+h(0)
|
||||
p Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes.
|
||||
+h(1)
|
||||
p Use a sticky when you want to make a note without adding it to the content.
|
||||
+h(2)
|
||||
p Uses absolute positioning.
|
||||
sticky-note(float="right").blue This #[strong is] a sample sticky.
|
||||
| You can drag it out of the way if you need to see the content under it.
|
||||
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
sticky-note You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
|
||||
|
||||
tabset#sticky-note
|
||||
pre.language-html(tab="html")
|
||||
sticky-note(float="right").blue This #[strong is] a sample sticky.
|
||||
| You can drag it out of the way if you need to see the content under it.
|
||||
pre.language-pug(tab="pug").
|
||||
sticky-note(float="right").blue This #[strong is] a sample sticky.
|
||||
| You can drag it out of the way if you need to see the content under it.
|
||||
pre.language-css(data-tab="css")
|
||||
include sticky-note.css
|
||||
pre.language-css(data-tab="scss")
|
||||
include _sticky-note.scss
|
||||
pre.language-js(data-tab="js")
|
||||
include _sticky-note.js
|
||||
26
src/pg/patterns/core/switch/_switch.js
Normal file
26
src/pg/patterns/core/switch/_switch.js
Normal file
@@ -0,0 +1,26 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
switch(sw.getAttribute("aria-checked")) {
|
||||
case "true":
|
||||
sw.setAttribute("aria-checked", "false");
|
||||
break;
|
||||
case "false":
|
||||
sw.setAttribute("aria-checked", "true");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
init: (p = document) => {
|
||||
p.querySelectorAll("[role='switch']").forEach((sw) => {
|
||||
sw.innerHTML = "<span></span>";
|
||||
sw.setAttribute("aria-checked", "false");
|
||||
sw.setAttribute("tabindex", "0");
|
||||
sw.addEventListener("click", flip, false);
|
||||
sw.addEventListener("keypress", flip, false);
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -3,9 +3,9 @@
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
$switch-accent: var(--colour-blue) !default; // switch background when switched right (on/ true)
|
||||
$switch-background: var(--colour-grey-xl) !default; // switch background when switched left (off / false)
|
||||
$switch-color: var(--colour-white) !default; // the colour of the switch
|
||||
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
|
||||
$switch-background: #d8d8d8 !default; // switch background when switched left (off / false)
|
||||
$switch-color: white !default; // the colour of the switch
|
||||
$switch-height: 1.5rem !default;
|
||||
|
||||
@mixin switch {
|
||||
@@ -1,9 +1,11 @@
|
||||
extends ../../../core/_master-pattern.pug
|
||||
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
p Switches are used to toggle application state between two mutually exlusive values.
|
||||
+h(1)
|
||||
+h(2)
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// DS2 core (c) 2024 Alexander McIlwraith
|
||||
// Licensed under CC BY-SA 4.0
|
||||
|
||||
$tab-border: var(--colour-grey) !default;
|
||||
$tab-selected: var(--colour-white) !default;
|
||||
$tab-notselected: var(--colour-grey-xxl) !default;
|
||||
$tab-border: #7f7f7f !default;
|
||||
$tab-selected: #FFF !default;
|
||||
$tab-notselected: #f0f0f0 !default;
|
||||
|
||||
@mixin tabs {
|
||||
tabset, .tab-group {
|
||||
@@ -1,9 +1,7 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern.pug
|
||||
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
@@ -1,6 +1,7 @@
|
||||
extends ../../../core/_master-pattern.pug
|
||||
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Core licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../core/_master-pattern
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
@@ -12,21 +12,18 @@ $tooltip-dark-allow: false;
|
||||
|
||||
@use 'sass:math';
|
||||
|
||||
|
||||
// We recommend explicitly using the underscore when referring to pattern scss
|
||||
// as you may have also created a version that compiles to css to display in
|
||||
// your pattern.
|
||||
@import "core";
|
||||
|
||||
@import "../pg/patterns/components/sticky-note-core/_sticky-note";
|
||||
@import "../pg/patterns/components/tooltip-core/_tooltip";
|
||||
@import "../pg/patterns/components/switch-core/_switch";
|
||||
|
||||
@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
|
||||
@import "../pg/patterns/layouts/header-core/_header";
|
||||
@import "../pg/patterns/layouts/tabs-core/_tabs";
|
||||
|
||||
@import "../pg/patterns/status-core/_status";
|
||||
@import "../pg/patterns/core/sticky-note/_sticky-note";
|
||||
@import "../pg/patterns/core/switch/_switch";
|
||||
@import "../pg/patterns/core/tooltip/_tooltip";
|
||||
@import "../pg/patterns/core/breakpoints/_breakpoints";
|
||||
@import "../pg/patterns/core/header/_header";
|
||||
@import "../pg/patterns/core/tabs/_tabs";
|
||||
@import "../pg/patterns/core/status/_status";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -46,6 +43,10 @@ html {
|
||||
@include sticky-note;
|
||||
@include status;
|
||||
|
||||
article[data-status=deprecated]:not(.show-deprecated) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -97,7 +98,6 @@ body {
|
||||
display: block;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 4;
|
||||
padding: 0 1rem;
|
||||
|
||||
@include break(-md) {
|
||||
grid-row: 3;
|
||||
|
||||
Reference in New Issue
Block a user