diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1ce7ce0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +# https://git-scm.com/docs/gitignore +# https://help.github.com/articles/ignoring-files +# Example .gitignore files: https://github.com/github/gitignore +/bower_components/ +/node_modules/ +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db +*.css.map +/.vscode/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..46730b7 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# application-base +Application de base pour débuter un projet + +## Description +Description à venir + +## Particularités + +- Compléter + +## Variantes et ajouts possibles + +- Compléter diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..09c3c12 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..03846a4 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + Application Javascript + + + + +
+

Application Javascript

+ +
Le HTML créé par programmation devrait apparaître ici.
+
+ + diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..f286407 --- /dev/null +++ b/src/App.js @@ -0,0 +1,23 @@ +/** + * @module App + */ +export default class App { + /** + * Méthode principale. Sera appelée après le chargement de la page. + */ + static main() { + console.log("Je suis prêt"); + var app = document.getElementById("app"); + // app.innerHTML = "La page est chargée"; + } + /** + * Méthode qui permet d'attendre le chargement de la page avant d'éxécuter le script principal + * @returns undefined Ne retourne rien + */ + static init() { + window.addEventListener("load", () => { + this.main(); + }); + } +} +App.init(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..6875098 --- /dev/null +++ b/src/style.css @@ -0,0 +1,51 @@ +html { + height: 100%; + font-size: 16px; + font-family: arial; +} + +body { + height: 100%; + margin: 0; +} + +#interface { + min-height: 100%; + display: -ms-grid; + display: grid; + -ms-grid-rows: auto 1fr auto; + grid-template-rows: auto 1fr auto; +} + +#interface > header, #interface > footer { + padding: .5em 1em; + background-color: #EEE; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +#interface > header { + -webkit-box-ordinal-group: -999; + -ms-flex-order: -1000; + order: -1000; +} + +#interface > header h1 { + margin: 0; +} + +#interface > footer { + -webkit-box-ordinal-group: 1001; + -ms-flex-order: 1000; + order: 1000; + font-size: smaller; +} + +#app { + padding: 1em; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..f4595f5 --- /dev/null +++ b/src/style.scss @@ -0,0 +1,34 @@ +html { + height: 100%; + font-size: 16px; + font-family: arial; +} +body { + height: 100%; + margin: 0; +} +#interface { + min-height: 100%; + display: grid; + grid-template-rows: auto 1fr auto; + & > header, & > footer { + padding: .5em 1em; + background-color: #EEE; + display: flex; + justify-content: space-between; + } + & > header { + order: -1000; + h1 { + margin: 0; + } + } + & > footer { + order: 1000; + font-size: smaller; + } +} + +#app { + padding: 1em; +}