From 06de5347fac4c7f0334fbae91c537e80b909fcd5 Mon Sep 17 00:00:00 2001 From: kendo5731 Date: Sun, 31 Jan 2016 15:24:53 +0100 Subject: [PATCH] feat(): add menu bar and main content with colors from atom editor --- .gitignore | 5 ++ gulpfile.js | 27 ++++++++ package.json | 17 +++++ public/css/_custom-bootstrap.scss | 46 +++++++++++++ public/css/_mixins.scss | 14 ++++ public/css/_variables.scss | 7 ++ public/css/theme.scss | 109 ++++++++++++++++++++++++++++++ public/fonts/.gitkeep | 0 public/index.html | 98 +++++++++++++++++++++++++++ public/js/theme.js | 35 ++++++++++ 10 files changed, 358 insertions(+) create mode 100644 .gitignore create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 public/css/_custom-bootstrap.scss create mode 100644 public/css/_mixins.scss create mode 100644 public/css/_variables.scss create mode 100644 public/css/theme.scss create mode 100644 public/fonts/.gitkeep create mode 100644 public/index.html create mode 100644 public/js/theme.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..39e08c2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.idea +public/**/*.css +node_modules +public/fonts +!public/fonts/.gitkeep \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..4ff428e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,27 @@ +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var sass = require('gulp-sass'); +var browserSync = require('browser-sync').create(); + +gulp.task('fonts', function() { + gulp.src('./node_modules/bootstrap-sass/assets/fonts/bootstrap/*') + .pipe(gulp.dest('./public/fonts')); +}); + +gulp.task('serve', ['fonts', 'sass'] , function () { + browserSync.init({ server: { baseDir: "./public" } }); + gulp.watch("public/**/*.scss", ['sass']); + gulp.watch("public/*.html").on('change', browserSync.reload); +}); + +gulp.task('sass', function() { + return gulp.src("./public/**/*.scss") + .pipe(sass().on('error', handleError)) + .pipe(gulp.dest('./public')) + .pipe(browserSync.stream()); +}); + +function handleError(err) { + gutil.log(err); + this.emit('end'); +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a44752d --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "description": "HTML/CSS Theme for www.aubm.net", + "repository": "https://github.com/aubm/aubm-website-theme.git", + "license": "MIT", + "dependencies": { + "bootstrap-sass": "^3.3.6" + }, + "devDependencies": { + "browser-sync": "^2.11.1", + "gulp": "^3.9.0", + "gulp-sass": "^2.1.1", + "gulp-util": "^3.0.7" + }, + "scripts": { + "serve": "gulp serve" + } +} diff --git a/public/css/_custom-bootstrap.scss b/public/css/_custom-bootstrap.scss new file mode 100644 index 0000000..4b6dbd8 --- /dev/null +++ b/public/css/_custom-bootstrap.scss @@ -0,0 +1,46 @@ +$bootstrap_path: "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/"; + +// Core variables and mixins +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"; +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; + +// Reset and dependencies +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print"; +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; + +// Core CSS +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code"; +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons"; + +//// Components +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells"; +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close"; + +// Utility classes +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities"; +@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; diff --git a/public/css/_mixins.scss b/public/css/_mixins.scss new file mode 100644 index 0000000..c94bfc9 --- /dev/null +++ b/public/css/_mixins.scss @@ -0,0 +1,14 @@ +.no-padding-left-and-right { + padding-left: 0px; + padding-right: 0px; +} + +.no-user-select { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE/Edge */ + user-select: none; /* non-prefixed version, currently + not supported by any browser */ +} diff --git a/public/css/_variables.scss b/public/css/_variables.scss new file mode 100644 index 0000000..626a3c4 --- /dev/null +++ b/public/css/_variables.scss @@ -0,0 +1,7 @@ +$bg-color: #001f27; +$content-bg-color: #002b36; +$menu-hover-bg-color: #003b4a; +$text-color: #839496; +$link-color: #2aa198; + +$icon-font-path: "../fonts/"; diff --git a/public/css/theme.scss b/public/css/theme.scss new file mode 100644 index 0000000..d9b7237 --- /dev/null +++ b/public/css/theme.scss @@ -0,0 +1,109 @@ +//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; +@import "./variables.scss"; +@import "./custom-bootstrap.scss"; +@import "./mixins.scss"; + +html { + height: 100%; +} + +body { + min-height: 100%; + height: 100%; + font-family: 'Source Code Pro'; + background-color: $bg-color; + color: $text-color; + &>.container-fluid { + @extend .no-padding-left-and-right; + } +} + +.page-container { + height: 100%; + min-height: 100%; +} + +a { + color: $link-color; + &:hover { + color: $link-color; + text-decoration: underline; + } +} + +.article-content { + background-color: $content-bg-color; + min-height: 100%; + padding-top: 1px; + padding-bottom: 15px; +} + +.menu { + padding-left: 0px; + nav { + @media (min-width: $screen-md-min) { + @extend .no-padding-left-and-right; + position: fixed; + height: 100%; + overflow-y: auto; + } + + @media (max-width: $screen-sm-max) { + ul { + display: none; + } + } + + h3 { + @extend .no-user-select; + cursor: pointer; + font-size: 14px; + padding: 4px 0px 4px 15px; + margin: 0px; + &:before { + @extend .glyphicon; + @extend .glyphicon-folder-close; + margin-right: 8px; + } + } + + .open { + h3:before { + @extend .glyphicon-folder-open; + } + } + + ul { + padding-left: 0px; + margin: 0px; + li { + list-style: none; + padding: 4px 30px 4px 40px; + margin-right: -15px; + &:before { + @extend .glyphicon; + @extend .glyphicon-file; + margin-right: 8px; + } + + &:hover { + background-color: $menu-hover-bg-color; + } + + a, a:hover { + color: $text-color; + text-decoration: none; + } + } + } + + @media (max-width: $screen-sm-max) { + h3 { + padding: 10px 0px 10px 15px; + } + ul li { + padding: 10px 30px 10px 40px; + } + } + } +} diff --git a/public/fonts/.gitkeep b/public/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..6b27c55 --- /dev/null +++ b/public/index.html @@ -0,0 +1,98 @@ + + + + + + + + + Aubm + + + + + +
+
+ +
+
+
+

Bonjour, ce petit article pour partager une de mes découvertes récentes. Il s’agit du serveur web + interne de + PHP, intégré depuis la version 5.4. La lecture de cette article ne vous apprendra surement pas grand + chose + si vous + avez déjà connaissance de cette fonctionnalité.

+ +

Pour en savoir plus, rendez vous directement sur la documentation + officielle de + PHP. La documentation explique comment utiliser de façon très simple ce service. A noter que celui n’est + pas pensé pour être utilisé dans un environnement de production, mais est destiné à servir dans un + environnement de + développement. Il n’est, par conséquent, plus nécessaire de configurer une nouvelle vhost sur + votre + serveur + http (typiquement apache ou nginx), et d’ajouter une entrée dans le fichier hosts. Démarrez votre + application + à l’aide d’une simple commande dans votre terminal, et testez directement votre application + ! +

+ +

Encore mieux

+ +

De nombreux framework de développement PHP, dont Symfony ou encore Laravel facillitent encore plus l’utilisation + de ce service. Pour l’exemple, si vous utilisez Symfony2 pour développer votre application, tapez + directement + dans votre terminal la commande suivante :

+ +
php app/console server:run
+
+ +

La console vous affichera un message comme :

+ +
Server running on http://localhost:8000
+
+ +

Ouvrez votre navigateur et rendez vous à l’adresse http:/localhost:8000 pour utiliser + votre + application. Note : la commande lance l’application dans l’environnement de développement, + vous + n’avez + donc pas besoin de faire précéder toutes vos route par app_dev.php.

+ +

Pour finir un petit coup d’oeil sur les informations que nous fournit la commande suivante :

+ +
php app/console server:run --help
+
+ +

Enfin, pour en savoir plus, rendez-vous directement sur la documentation + officelle + de Symfony.

+ +

Et voilà, have fun :)

+
+
+
+ + + \ No newline at end of file diff --git a/public/js/theme.js b/public/js/theme.js new file mode 100644 index 0000000..a6f1517 --- /dev/null +++ b/public/js/theme.js @@ -0,0 +1,35 @@ +(function() { + var elements = document.querySelectorAll('[data-open]'); + for (var i=0; i