Last active
February 16, 2018 22:48
-
-
Save bernardodiasc/72026f68f627917d72bc to your computer and use it in GitHub Desktop.
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
| /* component/styles.css */ | |
| .component.component-name a { | |
| color: blue; | |
| } | |
| .component.component-name .title { | |
| font-size: 9em; | |
| } |
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
| <!-- component/index.html --> | |
| <section class="component component-name"> | |
| <h1>Component Name</h1> | |
| <!-- stuff --> | |
| <section> |
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
| /* component/scripts.js */ | |
| (function() { | |
| var component = document.getElementsByClassName('component-name'); | |
| // stuff | |
| }()); |
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
| <!-- index.php --> | |
| <?php | |
| // Global CSS files `global/styles/{file-name}.css` | |
| $styles = [ | |
| "fonts", | |
| "styles", | |
| ]; | |
| // Global JS files `global/scripts/{file-name}.js` | |
| $scripts = [ | |
| "scripts", | |
| ]; | |
| // Components to be loaded `{component-name}/` | |
| $components = [ | |
| "component-name", | |
| ]; | |
| ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <title>Page Title</title> | |
| <style> | |
| <?php | |
| // Include Global CSS | |
| foreach ($styles as $key => $value) { | |
| $stylePath = 'global/styles/' . $value . '.css'; | |
| if (file_exists($stylePath)) { | |
| include $stylePath; | |
| } | |
| } | |
| // Include components CSS | |
| foreach ($components as $key => $value) { | |
| $stylePath = $value . '/styles.css'; | |
| if (file_exists($stylePath)) { | |
| include $stylePath; | |
| } | |
| } | |
| ?> | |
| </style> | |
| </head> | |
| <body> | |
| <?php | |
| // Include components HTML | |
| foreach ($components as $key => $value) { | |
| $componentPath = $value . '/index.html'; | |
| if (file_exists($componentPath)) { | |
| include $componentPath; | |
| } | |
| } | |
| ?> | |
| <script> | |
| <?php | |
| // Include global JS | |
| foreach ($scripts as $key => $value) { | |
| $scriptPath = 'global/scripts/' . $value . '.js'; | |
| if (file_exists($scriptPath)) { | |
| include $scriptPath; | |
| } | |
| } | |
| // Include components JS | |
| foreach ($components as $key => $value) { | |
| $scriptPath = $value . '/scripts.js'; | |
| if (file_exists($scriptPath)) { | |
| include $scriptPath; | |
| } | |
| } | |
| ?> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment