├── .gitignore ├── LICENSE ├── README.md ├── assets ├── css │ └── style.min.css └── sass │ ├── partials │ ├── _base.sass │ └── _home.sass │ ├── style.sass │ └── variables.sass ├── gulpfile.js ├── index.html ├── index.pug ├── js ├── index.min.js └── modules │ ├── answer.js │ └── timer.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .sass-cache/ 3 | .DS_Store 4 | package-lock.json 5 | *.map 6 | .eslintrc.js 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Kevin Oliveira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # O front-end acabou? 2 | 3 | ### Ainda não. 4 | 5 | 2018 © Licensed by MIT 6 | -------------------------------------------------------------------------------- /assets/css/style.min.css: -------------------------------------------------------------------------------- 1 | *,::after,::before,html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;box-sizing:border-box;text-rendering:optimizeLegibility}body{align-items:center;background-color:#000;color:#fff;display:flex;flex-wrap:wrap;font-family:"Open Sans",sans-serif;font-size:18px;justify-content:center;margin:0;min-height:100vh;transition:background-color .3s ease-in-out}@media (max-width:850px){body{padding:2em 0}}a{text-decoration:none}main{text-align:left;width:75%}.question{margin-bottom:5rem}@media (max-width:850px){.question{margin-bottom:3rem}}.question__title{font-size:1.2rem;font-weight:700;margin:0}.answer{font-size:8rem;text-align:center}.timer{font-size:1.5rem;margin:.5rem 0}.timer__title{font-size:1.2rem;font-weight:700;margin:0}.timer__subtitle{font-size:.85rem}.answer,.timer{font-family:"Roboto Mono",monospace}.created-by{bottom:1em;display:block;font-size:.7em;position:absolute;text-align:center}@media (max-width:850px){.created-by{position:unset;margin-top:3em;bottom:0}}.creator-link{color:#fff;font-weight:700;text-decoration:underline;transition:opacity .3s ease-in-out}.creator-link:hover{text-decoration:none}@media (max-width:850px){.created-text:last-child{margin-bottom:0}} 2 | -------------------------------------------------------------------------------- /assets/sass/partials/_base.sass: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before, 4 | html 5 | // sass-lint:disable-block no-vendor-prefixes 6 | -moz-osx-font-smoothing: grayscale 7 | -webkit-font-smoothing: antialiased 8 | box-sizing: border-box 9 | text-rendering: optimizeLegibility 10 | 11 | body 12 | align-items: center 13 | background-color: $black 14 | color: $white 15 | display: flex 16 | flex-wrap: wrap 17 | font-family: $default 18 | font-size: 18px 19 | justify-content: center 20 | margin: 0 21 | min-height: 100vh 22 | transition: background-color .3s ease-in-out 23 | 24 | @media (max-width: 850px) 25 | padding: 2em 0 26 | 27 | a 28 | text-decoration: none 29 | -------------------------------------------------------------------------------- /assets/sass/partials/_home.sass: -------------------------------------------------------------------------------- 1 | main 2 | text-align: left 3 | width: 75% 4 | 5 | .question 6 | margin-bottom: 5rem 7 | 8 | @media (max-width: 850px) 9 | margin-bottom: 3rem 10 | 11 | &__title 12 | font: 13 | size: 1.2rem 14 | weight: bold 15 | margin: 0 16 | 17 | .answer 18 | font-size: 8rem 19 | text-align: center 20 | 21 | .timer 22 | font-size: 1.5rem 23 | margin: .5rem 0 24 | 25 | &__title 26 | font: 27 | size: 1.2rem 28 | weight: bold 29 | margin: 0 30 | 31 | &__subtitle 32 | font-size: .85rem 33 | 34 | .answer, 35 | .timer 36 | font-family: $monospace 37 | 38 | .created-by 39 | bottom: 1em 40 | display: block 41 | font-size: .7em 42 | position: absolute 43 | text-align: center 44 | 45 | @media (max-width: 850px) 46 | position: unset 47 | margin-top: 3em 48 | bottom: 0 49 | 50 | .creator-link 51 | color: $white 52 | font-weight: bold 53 | text-decoration: underline 54 | transition: opacity .3s ease-in-out 55 | 56 | &:hover 57 | text-decoration: none 58 | 59 | .created-text:last-child 60 | @media (max-width: 850px) 61 | margin-bottom: 0 62 | -------------------------------------------------------------------------------- /assets/sass/style.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | @import partials/base 4 | 5 | @import partials/home 6 | -------------------------------------------------------------------------------- /assets/sass/variables.sass: -------------------------------------------------------------------------------- 1 | // 1. Colors 2 | $white: #fff 3 | $black: #000 4 | 5 | // 2. Typography 6 | $default: 'Open Sans', sans-serif 7 | $monospace: 'Roboto Mono', monospace 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'), 2 | pug = require('gulp-pug'), 3 | sass = require ('gulp-sass'), 4 | concat = require ('gulp-concat'), 5 | cleanCSS = require('gulp-clean-css'), 6 | autoprefixer = require('gulp-autoprefixer'), 7 | uglify = require('gulp-uglify'), 8 | imagemin = require('gulp-imagemin'), 9 | watch = require('gulp-watch'), 10 | browserSync = require('browser-sync').create(); 11 | 12 | 13 | // Dev Tasks 14 | gulp.task('pug-dev', () => { 15 | return gulp.src('index.pug') 16 | .pipe(pug()) 17 | .pipe(gulp.dest('./')); 18 | }); 19 | 20 | gulp.task('sass-dev', () => { 21 | return gulp.src(['assets/sass/*.sass', 'assets/sass/partials/*.sass']) 22 | .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 23 | .pipe(concat('style.min.css')) 24 | .pipe(gulp.dest('assets/css')) 25 | .pipe(browserSync.reload({ 26 | stream: true 27 | })); 28 | }); 29 | 30 | gulp.task('js-dev', () => { 31 | return gulp.src('js/modules/*.js') 32 | //.pipe(uglify()) 33 | .pipe(concat('index.min.js')) 34 | .pipe(gulp.dest('js')); 35 | }); 36 | 37 | 38 | // Build Tasks 39 | gulp.task('pug-build', () => { 40 | return gulp.src('index.pug') 41 | .pipe(pug()) 42 | .pipe(gulp.dest('./')); 43 | }); 44 | 45 | gulp.task('sass-build', () => { 46 | return gulp.src(['assets/sass/*.sass', 'assets/sass/partials/*.sass']) 47 | .pipe(sass()) 48 | .pipe(autoprefixer()) 49 | .pipe(cleanCSS()) 50 | .pipe(concat('style.min.css')) 51 | .pipe(gulp.dest('assets/css')); 52 | }); 53 | 54 | gulp.task('js-build', () => { 55 | return gulp.src('js/modules/*.js') 56 | //.pipe(uglify()) 57 | .pipe(concat('index.min.js')) 58 | .pipe(gulp.dest('js')); 59 | }); 60 | 61 | gulp.task('image-build', () => { 62 | return gulp.src('assets/img/**/*') 63 | .pipe(imagemin()) 64 | .pipe(gulp.dest('assets/img')); 65 | }); 66 | 67 | 68 | // Server Tasks 69 | gulp.task('watch', ['browserSync', 'pug-dev', 'sass-dev', 'js-dev'], () => { 70 | 71 | gulp.watch(['index.pug', 'includes/**/*.pug'], ['pug-dev', browserSync.reload]); 72 | gulp.watch('assets/sass/**/*.sass', ['sass-dev']); 73 | gulp.watch('js/modules/*.js', ['js-dev', browserSync.reload]); 74 | 75 | }); 76 | 77 | gulp.task('browserSync', () => { 78 | browserSync.init({ 79 | server: { 80 | baseDir: './' 81 | }, 82 | }); 83 | }); 84 | 85 | 86 | // Main Tasks 87 | gulp.task('default', ['watch'], () => {}); 88 | gulp.task('build', ['pug-build', 'sass-build', 'js-build', 'image-build'], () => {}); 89 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | O front-end acabou? 2 | 3 | 10 |

O front-end já morreu?

???

Estamos esperando há:

(desde o dia 19 de março de 2017)

Criado por Kevin Oliveira & Ricardo Gouveia

WTF?

11 | -------------------------------------------------------------------------------- /index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='pt-br') 3 | head 4 | meta(charset='utf-8') 5 | meta(name='description', content='') 6 | meta(name='viewport', content='width=device-width, initial-scale=1.0, user-scalable=no') 7 | meta(name='format-detection', content='telephone=no') 8 | 9 | //- Title 10 | //- =================================== 11 | title O front-end acabou? 12 | 13 | //- Favicon and SVG logo 14 | //- =================================== 15 | link(rel='shortcut icon', href='assets/img/favicon.ico') 16 | link(rel='logo', type='image/svg', href='assets/img/logo.svg') 17 | 18 | //- Stylesheet and fonts are placed after body for performance reasons 19 | //- Scripts are places at the end of body for performance reasons 20 | 21 | body 22 | 23 | main 24 | .question 25 | h2.question__title O front-end já morreu? 26 | span.answer ??? 27 | 28 | .counter 29 | h2.timer__title Estamos esperando há: 30 | .timer 31 | span.timer__subtitle (desde o dia 19 de março de 2017) 32 | 33 | .created-by 34 | p.created-text Criado por  35 | a.creator-link(href='https://github.com/kvnol', target='_blank', rel='noopener') Kevin Oliveira 36 | |  &  37 | a.creator-link(href='https://github.com/ricardogouveia3', target='_blank', rel='noopener') Ricardo Gouveia 38 | p.created-text 39 | a.creator-link(href='https://github.com/frontendbr/forum/issues/490', target='_blank', rel='noopener') WTF? 40 | 41 | 42 | //- JS scripts 43 | //- =================================== 44 | script(async, src='js/index.min.js') 45 | 46 | //- Stylesheet and fonts 47 | //- =================================== 48 | link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css') 49 | link(rel='stylesheet', href='assets/css/style.min.css') 50 | 51 | link(rel='stylesheet', href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800") 52 | link(rel='stylesheet', href="https://fonts.googleapis.com/css?family=Roboto+Mono") 53 | -------------------------------------------------------------------------------- /js/index.min.js: -------------------------------------------------------------------------------- 1 | setTimeout(function(){ 2 | document.querySelector(".answer").innerHTML = 'Não'; 3 | document.body.style.backgroundColor = "#2fbc81"; 4 | }, 3000); 5 | 6 | const countDownDate = new Date("Mar 17, 2017 00:00:00").getTime(); 7 | const x = setInterval(() => { 8 | let now = new Date().getTime(); 9 | let distance = now - countDownDate; 10 | 11 | let days = Math.floor(distance / (1000 * 60 * 60 * 24)); 12 | let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 13 | let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); 14 | let seconds = Math.floor((distance % (1000 * 60)) / 1000); 15 | let thousandths = (((distance % (1000 * 60)) / 1000) - seconds).toFixed(2).replace(/[^\d]+/g,'').replace(0,''); 16 | 17 | document.querySelector(".timer").innerHTML = `${days} dias, ${hours} horas, ${minutes} minutos e ${seconds} segundos e ${thousandths} milesimos`; 18 | }, 1); 19 | -------------------------------------------------------------------------------- /js/modules/answer.js: -------------------------------------------------------------------------------- 1 | setTimeout(function(){ 2 | document.querySelector(".answer").innerHTML = 'Não'; 3 | document.body.style.backgroundColor = "#2fbc81"; 4 | }, 3000); 5 | -------------------------------------------------------------------------------- /js/modules/timer.js: -------------------------------------------------------------------------------- 1 | const countDownDate = new Date("Mar 17, 2017 00:00:00").getTime(); 2 | const x = setInterval(() => { 3 | let now = new Date().getTime(); 4 | let distance = now - countDownDate; 5 | 6 | let days = Math.floor(distance / (1000 * 60 * 60 * 24)); 7 | let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 8 | let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); 9 | let seconds = Math.floor((distance % (1000 * 60)) / 1000); 10 | 11 | document.querySelector(".timer").innerHTML = `${days} dias, ${hours} horas, ${minutes} minutos e ${seconds} segundos`; 12 | }, 1000); 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-boilerplate", 3 | "version": "1.0.0", 4 | "description": "simple boilerplate for gulp projets with pug, sass, browsersync", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "browser-sync": "^2.24.4", 9 | "gulp": "^3.9.1", 10 | "gulp-autoprefixer": "^5.0.0", 11 | "gulp-clean-css": "^3.9.4", 12 | "gulp-concat": "^2.6.1", 13 | "gulp-imagemin": "^4.1.0", 14 | "gulp-pug": "^4.0.1", 15 | "gulp-sass": "^4.0.1", 16 | "gulp-uglify": "^3.0.0", 17 | "gulp-watch": "^5.0.0" 18 | }, 19 | "scripts": { 20 | "start": "npm run dev", 21 | "dev": "gulp", 22 | "build": "gulp build" 23 | }, 24 | "sasslintConfig": ".sass-lint.yml", 25 | "author": "Ricardo Gouveia", 26 | "license": "MIT" 27 | } 28 | --------------------------------------------------------------------------------