├── .gitignore ├── .htaccess ├── .jshintrc ├── LICENSE ├── README.md ├── assets ├── js │ ├── app.js │ ├── cache.js │ ├── config.js │ ├── framework.js │ ├── main.js │ ├── routes.js │ ├── sections │ │ ├── about.js │ │ ├── default.js │ │ ├── gallery.js │ │ ├── home.js │ │ ├── preloader.js │ │ ├── section.js │ │ └── sub.js │ └── utils │ │ ├── array │ │ ├── combine.js │ │ ├── index.js │ │ ├── max.js │ │ ├── min.js │ │ ├── slice.js │ │ └── without.js │ │ ├── biggie │ │ ├── bind.js │ │ ├── index.js │ │ ├── page.js │ │ ├── route.js │ │ └── slug.js │ │ ├── css │ │ ├── index.js │ │ ├── prefixes.js │ │ └── rect.js │ │ ├── dom │ │ ├── each.js │ │ ├── index.js │ │ └── scroll.js │ │ ├── func │ │ ├── index.js │ │ ├── interval.js │ │ └── once.js │ │ ├── index.js │ │ └── math │ │ ├── clamp.js │ │ └── index.js └── less │ ├── import │ ├── _flexbox.less │ ├── _fonts.less │ ├── _grid.less │ ├── _keyframes.less │ ├── _medias.less │ ├── _mixin.less │ ├── _normalize.less │ ├── _typography.less │ └── _var.less │ ├── layout.less │ └── pages │ ├── _about.less │ ├── _home.less │ ├── _preloader.less │ └── _sub.less ├── build ├── app.js ├── app.min.css └── app.min.js ├── favicon.ico ├── gulp ├── index.js ├── tasks │ ├── aliases.js │ ├── javascript.js │ ├── lint.js │ ├── serve.js │ └── styles.js └── utils │ └── handleErrors.js ├── gulpfile.js ├── index.html ├── package.json ├── templates ├── about.html ├── gallery.html ├── home.html └── section │ ├── one.html │ └── two.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | RewriteBase / 3 | 4 | RewriteRule ^index\.html$ - [L] 5 | RewriteCond %{REQUEST_FILENAME} !-f 6 | RewriteCond %{REQUEST_FILENAME} !-d 7 | RewriteRule . /index.html [L] -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi" : true, 3 | "expr" : true, 4 | "esversion" : 6 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Baptiste Briel 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #### :exclamation: :exclamation: :exclamation: This project is no longer maintained. I would not suggest starting a new project with it. 2 | 3 | biggie is a JavaScript application boilerplate written in ES6 based on [bigwheel](https://github.com/bigwheel-framework), a minimalist framework from [Jam3](http://www.jam3.com/). 4 | 5 | > :exclamation: Be sure to check out the full [documentation](https://github.com/bigwheel-framework/documentation) for bigwheel before you're getting started. 6 | 7 | ## Getting Started 8 | 9 | ```sh 10 | # clone repo to local 11 | git clone https://github.com/baptistebriel/biggie.git 12 | 13 | # move into directory 14 | cd biggie 15 | 16 | # install dependencies 17 | npm i 18 | 19 | # start gulp 20 | gulp 21 | ``` 22 | 23 | Your site will be at `http://localhost:3000` by default using [browser-sync](http://www.browsersync.io) 24 | 25 | ## Examples 26 | 27 | - [oursroux.com](http://oursroux.com) 28 | - [buildinamsterdam.com](http://buildinamsterdam.com) 29 | - [flavinsky.com](http://flavinsky.com) 30 | - [pierrelevaillant.me](http://pierrelevaillant.me) 31 | - [alisharaf.com](http://alisharaf.com) 32 | - [margauxgayet.com](http://margauxgayet.com) 33 | - [bbriel.me](http://bbriel.me) 34 | - [bigwheel-framework/built-with-bigwheel](https://github.com/bigwheel-framework/built-with-bigwheel) 35 | - & more to come! 36 | 37 | ## Documentation 38 | 39 | ### Loading your data 40 | 41 | > `/assets/js/utils/biggie/page.js` 42 | 43 | - `page(req, view, options, done)` 44 | 45 | This function is called on `init`, for all sections that extends default.js 46 | - 1) retrieve the slug of the current route, from the `req` parameter 47 | - 2) get the HTML content using AJAX, or from biggie's cache if this route already has been resolved 48 | - 3) create an HTML element and append it to the view 49 | 50 | #### Default Setup 51 | 52 | With the default setup, it's loading static `.html` files under the `/templates` folder as such: 53 | i.e. with a route as `http://localhost:3000/home`, it will load `/templates/home.html` 54 | 55 | > `/assets/js/utils/biggie/page.js` 56 | 57 | ```js 58 | ajax.get(`${config.BASE}templates/${id}.html`, { 59 | success: (object) => { 60 | const html = object.data 61 | page.innerHTML = html 62 | if(options.cache) cache[id] = html 63 | done() 64 | } 65 | }) 66 | ``` 67 | 68 | #### biggie in a sub-folder 69 | 70 | If you want to use biggie in a subfolder of your website instead of root, edit `config.BASE` in `assets/js/config.js` so it will set the routes and get the templates using this prefix. 71 | 72 | Default for `config.BASE` is `/`, but if your website is under `website.com/biggie` for example, set it to `/biggie/` 73 | 74 | #### WordPress 75 | 76 | If you're using WordPress for example, the `page` function would look like this: 77 | 78 | > `/assets/js/utils/biggie/page.js` 79 | 80 | ```js 81 | const id = slug(req, options) 82 | const cn = id.replace('/', '-') 83 | const page = create({ selector: 'div', id: `page-${cn}`, styles: `page page-${cn}` }) 84 | 85 | view.appendChild(page) 86 | 87 | if(!cache[slug] || !options.cache) { 88 | 89 | ajax.get(`${config.BASE}${slug}`, { 90 | success: (object) => { 91 | const html = object.data.split(/(
|<\/main>)/ig)[2] 92 | page.innerHTML = html 93 | if(options.cache) cache[slug] = html 94 | done() 95 | } 96 | }) 97 | 98 | } else { 99 | 100 | setTimeout(() => { 101 | page.innerHTML = cache[slug] 102 | done() 103 | }, 1) 104 | } 105 | 106 | return page 107 | ``` 108 | 109 | > :exclamation: Be sure that your permalinks are set to use the custom structure: all your WordPress urls needs to look like `/home`, `/work/name` etc. It will not work using post id. 110 | 111 | You might need to update your `.htaccess` as well: 112 | 113 | ``` 114 | 115 | RewriteEngine On 116 | RewriteBase / 117 | RewriteRule ^index\.php$ - [L] 118 | 119 | RewriteCond %{REQUEST_FILENAME} -f [OR] 120 | RewriteCond %{REQUEST_FILENAME} -d 121 | RewriteRule ^ - [L] 122 | RewriteRule . index.php [L] 123 | 124 | ``` 125 | 126 | #### .JSON & Mustache.js 127 | 128 | Another thing you could possibly do is use a single `.json` file for all your data and a template engine like [`mustache.js`](https://github.com/janl/mustache.js) 129 | 130 | > `assets/js/sections/preloader.js` 131 | 132 | ```js 133 | init(req, done) { 134 | classes.add(config.$body, 'is-loading') 135 | ajax.get(`${config.BASE}data/data.json`, { 136 | success: (object) => { 137 | window._data = object.data 138 | done() 139 | } 140 | }) 141 | } 142 | ``` 143 | 144 | > `/assets/js/utils/biggie/page.js` 145 | 146 | ```js 147 | ajax.get(`${config.BASE}templates/${id}.mst`, { 148 | success: (object) => { 149 | const rendered = Mustache.render(object.data, window._data) 150 | page.innerHTML = rendered 151 | if(options.cache) cache[id] = rendered 152 | done() 153 | } 154 | }) 155 | ``` 156 | 157 | ### Animations 158 | 159 | All sections that extends the default.js have an object called `this.ui` -- using [`query-dom-components`](https://github.com/dcamilleri/query-dom-components) -- so you can access DOM nodes easily. 160 | 161 | Here's how most of my `animateIn` & `animateOut` functions looks like: 162 | 163 | ```js 164 | animateIn(req, done) { 165 | const tl = new TimelineMax({ paused: true, onComplete: done }) 166 | tl.to(this.page, 1, { autoAlpha: 1 }) 167 | tl.to(this.ui.foo, 1, { y: 0 }) 168 | tl.to(this.ui.bar, 1, { x: 0 }) 169 | // etc... 170 | tl.restart() 171 | } 172 | ``` 173 | 174 | ### Sections 175 | 176 | This is an example of a section, extending Default: 177 | 178 | ```js 179 | import config from 'config' 180 | import event from 'dom-event' 181 | import Default from './default' 182 | 183 | class Section extends Default { 184 | 185 | constructor(opt) { 186 | 187 | // always call super() 188 | // otherwise Default's code will not run 189 | super(opt) 190 | 191 | // the slug is simply used to add classes to the body, for styling purposes 192 | this.slug = 'section' 193 | 194 | // custom functions of this section that needs to bind 'this' 195 | this.onClick = this.onClick.bind(this) 196 | } 197 | 198 | init(req, done) { 199 | 200 | super.init(req, done) 201 | } 202 | 203 | ready(done) { 204 | 205 | super.ready() 206 | 207 | // now that the dom of your page is ready, you can now add event listeners, initialise components, etc. 208 | // this.addEvents() 209 | 210 | // always call done() at the end of ready 211 | done() 212 | } 213 | 214 | addEvents() { 215 | 216 | event.on(this.page, 'click', this.onClick) 217 | } 218 | 219 | removeEvents() { 220 | 221 | event.off(this.page, 'click', this.onClick) 222 | } 223 | 224 | onClick(e) { 225 | 226 | console.log(e, this) 227 | } 228 | 229 | animateIn(req, done) { 230 | 231 | // 'req' contains the previous route 232 | 233 | classes.add(config.body, `is-${this.slug}`) 234 | 235 | TweenLite.to(this.page, 1, { 236 | y: 0, 237 | autoAlpha: 1, 238 | ease: Expo.easeInOut, 239 | onComplete: done 240 | }) 241 | } 242 | 243 | animateOut(req, done) { 244 | 245 | // 'req' contains the next route 246 | 247 | classes.remove(config.body, `is-${this.slug}`) 248 | 249 | TweenLite.to(this.page, 0.7, { 250 | y: 100, 251 | autoAlpha: 0, 252 | ease: Expo.easeInOut, 253 | clearProps: 'all', 254 | onComplete: done 255 | }) 256 | } 257 | 258 | destroy(req, done) { 259 | 260 | super.destroy() 261 | 262 | // cleanup all event listeners, destroy components, etc... 263 | // this.removeEvents() 264 | 265 | // when you're done, don't forget to remove the page from the dom 266 | this.page.parentNode.removeChild(this.page) 267 | 268 | done() 269 | } 270 | } 271 | 272 | module.exports = Section 273 | ``` 274 | 275 | ### Utils 276 | 277 | > assets/js/utils/array 278 | 279 | - `slice(opt)` 280 | 281 | Returns a new Array from an argument. (usually a `NodeList`) 282 | 283 | ```js 284 | import array from '@utils/array' 285 | 286 | const els = document.querySelectorAll('.el') 287 | const arr = array.slice(els) 288 | 289 | // arr.forEach(...) 290 | ``` 291 | 292 | - `combine(...arrays)` 293 | 294 | Combine multiple arrays into one array. 295 | 296 | ```js 297 | import array from '@utils/array' 298 | const combine = array.combine(["foo"], ["bar", "baz"], [1, 2]) 299 | 300 | // ["foo", "bar", "baz", 1, 2] 301 | ``` 302 | 303 | - `without(arr, ...values)` 304 | 305 | Returns a copy of the array with all instances of the values removed. 306 | 307 | ```js 308 | import array from '@utils/array' 309 | const without = array.without([1, 2, 1, 0, 3, 1, 4], 0, 1) 310 | 311 | // [2, 3, 4] 312 | ``` 313 | 314 | - `min(arr)` 315 | 316 | Returns the minimum value in the array. 317 | 318 | ```js 319 | import array from '@utils/array' 320 | const min = array.min([10, 50, 30]) 321 | 322 | // 10 323 | ``` 324 | 325 | - `max(arr)` 326 | 327 | Returns the maximum value in the array. 328 | 329 | ```js 330 | import array from '@utils/array' 331 | const max = array.max([10, 50, 30]) 332 | 333 | // 50 334 | ``` 335 | 336 | > assets/js/utils/biggie 337 | 338 | - `bind` 339 | 340 | Object with add/remove methods to bind/unbind HTML element with an eventListener. 341 | On click, it will call `framework.go` (from bigwheel) and will use the `href` of the element to resolve a new route -- exept if the element has the css class `no-route` or a `target="_blank" attribute`. 342 | 343 | ```js 344 | import biggie from '@utils/biggie' 345 | 346 | const a = document.querySelectorAll('nav a') 347 | biggie.bind.add(a) 348 | // biggie.bind.remove(a) 349 | ``` 350 | 351 | > assets/js/utils/css 352 | 353 | - `prefixes` 354 | 355 | Object containing vendor prefixes for CSS attributes. 356 | 357 | ```js 358 | import css from '@utils/css' 359 | div.style[css.prefixes.transform] = `translate3d(0,0,0)` 360 | ``` 361 | 362 | - `rect(top, right, bottom, left)` 363 | 364 | Returns the CSS rect string with clip values. 365 | 366 | ```js 367 | import css from '@utils/css' 368 | 369 | const rect = css.rect(0, 300, 10, 0) 370 | div.style.clip = rect 371 | ``` 372 | 373 | > assets/js/utils/dom 374 | 375 | - `each` 376 | 377 | Iterate over a NodeList. 378 | 379 | ```js 380 | import dom from '@utils/dom' 381 | 382 | const divs = document.querySelectorAll('div') 383 | dom.each(divs, (e) => { 384 | console.log(e.index, e.el) 385 | }) 386 | 387 | // or, using ES6 388 | // Spread operator 389 | [...divs].forEach(callback) 390 | 391 | // Array.from() 392 | Array.from(divs).forEach(callback) 393 | 394 | // for...of statement 395 | for (var div of divs) callback(div) 396 | ``` 397 | 398 | - `scroll(opts)` 399 | 400 | Returns either `pageYOffset` or `document.documentElement||document.body.scrollTop`, based on your browser. 401 | 402 | ```js 403 | import dom from '@utils/dom' 404 | const scrollY = dom.scroll('y') 405 | ``` 406 | 407 | > assets/js/utils/func 408 | 409 | - `once(fn)` 410 | 411 | Returns a new function that won't execute more than once. 412 | 413 | ```js 414 | import func from '@utils/func' 415 | 416 | const yo = () => console.log('Yo') 417 | const sayYo = func.once(yo) 418 | 419 | sayYo(); // 'Yo' 420 | sayYo(); // Doesn't execute 421 | ``` 422 | 423 | - `interval(callback, options)` 424 | 425 | Better setInterval using requestAnimationFrame. 426 | 427 | ```js 428 | import func from '@utils/func' 429 | 430 | const options = { delay: 500, duration: 1500 } 431 | func.interval(() => console.log('tick!'), options) // will run 3 times 432 | ``` 433 | 434 | > assets/js/utils/math 435 | 436 | - `clamp(min, value, max)` 437 | 438 | Returns a clamped value between min and max values. 439 | 440 | ```js 441 | import math from '@utils/math' 442 | 443 | const min = 0 444 | const max = 200 445 | const value = e.deltaY 446 | const clamped = math.clamp(0, value, 200) 447 | ``` 448 | 449 | ### Gulp 450 | 451 | We're using gulp to compile all LESS files to a single CSS file, with prefixed properties using [`autoprefixer`](https://github.com/postcss/autoprefixer). 452 | 453 | You can write in ES6 in this project as it uses [`babelify`](https://github.com/babel/babelify), a [`browserify`](https://github.com/substack/node-browserify) transform. 454 | Gulp will create `build/app.js` (for development) and `build/app.min.js` with [`uglify`](https://github.com/terinjokes/gulp-uglify) (for production). 455 | 456 | Using [`watchify`](https://github.com/substack/watchify) and [`browser-sync`](http://www.browsersync.io), your site will be live-reloaded as soon as there's changes made to the JS and/or CSS files. 457 | 458 | ### License 459 | 460 | MIT, see [LICENSE.md](https://github.com/baptistebriel/biggie/blob/gh-pages/LICENSE). 461 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import domselect from 'dom-select' 3 | import biggie from '@utils/biggie' 4 | import { name, version, repository } from '../../package.json' 5 | 6 | class App { 7 | 8 | constructor(opt = {}) { 9 | 10 | console.log(`%c${name}@${version} – ${repository.url}`, 'color: #6a6a6a') 11 | 12 | this.init() 13 | } 14 | 15 | init() { 16 | 17 | this.addEvents() 18 | 19 | framework.init() 20 | } 21 | 22 | addEvents() { 23 | 24 | // biggie.bind.add(domselect.all('nav a')) 25 | } 26 | } 27 | 28 | module.exports = App -------------------------------------------------------------------------------- /assets/js/cache.js: -------------------------------------------------------------------------------- 1 | export default {} -------------------------------------------------------------------------------- /assets/js/config.js: -------------------------------------------------------------------------------- 1 | import domselect from 'dom-select' 2 | 3 | const config = { 4 | 5 | BASE: '/', 6 | 7 | body: document.body, 8 | view: domselect('main'), 9 | 10 | width: window.innerWidth, 11 | height: window.innerHeight 12 | } 13 | 14 | export default config -------------------------------------------------------------------------------- /assets/js/framework.js: -------------------------------------------------------------------------------- 1 | import bigwheel from 'bigwheel' 2 | 3 | /* ---------- 4 | create our framework instance 5 | see https://github.com/bigwheel-framework/documentation/blob/master/quickstart.md#bigwheel-quick-start 6 | ---------- */ 7 | module.exports = bigwheel((done) => { 8 | done({ 9 | // https://github.com/bigwheel-framework/documentation/blob/master/misc.md#overlap 10 | overlap: false, 11 | // https://github.com/bigwheel-framework/documentation/blob/master/routes-special.md#initsection 12 | initSection: require('./sections/preloader'), 13 | routes: require('./routes') 14 | }) 15 | }) -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | import App from './app' 2 | 3 | const app = new App() -------------------------------------------------------------------------------- /assets/js/routes.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | 3 | /* ---------- 4 | all routes needs to be defined inline 5 | see https://github.com/bigwheel-framework/documentation/blob/master/routes-defining.md#as-section-standard-form 6 | ---------- */ 7 | module.exports = { 8 | [`${config.BASE}`]: require('./sections/home'), 9 | [`${config.BASE}home`]: { section: require('./sections/home') }, 10 | [`${config.BASE}about`]: { section: require('./sections/about') }, 11 | [`${config.BASE}section/:id`]: { section: require('./sections/section'), duplicate: true }, 12 | [`${config.BASE}gallery`]: { section: require('./sections/gallery'), duplicate: true, routes: { 13 | '/:id': { section: require('./sections/sub'), duplicate: true } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /assets/js/sections/about.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import Default from './default' 5 | 6 | class About extends Default { 7 | 8 | constructor(opt) { 9 | 10 | super(opt) 11 | 12 | this.slug = 'about' 13 | } 14 | 15 | init(req, done) { 16 | 17 | super.init(req, done) 18 | } 19 | 20 | ready(done) { 21 | 22 | super.ready() 23 | 24 | done() 25 | } 26 | 27 | animateIn(req, done) { 28 | 29 | classes.add(config.body, `is-${this.slug}`) 30 | 31 | TweenLite.to(this.page, 1, { 32 | autoAlpha: 1, 33 | ease: Expo.easeInOut, 34 | onComplete: done 35 | }) 36 | } 37 | 38 | animateOut(req, done) { 39 | 40 | classes.remove(config.body, `is-${this.slug}`) 41 | 42 | TweenLite.to(this.page, 0.7, { 43 | autoAlpha: 0, 44 | ease: Expo.easeInOut, 45 | onComplete: done 46 | }) 47 | } 48 | 49 | destroy(req, done) { 50 | 51 | super.destroy() 52 | 53 | this.page.parentNode.removeChild(this.page) 54 | 55 | done() 56 | } 57 | } 58 | 59 | module.exports = About -------------------------------------------------------------------------------- /assets/js/sections/default.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import utils from 'utils' 4 | import domselect from 'dom-select' 5 | import event from 'dom-event' 6 | import classes from 'dom-classes' 7 | import query from 'query-dom-components' 8 | import biggie from '@utils/biggie' 9 | 10 | class Default { 11 | 12 | constructor(opt = {}) { 13 | 14 | this.view = config.view 15 | this.page = null 16 | this.a = null 17 | } 18 | 19 | init(req, done, options) { 20 | 21 | const opts = options || { cache: true, sub: false } 22 | 23 | const view = this.view 24 | const ready = this.ready.bind(this, done) 25 | const page = this.page = biggie.page(req, view, opts, ready) 26 | } 27 | 28 | ready() { 29 | 30 | this.ui = query({ el: this.page }) 31 | 32 | this.a = domselect.all('a', this.page) 33 | 34 | biggie.bind.add(this.a) 35 | } 36 | 37 | resize(width, height) { 38 | 39 | config.height = height 40 | config.width = width 41 | } 42 | 43 | destroy() { 44 | 45 | biggie.bind.remove(this.a) 46 | 47 | this.a = null 48 | } 49 | } 50 | 51 | module.exports = Default -------------------------------------------------------------------------------- /assets/js/sections/gallery.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import Default from './default' 5 | 6 | class Gallery extends Default { 7 | 8 | constructor(opt) { 9 | 10 | super(opt) 11 | 12 | this.slug = 'gallery' 13 | } 14 | 15 | init(req, done) { 16 | 17 | super.init(req, done, { sub: req.params.id ? true : false }) 18 | } 19 | 20 | ready(done) { 21 | 22 | super.ready() 23 | 24 | done() 25 | } 26 | 27 | animateIn(req, done) { 28 | 29 | classes.add(config.body, `is-${this.slug}`) 30 | 31 | TweenLite.to(this.page, 1, { 32 | autoAlpha: 1, 33 | ease: Expo.easeInOut, 34 | onComplete: done 35 | }); 36 | } 37 | 38 | animateOut(req, done) { 39 | 40 | classes.remove(config.body, `is-${this.slug}`) 41 | 42 | TweenLite.to(this.page, 0.7, { 43 | autoAlpha: 0, 44 | ease: Expo.easeInOut, 45 | clearProps: 'all', 46 | onComplete: done 47 | }) 48 | } 49 | 50 | destroy(req, done) { 51 | 52 | super.destroy() 53 | 54 | this.page.parentNode.removeChild(this.page) 55 | 56 | done() 57 | } 58 | } 59 | 60 | module.exports = Gallery -------------------------------------------------------------------------------- /assets/js/sections/home.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import Default from './default' 5 | 6 | class Home extends Default { 7 | 8 | constructor(opt) { 9 | 10 | super(opt) 11 | 12 | this.slug = 'home' 13 | this.ui = null 14 | } 15 | 16 | init(req, done) { 17 | 18 | super.init(req, done) 19 | } 20 | 21 | ready(done) { 22 | 23 | super.ready() 24 | 25 | done() 26 | } 27 | 28 | animateIn(req, done) { 29 | 30 | classes.add(config.body, `is-${this.slug}`) 31 | 32 | TweenLite.to(this.page, 1, { 33 | autoAlpha: 1, 34 | ease: Expo.easeInOut, 35 | onComplete: done 36 | }) 37 | } 38 | 39 | animateOut(req, done) { 40 | 41 | classes.remove(config.body, `is-${this.slug}`) 42 | 43 | TweenLite.to(this.page, 0.7, { 44 | autoAlpha: 0, 45 | ease: Expo.easeInOut, 46 | onComplete: done 47 | }) 48 | } 49 | 50 | destroy(req, done) { 51 | 52 | super.destroy() 53 | 54 | this.ui = null 55 | 56 | this.page.parentNode.removeChild(this.page) 57 | 58 | done() 59 | } 60 | } 61 | 62 | module.exports = Home -------------------------------------------------------------------------------- /assets/js/sections/preloader.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import sniffer from 'sniffer' 3 | import classes from 'dom-classes' 4 | import create from 'dom-create-element' 5 | import gsap from 'gsap' 6 | 7 | TweenLite.defaultEase = Expo.easeOut 8 | 9 | class Preloader { 10 | 11 | constructor(onComplete) { 12 | 13 | this.preloaded = onComplete 14 | this.view = config.view 15 | this.el = null 16 | } 17 | 18 | init(req, done) { 19 | 20 | classes.add(config.body, 'is-loading') 21 | 22 | config.infos = sniffer.getInfos() 23 | 24 | this.createDOM() 25 | 26 | done() 27 | } 28 | 29 | createDOM() { 30 | 31 | const page = this.view.firstChild 32 | 33 | this.el = create({ 34 | selector: 'div', 35 | styles: 'preloader', 36 | html: ` 37 |
38 |
39 |

Preloader

40 |
41 |
42 | ` 43 | }) 44 | 45 | this.view.insertBefore(this.el, page) 46 | } 47 | 48 | resize(width, height) { 49 | 50 | config.width = width 51 | config.height = height 52 | } 53 | 54 | animateIn(req, done) { 55 | 56 | const tl = new TimelineMax({ paused: true, onComplete: () => { 57 | done() 58 | // call this.preloaded to bring the first route 59 | this.preloaded() 60 | }}) 61 | tl.to(this.el, 1, {autoAlpha: 1}) 62 | tl.restart() 63 | } 64 | 65 | animateOut(req, done) { 66 | 67 | const tl = new TimelineMax({ paused: true, onComplete: done }) 68 | tl.to(this.el, 1, {autoAlpha: 0}) 69 | tl.restart() 70 | } 71 | 72 | destroy(req, done) { 73 | 74 | classes.add(config.body, 'is-loaded') 75 | classes.remove(config.body, 'is-loading') 76 | 77 | this.view.removeChild(this.el) 78 | 79 | done() 80 | } 81 | } 82 | 83 | module.exports = Preloader -------------------------------------------------------------------------------- /assets/js/sections/section.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import Default from './default' 5 | 6 | class Section extends Default { 7 | 8 | constructor(opt) { 9 | 10 | super(opt) 11 | 12 | this.slug = 'section' 13 | } 14 | 15 | init(req, done) { 16 | 17 | super.init(req, done) 18 | } 19 | 20 | ready(done) { 21 | 22 | super.ready() 23 | 24 | done() 25 | } 26 | 27 | animateIn(req, done) { 28 | 29 | classes.add(config.body, `is-${this.slug}`) 30 | 31 | TweenLite.to(this.page, 1, { 32 | autoAlpha: 1, 33 | ease: Expo.easeInOut, 34 | onComplete: done 35 | }) 36 | } 37 | 38 | animateOut(req, done) { 39 | 40 | classes.remove(config.body, `is-${this.slug}`) 41 | 42 | TweenLite.to(this.page, 0.7, { 43 | autoAlpha: 0, 44 | ease: Expo.easeInOut, 45 | clearProps: 'all', 46 | onComplete: done 47 | }) 48 | } 49 | 50 | destroy(req, done) { 51 | 52 | super.destroy() 53 | 54 | this.page.parentNode.removeChild(this.page) 55 | 56 | done() 57 | } 58 | } 59 | 60 | module.exports = Section -------------------------------------------------------------------------------- /assets/js/sections/sub.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import classes from 'dom-classes'; 4 | import create from 'dom-create-element' 5 | import query from 'query-dom-components' 6 | 7 | class Sub { 8 | 9 | constructor(opt = {}) { 10 | 11 | this.view = config.view 12 | this.slug = null 13 | this.el = null 14 | this.ui = null 15 | this.a = null 16 | } 17 | 18 | init(req, done) { 19 | 20 | const id = req.params.id 21 | const view = this.view 22 | const slug = this.slug = `sub-${id}` 23 | 24 | const template = ` 25 |
26 |
27 | Gallery ${id} 28 |
29 |
30 | ` 31 | 32 | this.el = create({ 33 | selector: 'div', 34 | styles: `sub-item ${this.slug}`, 35 | html: template 36 | }) 37 | 38 | this.view.appendChild(this.el) 39 | 40 | this.ui = query({ el: this.el }) 41 | 42 | done() 43 | } 44 | 45 | animateIn(req, done) { 46 | 47 | classes.add(config.body, `is-${this.slug}`) 48 | 49 | this.el.style.display = 'block' 50 | 51 | const tl = new TimelineMax({ paused: true }) 52 | tl.to(this.el, 1, { x: 0, ease: Expo.easeInOut }); 53 | tl.restart() 54 | 55 | done() 56 | } 57 | 58 | animateOut(req, done) { 59 | 60 | classes.remove(config.body, `is-${this.slug}`) 61 | 62 | const tl = new TimelineMax({ paused: true, onComplete: done }) 63 | this.el && tl.to(this.el, 0.7, { x: '100%', ease: Expo.easeInOut, clearProps: 'all' }) 64 | tl.restart() 65 | } 66 | 67 | resize(width, height) {} 68 | 69 | destroy(req, done) { 70 | 71 | this.el.parentNode.removeChild(this.el) 72 | this.el = null 73 | 74 | done() 75 | } 76 | } 77 | 78 | module.exports = Sub -------------------------------------------------------------------------------- /assets/js/utils/array/combine.js: -------------------------------------------------------------------------------- 1 | export default (...arrays) => { 2 | 3 | return [].concat(...arrays) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/array/index.js: -------------------------------------------------------------------------------- 1 | import min from './min' 2 | import max from './max' 3 | import slice from './slice' 4 | import combine from './combine' 5 | import without from './without' 6 | 7 | export default { 8 | min: min, 9 | max: max, 10 | slice: slice, 11 | combine: combine, 12 | without: without 13 | } -------------------------------------------------------------------------------- /assets/js/utils/array/max.js: -------------------------------------------------------------------------------- 1 | export default (arr) => { 2 | 3 | return Math.max(...arr) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/array/min.js: -------------------------------------------------------------------------------- 1 | export default (arr) => { 2 | 3 | return Math.min(...arr) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/array/slice.js: -------------------------------------------------------------------------------- 1 | export default (opt) => { 2 | 3 | return Array.prototype.slice.call(opt, 0) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/array/without.js: -------------------------------------------------------------------------------- 1 | export default (arr, ...values) => { 2 | 3 | return arr.filter(el => !values.some(exclude => el === exclude)) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/biggie/bind.js: -------------------------------------------------------------------------------- 1 | import slice from '../array/slice' 2 | import route from './route' 3 | 4 | export default { 5 | 6 | add: (a) => { 7 | 8 | slice(a).forEach((el) => el.onclick = route) 9 | }, 10 | 11 | remove: (a) => { 12 | 13 | slice(a).forEach((el) => el.onclick = null) 14 | } 15 | } -------------------------------------------------------------------------------- /assets/js/utils/biggie/index.js: -------------------------------------------------------------------------------- 1 | import bind from './bind' 2 | import route from './route' 3 | import slug from './slug' 4 | import page from './page' 5 | 6 | export default { 7 | bind: bind, 8 | route: route, 9 | slug: slug, 10 | page: page 11 | } -------------------------------------------------------------------------------- /assets/js/utils/biggie/page.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import cache from 'cache' 3 | import ajax from 'please-ajax' 4 | import create from 'dom-create-element' 5 | import slug from './slug' 6 | 7 | export default (req, view, options, done) => { 8 | 9 | const id = slug(req, options) 10 | const cn = id.replace('/', '-') 11 | const page = create({ selector: 'div', id: `page-${cn}`, styles: `page page-${cn}` }) 12 | 13 | view.appendChild(page) 14 | 15 | if(!cache[id] || !options.cache) { 16 | 17 | ajax.get(`${config.BASE}templates/${id}.html`, { 18 | success: (object) => { 19 | const html = object.data 20 | page.innerHTML = html 21 | if(options.cache) cache[id] = html 22 | done() 23 | } 24 | }) 25 | 26 | } else { 27 | 28 | setTimeout(() => { 29 | page.innerHTML = cache[id] 30 | done() 31 | }, 1) 32 | } 33 | 34 | return page 35 | } -------------------------------------------------------------------------------- /assets/js/utils/biggie/route.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import classes from 'dom-classes' 3 | 4 | export default (e) => { 5 | 6 | const target = e.currentTarget 7 | 8 | if(classes.has(target, 'no-route') || (target.hasAttribute('target') && target.getAttribute('target') == '_blank')) return 9 | 10 | e.preventDefault() 11 | 12 | framework.go(target.getAttribute('href')) 13 | } -------------------------------------------------------------------------------- /assets/js/utils/biggie/slug.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | 3 | export default (req, options) => { 4 | 5 | const params = Object.keys(req.params).length === 0 && JSON.stringify(req.params) === JSON.stringify({}) 6 | let route = req.route === config.BASE ? '/home' : req.route 7 | 8 | if(!params) { 9 | 10 | for (var key in req.params) { 11 | if (req.params.hasOwnProperty(key)) { 12 | 13 | if(route.indexOf(key) > -1) { 14 | route = route.replace(`:${key}`, options.sub ? '' : req.params[key]) 15 | } 16 | } 17 | } 18 | } 19 | 20 | if(route.substring(route.length-1) == '/') { 21 | route = route.slice(0, -1) 22 | } 23 | 24 | return route.substr(1) 25 | } -------------------------------------------------------------------------------- /assets/js/utils/css/index.js: -------------------------------------------------------------------------------- 1 | import prefixes from './prefixes' 2 | import rect from './rect' 3 | 4 | export default { 5 | prefixes: prefixes, 6 | rect: rect 7 | } -------------------------------------------------------------------------------- /assets/js/utils/css/prefixes.js: -------------------------------------------------------------------------------- 1 | import prefix from 'prefix' 2 | 3 | export default { 4 | transform: prefix('transform'), 5 | transition: prefix('transition') 6 | } -------------------------------------------------------------------------------- /assets/js/utils/css/rect.js: -------------------------------------------------------------------------------- 1 | export default (right, bottom, left=0, top=0) => { 2 | 3 | return `rect(${top}px, ${right}px, ${bottom}px, ${left}px)` 4 | } -------------------------------------------------------------------------------- /assets/js/utils/dom/each.js: -------------------------------------------------------------------------------- 1 | export default (nodelist, callback) => { 2 | 3 | let i = -1 4 | const l = nodelist.length 5 | 6 | while (++i < l) 7 | callback({ el: nodelist.item(i), index: i }) 8 | } -------------------------------------------------------------------------------- /assets/js/utils/dom/index.js: -------------------------------------------------------------------------------- 1 | import each from './each' 2 | import scroll from './scroll' 3 | 4 | export default { 5 | each: each, 6 | scroll: scroll 7 | } -------------------------------------------------------------------------------- /assets/js/utils/dom/scroll.js: -------------------------------------------------------------------------------- 1 | export default (opts) => { 2 | 3 | if(opts === 'y') { 4 | if (window.pageYOffset) return window.pageYOffset 5 | return document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop 6 | } else { 7 | if (window.pageXOffset) return window.pageXOffset 8 | return document.documentElement.clientWidth ? document.documentElement.scrollLeft : document.body.scrollLeft 9 | } 10 | } -------------------------------------------------------------------------------- /assets/js/utils/func/index.js: -------------------------------------------------------------------------------- 1 | import once from './once' 2 | import interval from './interval' 3 | 4 | export default { 5 | once: once, 6 | interval: interval 7 | } -------------------------------------------------------------------------------- /assets/js/utils/func/interval.js: -------------------------------------------------------------------------------- 1 | export default (callback, opts = { delay: 500, duration: 1500 }) => { 2 | 3 | let rAF, start, loop 4 | 5 | const tick = now => { 6 | 7 | if (now - loop >= opts.delay) { 8 | loop = now 9 | callback() 10 | } 11 | 12 | if (now - start < opts.duration) { 13 | rAF = requestAnimationFrame(tick) 14 | } else { 15 | cancelAnimationFrame(rAF) 16 | } 17 | } 18 | 19 | start = loop = performance.now() 20 | rAF = requestAnimationFrame(tick) 21 | } -------------------------------------------------------------------------------- /assets/js/utils/func/once.js: -------------------------------------------------------------------------------- 1 | export default (fn) => { 2 | 3 | let done = false 4 | 5 | return (...args) => { 6 | if (done) return 7 | done = true 8 | fn(...args) 9 | } 10 | } -------------------------------------------------------------------------------- /assets/js/utils/index.js: -------------------------------------------------------------------------------- 1 | import array from './array' 2 | import biggie from './biggie' 3 | import css from './css' 4 | import dom from './dom' 5 | import func from './func' 6 | import math from './math' 7 | 8 | export default { 9 | array: array, 10 | biggie: biggie, 11 | css: css, 12 | dom: dom, 13 | func: func, 14 | math: math 15 | } -------------------------------------------------------------------------------- /assets/js/utils/math/clamp.js: -------------------------------------------------------------------------------- 1 | export default (min, value, max) => { 2 | 3 | return Math.max(min, Math.min(value, max)) 4 | } -------------------------------------------------------------------------------- /assets/js/utils/math/index.js: -------------------------------------------------------------------------------- 1 | import clamp from './clamp' 2 | 3 | export default { 4 | clamp: clamp 5 | } -------------------------------------------------------------------------------- /assets/less/import/_flexbox.less: -------------------------------------------------------------------------------- 1 | .container-fluid, 2 | .container { 3 | margin-right: auto; 4 | margin-left: auto; 5 | } 6 | 7 | .container-fluid { 8 | padding-right: 2rem; 9 | padding-left: 2rem; 10 | } 11 | 12 | .row { 13 | box-sizing: border-box; 14 | display: -webkit-box; 15 | display: -webkit-flex; 16 | display: -ms-flexbox; 17 | display: flex; 18 | -webkit-box-flex: 0; 19 | -webkit-flex: 0 1 auto; 20 | -ms-flex: 0 1 auto; 21 | flex: 0 1 auto; 22 | -webkit-box-orient: horizontal; 23 | -webkit-box-direction: normal; 24 | -webkit-flex-direction: row; 25 | -ms-flex-direction: row; 26 | flex-direction: row; 27 | -webkit-flex-wrap: wrap; 28 | -ms-flex-wrap: wrap; 29 | flex-wrap: wrap; 30 | } 31 | 32 | .row.reverse { 33 | &:not(.reverse--not-m) { 34 | -webkit-box-orient: horizontal; 35 | -webkit-box-direction: reverse; 36 | -webkit-flex-direction: row-reverse; 37 | -ms-flex-direction: row-reverse; 38 | flex-direction: row-reverse; 39 | } 40 | 41 | @include breakpoint(medium) { 42 | &--not-m { 43 | -webkit-box-orient: horizontal; 44 | -webkit-box-direction: reverse; 45 | -webkit-flex-direction: row-reverse; 46 | -ms-flex-direction: row-reverse; 47 | flex-direction: row-reverse; 48 | } 49 | } 50 | } 51 | 52 | .col.reverse { 53 | -webkit-box-orient: vertical; 54 | -webkit-box-direction: reverse; 55 | -webkit-flex-direction: column-reverse; 56 | -ms-flex-direction: column-reverse; 57 | flex-direction: column-reverse; 58 | } 59 | 60 | .col-xs, 61 | .col-xs-1, 62 | .col-xs-2, 63 | .col-xs-3, 64 | .col-xs-4, 65 | .col-xs-5, 66 | .col-xs-6, 67 | .col-xs-7, 68 | .col-xs-8, 69 | .col-xs-9, 70 | .col-xs-10, 71 | .col-xs-11, 72 | .col-xs-12, 73 | .col-xs-offset-0, 74 | .col-xs-offset-1, 75 | .col-xs-offset-2, 76 | .col-xs-offset-3, 77 | .col-xs-offset-4, 78 | .col-xs-offset-5, 79 | .col-xs-offset-6, 80 | .col-xs-offset-7, 81 | .col-xs-offset-8, 82 | .col-xs-offset-9, 83 | .col-xs-offset-10, 84 | .col-xs-offset-11, 85 | .col-xs-offset-12 { 86 | box-sizing: border-box; 87 | -webkit-box-flex: 0; 88 | -webkit-flex: 0 0 auto; 89 | -ms-flex: 0 0 auto; 90 | flex: 0 0 auto; 91 | } 92 | 93 | .col-xs { 94 | -webkit-box-flex: 1; 95 | -webkit-flex-grow: 1; 96 | -ms-flex-positive: 1; 97 | flex-grow: 1; 98 | -webkit-flex-basis: 0; 99 | -ms-flex-preferred-size: 0; 100 | flex-basis: 0; 101 | max-width: 100%; 102 | } 103 | 104 | .col-xs-1 { 105 | -webkit-flex-basis: 8.333%; 106 | -ms-flex-preferred-size: 8.333%; 107 | flex-basis: 8.333%; 108 | max-width: 8.333%; 109 | } 110 | 111 | .col-xs-2 { 112 | -webkit-flex-basis: 16.666%; 113 | -ms-flex-preferred-size: 16.666%; 114 | flex-basis: 16.666%; 115 | max-width: 16.666%; 116 | } 117 | 118 | .col-xs-3 { 119 | -webkit-flex-basis: 25%; 120 | -ms-flex-preferred-size: 25%; 121 | flex-basis: 25%; 122 | max-width: 25%; 123 | } 124 | 125 | .col-xs-4 { 126 | -webkit-flex-basis: 33.333%; 127 | -ms-flex-preferred-size: 33.333%; 128 | flex-basis: 33.333%; 129 | max-width: 33.333%; 130 | } 131 | 132 | .col-xs-5 { 133 | -webkit-flex-basis: 41.667%; 134 | -ms-flex-preferred-size: 41.667%; 135 | flex-basis: 41.667%; 136 | max-width: 41.667%; 137 | } 138 | 139 | .col-xs-6 { 140 | -webkit-flex-basis: 50%; 141 | -ms-flex-preferred-size: 50%; 142 | flex-basis: 50%; 143 | max-width: 50%; 144 | } 145 | 146 | .col-xs-7 { 147 | -webkit-flex-basis: 58.333%; 148 | -ms-flex-preferred-size: 58.333%; 149 | flex-basis: 58.333%; 150 | max-width: 58.333%; 151 | } 152 | 153 | .col-xs-8 { 154 | -webkit-flex-basis: 66.667%; 155 | -ms-flex-preferred-size: 66.667%; 156 | flex-basis: 66.667%; 157 | max-width: 66.667%; 158 | } 159 | 160 | .col-xs-9 { 161 | -webkit-flex-basis: 75%; 162 | -ms-flex-preferred-size: 75%; 163 | flex-basis: 75%; 164 | max-width: 75%; 165 | } 166 | 167 | .col-xs-10 { 168 | -webkit-flex-basis: 83.333%; 169 | -ms-flex-preferred-size: 83.333%; 170 | flex-basis: 83.333%; 171 | max-width: 83.333%; 172 | } 173 | 174 | .col-xs-11 { 175 | -webkit-flex-basis: 91.667%; 176 | -ms-flex-preferred-size: 91.667%; 177 | flex-basis: 91.667%; 178 | max-width: 91.667%; 179 | } 180 | 181 | .col-xs-12 { 182 | -webkit-flex-basis: 100%; 183 | -ms-flex-preferred-size: 100%; 184 | flex-basis: 100%; 185 | max-width: 100%; 186 | } 187 | 188 | .col-xs-offset-0 { 189 | margin-left: 0; 190 | } 191 | 192 | .col-xs-offset-1 { 193 | margin-left: 8.333%; 194 | } 195 | 196 | .col-xs-offset-2 { 197 | margin-left: 16.666%; 198 | } 199 | 200 | .col-xs-offset-3 { 201 | margin-left: 25%; 202 | } 203 | 204 | .col-xs-offset-4 { 205 | margin-left: 33.333%; 206 | } 207 | 208 | .col-xs-offset-5 { 209 | margin-left: 41.667%; 210 | } 211 | 212 | .col-xs-offset-6 { 213 | margin-left: 50%; 214 | } 215 | 216 | .col-xs-offset-7 { 217 | margin-left: 58.333%; 218 | } 219 | 220 | .col-xs-offset-8 { 221 | margin-left: 66.667%; 222 | } 223 | 224 | .col-xs-offset-9 { 225 | margin-left: 75%; 226 | } 227 | 228 | .col-xs-offset-10 { 229 | margin-left: 83.333%; 230 | } 231 | 232 | .col-xs-offset-11 { 233 | margin-left: 91.667%; 234 | } 235 | 236 | .start-xs { 237 | -webkit-box-pack: start; 238 | -webkit-justify-content: flex-start; 239 | -ms-flex-pack: start; 240 | justify-content: flex-start; 241 | text-align: start; 242 | } 243 | 244 | .center-xs { 245 | -webkit-box-pack: center; 246 | -webkit-justify-content: center; 247 | -ms-flex-pack: center; 248 | justify-content: center; 249 | text-align: center; 250 | } 251 | 252 | .end-xs { 253 | -webkit-box-pack: end; 254 | -webkit-justify-content: flex-end; 255 | -ms-flex-pack: end; 256 | justify-content: flex-end; 257 | text-align: end; 258 | } 259 | 260 | .top-xs { 261 | -webkit-box-align: start; 262 | -webkit-align-items: flex-start; 263 | -ms-flex-align: start; 264 | align-items: flex-start; 265 | } 266 | 267 | .middle-xs { 268 | -webkit-box-align: center; 269 | -webkit-align-items: center; 270 | -ms-flex-align: center; 271 | align-items: center; 272 | } 273 | 274 | .bottom-xs { 275 | -webkit-box-align: end; 276 | -webkit-align-items: flex-end; 277 | -ms-flex-align: end; 278 | align-items: flex-end; 279 | } 280 | 281 | .around-xs { 282 | -webkit-justify-content: space-around; 283 | -ms-flex-pack: distribute; 284 | justify-content: space-around; 285 | } 286 | 287 | .between-xs { 288 | -webkit-box-pack: justify; 289 | -webkit-justify-content: space-between; 290 | -ms-flex-pack: justify; 291 | justify-content: space-between; 292 | } 293 | 294 | .first-xs { 295 | -webkit-box-ordinal-group: 0; 296 | -webkit-order: -1; 297 | -ms-flex-order: -1; 298 | order: -1; 299 | } 300 | 301 | .last-xs { 302 | -webkit-box-ordinal-group: 2; 303 | -webkit-order: 1; 304 | -ms-flex-order: 1; 305 | order: 1; 306 | } 307 | 308 | @media @mobile { // @media only screen and (min-width: 48em) 309 | 310 | .not-mobile { 311 | display: none; 312 | } 313 | 314 | .container { 315 | width: 49rem; 316 | } 317 | 318 | .col-sm, 319 | .col-sm-1, 320 | .col-sm-2, 321 | .col-sm-3, 322 | .col-sm-4, 323 | .col-sm-5, 324 | .col-sm-6, 325 | .col-sm-7, 326 | .col-sm-8, 327 | .col-sm-9, 328 | .col-sm-10, 329 | .col-sm-11, 330 | .col-sm-12, 331 | .col-sm-offset-0, 332 | .col-sm-offset-1, 333 | .col-sm-offset-2, 334 | .col-sm-offset-3, 335 | .col-sm-offset-4, 336 | .col-sm-offset-5, 337 | .col-sm-offset-6, 338 | .col-sm-offset-7, 339 | .col-sm-offset-8, 340 | .col-sm-offset-9, 341 | .col-sm-offset-10, 342 | .col-sm-offset-11, 343 | .col-sm-offset-12 { 344 | box-sizing: border-box; 345 | -webkit-box-flex: 0; 346 | -webkit-flex: 0 0 auto; 347 | -ms-flex: 0 0 auto; 348 | flex: 0 0 auto; 349 | } 350 | 351 | .col-sm { 352 | -webkit-box-flex: 1; 353 | -webkit-flex-grow: 1; 354 | -ms-flex-positive: 1; 355 | flex-grow: 1; 356 | -webkit-flex-basis: 0; 357 | -ms-flex-preferred-size: 0; 358 | flex-basis: 0; 359 | max-width: 100%; 360 | } 361 | 362 | .col-sm-1 { 363 | -webkit-flex-basis: 8.333%; 364 | -ms-flex-preferred-size: 8.333%; 365 | flex-basis: 8.333%; 366 | max-width: 8.333%; 367 | } 368 | 369 | .col-sm-2 { 370 | -webkit-flex-basis: 16.666%; 371 | -ms-flex-preferred-size: 16.666%; 372 | flex-basis: 16.666%; 373 | max-width: 16.666%; 374 | } 375 | 376 | .col-sm-3 { 377 | -webkit-flex-basis: 25%; 378 | -ms-flex-preferred-size: 25%; 379 | flex-basis: 25%; 380 | max-width: 25%; 381 | } 382 | 383 | .col-sm-4 { 384 | -webkit-flex-basis: 33.333%; 385 | -ms-flex-preferred-size: 33.333%; 386 | flex-basis: 33.333%; 387 | max-width: 33.333%; 388 | } 389 | 390 | .col-sm-5 { 391 | -webkit-flex-basis: 41.667%; 392 | -ms-flex-preferred-size: 41.667%; 393 | flex-basis: 41.667%; 394 | max-width: 41.667%; 395 | } 396 | 397 | .col-sm-6 { 398 | -webkit-flex-basis: 50%; 399 | -ms-flex-preferred-size: 50%; 400 | flex-basis: 50%; 401 | max-width: 50%; 402 | } 403 | 404 | .col-sm-7 { 405 | -webkit-flex-basis: 58.333%; 406 | -ms-flex-preferred-size: 58.333%; 407 | flex-basis: 58.333%; 408 | max-width: 58.333%; 409 | } 410 | 411 | .col-sm-8 { 412 | -webkit-flex-basis: 66.667%; 413 | -ms-flex-preferred-size: 66.667%; 414 | flex-basis: 66.667%; 415 | max-width: 66.667%; 416 | } 417 | 418 | .col-sm-9 { 419 | -webkit-flex-basis: 75%; 420 | -ms-flex-preferred-size: 75%; 421 | flex-basis: 75%; 422 | max-width: 75%; 423 | } 424 | 425 | .col-sm-10 { 426 | -webkit-flex-basis: 83.333%; 427 | -ms-flex-preferred-size: 83.333%; 428 | flex-basis: 83.333%; 429 | max-width: 83.333%; 430 | } 431 | 432 | .col-sm-11 { 433 | -webkit-flex-basis: 91.667%; 434 | -ms-flex-preferred-size: 91.667%; 435 | flex-basis: 91.667%; 436 | max-width: 91.667%; 437 | } 438 | 439 | .col-sm-12 { 440 | -webkit-flex-basis: 100%; 441 | -ms-flex-preferred-size: 100%; 442 | flex-basis: 100%; 443 | max-width: 100%; 444 | } 445 | 446 | .col-sm-offset-0 { 447 | margin-left: 0; 448 | } 449 | 450 | .col-sm-offset-1 { 451 | margin-left: 8.333%; 452 | } 453 | 454 | .col-sm-offset-2 { 455 | margin-left: 16.666%; 456 | } 457 | 458 | .col-sm-offset-3 { 459 | margin-left: 25%; 460 | } 461 | 462 | .col-sm-offset-4 { 463 | margin-left: 33.333%; 464 | } 465 | 466 | .col-sm-offset-5 { 467 | margin-left: 41.667%; 468 | } 469 | 470 | .col-sm-offset-6 { 471 | margin-left: 50%; 472 | } 473 | 474 | .col-sm-offset-7 { 475 | margin-left: 58.333%; 476 | } 477 | 478 | .col-sm-offset-8 { 479 | margin-left: 66.667%; 480 | } 481 | 482 | .col-sm-offset-9 { 483 | margin-left: 75%; 484 | } 485 | 486 | .col-sm-offset-10 { 487 | margin-left: 83.333%; 488 | } 489 | 490 | .col-sm-offset-11 { 491 | margin-left: 91.667%; 492 | } 493 | 494 | .start-sm { 495 | -webkit-box-pack: start; 496 | -webkit-justify-content: flex-start; 497 | -ms-flex-pack: start; 498 | justify-content: flex-start; 499 | text-align: start; 500 | } 501 | 502 | .center-sm { 503 | -webkit-box-pack: center; 504 | -webkit-justify-content: center; 505 | -ms-flex-pack: center; 506 | justify-content: center; 507 | text-align: center; 508 | } 509 | 510 | .end-sm { 511 | -webkit-box-pack: end; 512 | -webkit-justify-content: flex-end; 513 | -ms-flex-pack: end; 514 | justify-content: flex-end; 515 | text-align: end; 516 | } 517 | 518 | .top-sm { 519 | -webkit-box-align: start; 520 | -webkit-align-items: flex-start; 521 | -ms-flex-align: start; 522 | align-items: flex-start; 523 | } 524 | 525 | .middle-sm { 526 | -webkit-box-align: center; 527 | -webkit-align-items: center; 528 | -ms-flex-align: center; 529 | align-items: center; 530 | } 531 | 532 | .bottom-sm { 533 | -webkit-box-align: end; 534 | -webkit-align-items: flex-end; 535 | -ms-flex-align: end; 536 | align-items: flex-end; 537 | } 538 | 539 | .around-sm { 540 | -webkit-justify-content: space-around; 541 | -ms-flex-pack: distribute; 542 | justify-content: space-around; 543 | } 544 | 545 | .between-sm { 546 | -webkit-box-pack: justify; 547 | -webkit-justify-content: space-between; 548 | -ms-flex-pack: justify; 549 | justify-content: space-between; 550 | } 551 | 552 | .first-sm { 553 | -webkit-box-ordinal-group: 0; 554 | -webkit-order: -1; 555 | -ms-flex-order: -1; 556 | order: -1; 557 | } 558 | 559 | .last-sm { 560 | -webkit-box-ordinal-group: 2; 561 | -webkit-order: 1; 562 | -ms-flex-order: 1; 563 | order: 1; 564 | } 565 | } 566 | 567 | @media @tablet { // @media only screen and (min-width: 64em) 568 | 569 | .not-tablet { 570 | display: none; 571 | } 572 | 573 | .container { 574 | width: 65rem; 575 | } 576 | 577 | .col-md, 578 | .col-md-1, 579 | .col-md-2, 580 | .col-md-3, 581 | .col-md-4, 582 | .col-md-5, 583 | .col-md-6, 584 | .col-md-7, 585 | .col-md-8, 586 | .col-md-9, 587 | .col-md-10, 588 | .col-md-11, 589 | .col-md-12, 590 | .col-md-offset-0, 591 | .col-md-offset-1, 592 | .col-md-offset-2, 593 | .col-md-offset-3, 594 | .col-md-offset-4, 595 | .col-md-offset-5, 596 | .col-md-offset-6, 597 | .col-md-offset-7, 598 | .col-md-offset-8, 599 | .col-md-offset-9, 600 | .col-md-offset-10, 601 | .col-md-offset-11, 602 | .col-md-offset-12 { 603 | box-sizing: border-box; 604 | -webkit-box-flex: 0; 605 | -webkit-flex: 0 0 auto; 606 | -ms-flex: 0 0 auto; 607 | flex: 0 0 auto; 608 | } 609 | 610 | .col-md { 611 | -webkit-box-flex: 1; 612 | -webkit-flex-grow: 1; 613 | -ms-flex-positive: 1; 614 | flex-grow: 1; 615 | -webkit-flex-basis: 0; 616 | -ms-flex-preferred-size: 0; 617 | flex-basis: 0; 618 | max-width: 100%; 619 | } 620 | 621 | .col-md-1 { 622 | -webkit-flex-basis: 8.333%; 623 | -ms-flex-preferred-size: 8.333%; 624 | flex-basis: 8.333%; 625 | max-width: 8.333%; 626 | } 627 | 628 | .col-md-2 { 629 | -webkit-flex-basis: 16.666%; 630 | -ms-flex-preferred-size: 16.666%; 631 | flex-basis: 16.666%; 632 | max-width: 16.666%; 633 | } 634 | 635 | .col-md-3 { 636 | -webkit-flex-basis: 25%; 637 | -ms-flex-preferred-size: 25%; 638 | flex-basis: 25%; 639 | max-width: 25%; 640 | } 641 | 642 | .col-md-4 { 643 | -webkit-flex-basis: 33.333%; 644 | -ms-flex-preferred-size: 33.333%; 645 | flex-basis: 33.333%; 646 | max-width: 33.333%; 647 | } 648 | 649 | .col-md-5 { 650 | -webkit-flex-basis: 41.667%; 651 | -ms-flex-preferred-size: 41.667%; 652 | flex-basis: 41.667%; 653 | max-width: 41.667%; 654 | } 655 | 656 | .col-md-6 { 657 | -webkit-flex-basis: 50%; 658 | -ms-flex-preferred-size: 50%; 659 | flex-basis: 50%; 660 | max-width: 50%; 661 | } 662 | 663 | .col-md-7 { 664 | -webkit-flex-basis: 58.333%; 665 | -ms-flex-preferred-size: 58.333%; 666 | flex-basis: 58.333%; 667 | max-width: 58.333%; 668 | } 669 | 670 | .col-md-8 { 671 | -webkit-flex-basis: 66.667%; 672 | -ms-flex-preferred-size: 66.667%; 673 | flex-basis: 66.667%; 674 | max-width: 66.667%; 675 | } 676 | 677 | .col-md-9 { 678 | -webkit-flex-basis: 75%; 679 | -ms-flex-preferred-size: 75%; 680 | flex-basis: 75%; 681 | max-width: 75%; 682 | } 683 | 684 | .col-md-10 { 685 | -webkit-flex-basis: 83.333%; 686 | -ms-flex-preferred-size: 83.333%; 687 | flex-basis: 83.333%; 688 | max-width: 83.333%; 689 | } 690 | 691 | .col-md-11 { 692 | -webkit-flex-basis: 91.667%; 693 | -ms-flex-preferred-size: 91.667%; 694 | flex-basis: 91.667%; 695 | max-width: 91.667%; 696 | } 697 | 698 | .col-md-12 { 699 | -webkit-flex-basis: 100%; 700 | -ms-flex-preferred-size: 100%; 701 | flex-basis: 100%; 702 | max-width: 100%; 703 | } 704 | 705 | .col-md-auto { 706 | -webkit-flex-basis: auto; 707 | -ms-flex-preferred-size: auto; 708 | flex-basis: auto; 709 | max-width: auto; 710 | } 711 | 712 | .col-md-offset-0 { 713 | margin-left: 0; 714 | } 715 | 716 | .col-md-offset-1 { 717 | margin-left: 8.333%; 718 | } 719 | 720 | .col-md-offset-2 { 721 | margin-left: 16.666%; 722 | } 723 | 724 | .col-md-offset-3 { 725 | margin-left: 25%; 726 | } 727 | 728 | .col-md-offset-4 { 729 | margin-left: 33.333%; 730 | } 731 | 732 | .col-md-offset-5 { 733 | margin-left: 41.667%; 734 | } 735 | 736 | .col-md-offset-6 { 737 | margin-left: 50%; 738 | } 739 | 740 | .col-md-offset-7 { 741 | margin-left: 58.333%; 742 | } 743 | 744 | .col-md-offset-8 { 745 | margin-left: 66.667%; 746 | } 747 | 748 | .col-md-offset-9 { 749 | margin-left: 75%; 750 | } 751 | 752 | .col-md-offset-10 { 753 | margin-left: 83.333%; 754 | } 755 | 756 | .col-md-offset-11 { 757 | margin-left: 91.667%; 758 | } 759 | 760 | .start-md { 761 | -webkit-box-pack: start; 762 | -webkit-justify-content: flex-start; 763 | -ms-flex-pack: start; 764 | justify-content: flex-start; 765 | text-align: start; 766 | } 767 | 768 | .center-md { 769 | -webkit-box-pack: center; 770 | -webkit-justify-content: center; 771 | -ms-flex-pack: center; 772 | justify-content: center; 773 | text-align: center; 774 | } 775 | 776 | .end-md { 777 | -webkit-box-pack: end; 778 | -webkit-justify-content: flex-end; 779 | -ms-flex-pack: end; 780 | justify-content: flex-end; 781 | text-align: end; 782 | } 783 | 784 | .top-md { 785 | -webkit-box-align: start; 786 | -webkit-align-items: flex-start; 787 | -ms-flex-align: start; 788 | align-items: flex-start; 789 | } 790 | 791 | .middle-md { 792 | -webkit-box-align: center; 793 | -webkit-align-items: center; 794 | -ms-flex-align: center; 795 | align-items: center; 796 | } 797 | 798 | .bottom-md { 799 | -webkit-box-align: end; 800 | -webkit-align-items: flex-end; 801 | -ms-flex-align: end; 802 | align-items: flex-end; 803 | } 804 | 805 | .around-md { 806 | -webkit-justify-content: space-around; 807 | -ms-flex-pack: distribute; 808 | justify-content: space-around; 809 | } 810 | 811 | .between-md { 812 | -webkit-box-pack: justify; 813 | -webkit-justify-content: space-between; 814 | -ms-flex-pack: justify; 815 | justify-content: space-between; 816 | } 817 | 818 | .first-md { 819 | -webkit-box-ordinal-group: 0; 820 | -webkit-order: -1; 821 | -ms-flex-order: -1; 822 | order: -1; 823 | } 824 | 825 | .last-md { 826 | -webkit-box-ordinal-group: 2; 827 | -webkit-order: 1; 828 | -ms-flex-order: 1; 829 | order: 1; 830 | } 831 | } 832 | 833 | @media @desktop { //@media only screen and (min-width: 75em) 834 | 835 | .not-desktop{ 836 | display: none; 837 | } 838 | 839 | .container { 840 | width: 76rem; 841 | } 842 | 843 | .col-lg, 844 | .col-lg-1, 845 | .col-lg-2, 846 | .col-lg-3, 847 | .col-lg-4, 848 | .col-lg-5, 849 | .col-lg-6, 850 | .col-lg-7, 851 | .col-lg-8, 852 | .col-lg-9, 853 | .col-lg-10, 854 | .col-lg-11, 855 | .col-lg-12, 856 | .col-lg-offset-0, 857 | .col-lg-offset-1, 858 | .col-lg-offset-2, 859 | .col-lg-offset-3, 860 | .col-lg-offset-4, 861 | .col-lg-offset-5, 862 | .col-lg-offset-6, 863 | .col-lg-offset-7, 864 | .col-lg-offset-8, 865 | .col-lg-offset-9, 866 | .col-lg-offset-10, 867 | .col-lg-offset-11, 868 | .col-lg-offset-12 { 869 | box-sizing: border-box; 870 | -webkit-box-flex: 0; 871 | -webkit-flex: 0 0 auto; 872 | -ms-flex: 0 0 auto; 873 | flex: 0 0 auto; 874 | } 875 | 876 | .col-lg { 877 | -webkit-box-flex: 1; 878 | -webkit-flex-grow: 1; 879 | -ms-flex-positive: 1; 880 | flex-grow: 1; 881 | -webkit-flex-basis: 0; 882 | -ms-flex-preferred-size: 0; 883 | flex-basis: 0; 884 | max-width: 100%; 885 | } 886 | 887 | .col-lg-1 { 888 | -webkit-flex-basis: 8.333%; 889 | -ms-flex-preferred-size: 8.333%; 890 | flex-basis: 8.333%; 891 | max-width: 8.333%; 892 | } 893 | 894 | .col-lg-2 { 895 | -webkit-flex-basis: 16.666%; 896 | -ms-flex-preferred-size: 16.666%; 897 | flex-basis: 16.666%; 898 | max-width: 16.666%; 899 | } 900 | 901 | .col-lg-3 { 902 | -webkit-flex-basis: 25%; 903 | -ms-flex-preferred-size: 25%; 904 | flex-basis: 25%; 905 | max-width: 25%; 906 | } 907 | 908 | .col-lg-4 { 909 | -webkit-flex-basis: 33.333%; 910 | -ms-flex-preferred-size: 33.333%; 911 | flex-basis: 33.333%; 912 | max-width: 33.333%; 913 | } 914 | 915 | .col-lg-5 { 916 | -webkit-flex-basis: 41.667%; 917 | -ms-flex-preferred-size: 41.667%; 918 | flex-basis: 41.667%; 919 | max-width: 41.667%; 920 | } 921 | 922 | .col-lg-6 { 923 | -webkit-flex-basis: 50%; 924 | -ms-flex-preferred-size: 50%; 925 | flex-basis: 50%; 926 | max-width: 50%; 927 | } 928 | 929 | .col-lg-7 { 930 | -webkit-flex-basis: 58.333%; 931 | -ms-flex-preferred-size: 58.333%; 932 | flex-basis: 58.333%; 933 | max-width: 58.333%; 934 | } 935 | 936 | .col-lg-8 { 937 | -webkit-flex-basis: 66.667%; 938 | -ms-flex-preferred-size: 66.667%; 939 | flex-basis: 66.667%; 940 | max-width: 66.667%; 941 | } 942 | 943 | .col-lg-9 { 944 | -webkit-flex-basis: 75%; 945 | -ms-flex-preferred-size: 75%; 946 | flex-basis: 75%; 947 | max-width: 75%; 948 | } 949 | 950 | .col-lg-10 { 951 | -webkit-flex-basis: 83.333%; 952 | -ms-flex-preferred-size: 83.333%; 953 | flex-basis: 83.333%; 954 | max-width: 83.333%; 955 | } 956 | 957 | .col-lg-11 { 958 | -webkit-flex-basis: 91.667%; 959 | -ms-flex-preferred-size: 91.667%; 960 | flex-basis: 91.667%; 961 | max-width: 91.667%; 962 | } 963 | 964 | .col-lg-12 { 965 | -webkit-flex-basis: 100%; 966 | -ms-flex-preferred-size: 100%; 967 | flex-basis: 100%; 968 | max-width: 100%; 969 | } 970 | 971 | .col-lg-offset-0 { 972 | margin-left: 0; 973 | } 974 | 975 | .col-lg-offset-1 { 976 | margin-left: 8.333%; 977 | } 978 | 979 | .col-lg-offset-2 { 980 | margin-left: 16.666%; 981 | } 982 | 983 | .col-lg-offset-3 { 984 | margin-left: 25%; 985 | } 986 | 987 | .col-lg-offset-4 { 988 | margin-left: 33.333%; 989 | } 990 | 991 | .col-lg-offset-5 { 992 | margin-left: 41.667%; 993 | } 994 | 995 | .col-lg-offset-6 { 996 | margin-left: 50%; 997 | } 998 | 999 | .col-lg-offset-7 { 1000 | margin-left: 58.333%; 1001 | } 1002 | 1003 | .col-lg-offset-8 { 1004 | margin-left: 66.667%; 1005 | } 1006 | 1007 | .col-lg-offset-9 { 1008 | margin-left: 75%; 1009 | } 1010 | 1011 | .col-lg-offset-10 { 1012 | margin-left: 83.333%; 1013 | } 1014 | 1015 | .col-lg-offset-11 { 1016 | margin-left: 91.667%; 1017 | } 1018 | 1019 | .start-lg { 1020 | -webkit-box-pack: start; 1021 | -webkit-justify-content: flex-start; 1022 | -ms-flex-pack: start; 1023 | justify-content: flex-start; 1024 | text-align: start; 1025 | } 1026 | 1027 | .center-lg { 1028 | -webkit-box-pack: center; 1029 | -webkit-justify-content: center; 1030 | -ms-flex-pack: center; 1031 | justify-content: center; 1032 | text-align: center; 1033 | } 1034 | 1035 | .end-lg { 1036 | -webkit-box-pack: end; 1037 | -webkit-justify-content: flex-end; 1038 | -ms-flex-pack: end; 1039 | justify-content: flex-end; 1040 | text-align: end; 1041 | } 1042 | 1043 | .top-lg { 1044 | -webkit-box-align: start; 1045 | -webkit-align-items: flex-start; 1046 | -ms-flex-align: start; 1047 | align-items: flex-start; 1048 | } 1049 | 1050 | .middle-lg { 1051 | -webkit-box-align: center; 1052 | -webkit-align-items: center; 1053 | -ms-flex-align: center; 1054 | align-items: center; 1055 | } 1056 | 1057 | .bottom-lg { 1058 | -webkit-box-align: end; 1059 | -webkit-align-items: flex-end; 1060 | -ms-flex-align: end; 1061 | align-items: flex-end; 1062 | } 1063 | 1064 | .around-lg { 1065 | -webkit-justify-content: space-around; 1066 | -ms-flex-pack: distribute; 1067 | justify-content: space-around; 1068 | } 1069 | 1070 | .between-lg { 1071 | -webkit-box-pack: justify; 1072 | -webkit-justify-content: space-between; 1073 | -ms-flex-pack: justify; 1074 | justify-content: space-between; 1075 | } 1076 | 1077 | .first-lg { 1078 | -webkit-box-ordinal-group: 0; 1079 | -webkit-order: -1; 1080 | -ms-flex-order: -1; 1081 | order: -1; 1082 | } 1083 | 1084 | .last-lg { 1085 | -webkit-box-ordinal-group: 2; 1086 | -webkit-order: 1; 1087 | -ms-flex-order: 1; 1088 | order: 1; 1089 | } 1090 | } -------------------------------------------------------------------------------- /assets/less/import/_fonts.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Typography, WebFonts 3 | ----- */ 4 | // @font-face { 5 | // font-family: 'Name'; 6 | // src: url('@{base-fonts}path/to.eot'); 7 | // src: url('@{base-fonts}path/to.eot?#iefix') format('embedded-opentype'), 8 | // url('@{base-fonts}path/to.woff') format('woff'), 9 | // url('@{base-fonts}path/to.ttf') format('truetype'), 10 | // url('@{base-fonts}path/to.svg#04b27ca05cc09e86c39c371295e381ad') format('svg'); 11 | // font-style: normal; 12 | // font-weight: @regular; 13 | // } -------------------------------------------------------------------------------- /assets/less/import/_grid.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | 12 columns Responsive Grid 3 | ----- */ 4 | .row--float { 5 | zoom: 1; 6 | &:before, &:after { 7 | content:'\0020'; 8 | display:block; 9 | overflow:hidden; 10 | visibility:hidden; 11 | width:0; 12 | height:0 13 | } 14 | &:after {clear:both;} 15 | } 16 | .device-content{ 17 | position: relative; 18 | width: 1200px; 19 | .center-block(); 20 | } 21 | .column{ 22 | display: block; 23 | float: left; 24 | } 25 | .col-1{width:@col_1} 26 | .col-2{width:@col_2} 27 | .col-3{width:@col_3} 28 | .col-4{width:@col_4} 29 | .col-5{width:@col_5} 30 | .col-6{width:@col_6} 31 | .col-7{width:@col_7} 32 | .col-8{width:@col_8} 33 | .col-9{width:@col_9} 34 | .col-10{width:@col_10} 35 | .col-11{width:@col_11} 36 | .col-12{width:@col_12} 37 | img.scale-with-grid{ 38 | width: 100%; 39 | height: auto; 40 | display: block; 41 | } -------------------------------------------------------------------------------- /assets/less/import/_keyframes.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | CSS3 @keyframes 3 | ----- */ 4 | /* ----- 5 | Spinner 6 | ----- */ 7 | @keyframes spin { 8 | from {transform: rotate(0deg);} 9 | to {transform: rotate(360deg);} 10 | } -------------------------------------------------------------------------------- /assets/less/import/_medias.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Media Queries 3 | ----- */ 4 | @mobile: ~"only screen and (max-width: 768px)"; 5 | @tablet: ~"only screen and (min-width: 769px) and (max-width: 1024px)"; 6 | @desktop: ~"only screen and (min-width: 1025px) and (max-width: 1128px)"; 7 | @desktop-xl: ~"only screen and (min-width: 1129px)"; 8 | @retina: ~"only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"; 9 | 10 | @media @mobile { 11 | html{ 12 | font: 80%/1.5 @font; 13 | } 14 | 15 | .device-content{ 16 | width: 90%; 17 | } 18 | .not-mobile{ 19 | display: none; 20 | } 21 | } 22 | 23 | @media @tablet { 24 | html{ 25 | font: 90%/1.5 @font; 26 | } 27 | 28 | .device-content{ 29 | width: 700px; 30 | } 31 | .not-mobile{ 32 | display: none; 33 | } 34 | } 35 | 36 | @media @desktop { 37 | html{ 38 | font: 95%/1.5 @font; 39 | } 40 | 41 | .device-content{ 42 | width: 960px; 43 | } 44 | } 45 | 46 | /* ----- 47 | Retina 48 | ----- */ 49 | @media @retina {} -------------------------------------------------------------------------------- /assets/less/import/_mixin.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Basic Mixin' 3 | ----- */ 4 | .size(@width, @height){ 5 | width: @width; 6 | height: @height; 7 | } /* .size(50px,30px); */ 8 | .center-block(){ 9 | display: block; 10 | margin-left: auto; 11 | margin-right: auto; 12 | } /* .center-block(); */ 13 | .scale-with-grid(){ 14 | max-width: 100%; 15 | height: auto; 16 | } /* .scale-with-grid(); */ 17 | .absolute(){ 18 | position: absolute; 19 | top: 0; right: 0; bottom: 0; left:0; 20 | margin: auto; 21 | } /* .absolute(); */ 22 | .fixed(){ 23 | position: fixed; 24 | top: 0; right: 0; bottom: 0; left:0; 25 | margin: auto; 26 | } /* .fixed(); */ 27 | .hidden(){ 28 | opacity: 0; 29 | visibility: hidden; 30 | } /* .hidden(); */ 31 | .visible(){ 32 | opacity: 1; 33 | visibility: visible; 34 | } /* .visible(); */ 35 | 36 | /* ----- 37 | Hover 38 | ----- */ 39 | .hover-color(@color){ 40 | &:hover{color: @color;} 41 | } 42 | .hover-bg(@color){ 43 | &:hover{background-color: @color;} 44 | } -------------------------------------------------------------------------------- /assets/less/import/_normalize.less: -------------------------------------------------------------------------------- 1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */ 2 | input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} -------------------------------------------------------------------------------- /assets/less/import/_typography.less: -------------------------------------------------------------------------------- 1 | a { 2 | color: @black; 3 | text-decoration: underline; 4 | 5 | &:hover { 6 | color: @base; 7 | } 8 | } 9 | 10 | ul { 11 | list-style-type: none; 12 | } 13 | 14 | p { 15 | font: @14px/@25px @font; 16 | } -------------------------------------------------------------------------------- /assets/less/import/_var.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Path 3 | ----- */ 4 | @base-images: ~"../assets/images/"; 5 | @base-fonts: ~"../assets/fonts/"; 6 | 7 | /* ----- 8 | Colors 9 | ----- */ 10 | @white: #ffffff; 11 | @black: #000; 12 | @grey-dark: #3a3a3a; 13 | @grey-light: #686868; 14 | @none: rgba(0,0,0,0); 15 | @base: @grey-light; 16 | 17 | /* ----- 18 | Font Family 19 | ----- */ 20 | @helvetica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 21 | @font: -apple-system, @helvetica; 22 | 23 | /* ----- 24 | Font Weight 25 | ----- */ 26 | @light: 200; 27 | @regular: 400; 28 | @bold: 700; 29 | 30 | /* ----- 31 | Easings 32 | ----- */ 33 | @snap: cubic-bezier(0,1,.5,1); 34 | @easeOutCubic: cubic-bezier(.215,.61,.355,1); 35 | @easeInOutCubic: cubic-bezier(.645,.045,.355,1); 36 | @easeInCirc: cubic-bezier(.6,.04,.98,.335); 37 | @easeOutCirc: cubic-bezier(.075,.82,.165,1); 38 | @easeInOutCirc: cubic-bezier(.785,.135,.15,.86); 39 | @easeInExpo: cubic-bezier(.95,.05,.795,.035); 40 | @easeOutExpo: cubic-bezier(.19,1,.22,1); 41 | @easeInOutExpo: cubic-bezier(1,0,0,1); 42 | @easeInQuad: cubic-bezier(.55,.085,.68,.53); 43 | @easeOutQuad: cubic-bezier(.25,.46,.45,.94); 44 | @easeInOutQuad: cubic-bezier(.455,.03,.515,.955); 45 | @easeInQuart: cubic-bezier(.895,.03,.685,.22); 46 | @easeOutQuart: cubic-bezier(.165,.84,.44,1); 47 | @easeInOutQuart: cubic-bezier(.77,0,.175,1); 48 | @easeInQuint: cubic-bezier(.755,.05,.855,.06); 49 | @easeOutQuint: cubic-bezier(.23,1,.32,1); 50 | @easeInOutQuint: cubic-bezier(.86,0,.07,1); 51 | @easeInSine: cubic-bezier(.47,0,.745,.715); 52 | @easeOutSine: cubic-bezier(.39,.575,.565,1); 53 | @easeInOutSine: cubic-bezier(.445,.05,.55,.95); 54 | @easeInBack: cubic-bezier(.6,-.28,.735,.045); 55 | @easeOutBack: cubic-bezier(.175, .885,.32,1.275); 56 | @easeInOutBack: cubic-bezier(.68,-.55,.265,1.55); 57 | 58 | /* ----- 59 | Grid 60 | ----- */ 61 | @col_1: 8.33333333333%; 62 | @col_2: 16.6666666667%; 63 | @col_3: 25.0%; 64 | @col_4: 33.3333333333%; 65 | @col_5: 41.6666666667%; 66 | @col_6: 50.0%; 67 | @col_7: 58.3333333333%; 68 | @col_8: 66.6666666667%; 69 | @col_9: 75.0%; 70 | @col_10: 83.3333333333%; 71 | @col_11: 91.6666666667%; 72 | @col_12: 100%; 73 | 74 | /* ----- 75 | Font Sizes 76 | ----- */ 77 | @1px: 0.0625rem; 78 | @2px: 0.125rem; 79 | @3px: 0.1875rem; 80 | @4px: 0.25rem; 81 | @5px: 0.3125rem; 82 | @6px: 0.375rem; 83 | @7px: 0.4375rem; 84 | @8px: 0.5rem; 85 | @9px: 0.5625rem; 86 | @10px: 0.625rem; 87 | @11px: 0.6875rem; 88 | @12px: 0.75rem; 89 | @13px: 0.8125rem; 90 | @14px: 0.875rem; 91 | @15px: 0.9375rem; 92 | @16px: 1rem; 93 | @17px: 1.063rem; 94 | @18px: 1.125rem; 95 | @19px: 1.188rem; 96 | @20px: 1.25rem; 97 | @21px: 1.313rem; 98 | @22px: 1.375rem; 99 | @23px: 1.438rem; 100 | @24px: 1.5rem; 101 | @25px: 1.563rem; 102 | @26px: 1.625rem; 103 | @27px: 1.688rem; 104 | @28px: 1.75rem; 105 | @29px: 1.813rem; 106 | @30px: 1.875rem; 107 | @31px: 1.938rem; 108 | @32px: 2rem; 109 | @33px: 2.063rem; 110 | @34px: 2.125rem; 111 | @35px: 2.188rem; 112 | @36px: 2.25rem; 113 | @37px: 2.313rem; 114 | @38px: 2.375rem; 115 | @39px: 2.438rem; 116 | @40px: 2.5rem; 117 | @41px: 2.563rem; 118 | @42px: 2.625rem; 119 | @43px: 2.688rem; 120 | @44px: 2.75rem; 121 | @45px: 2.813rem; 122 | @46px: 2.875rem; 123 | @47px: 2.938rem; 124 | @48px: 3rem; 125 | @49px: 3.063rem; 126 | @50px: 3.125rem; 127 | @51px: 3.188rem; 128 | @52px: 3.25rem; 129 | @53px: 3.313rem; 130 | @54px: 3.375rem; 131 | @55px: 3.438rem; 132 | @56px: 3.5rem; 133 | @57px: 3.563rem; 134 | @58px: 3.625rem; 135 | @59px: 3.688rem; 136 | @60px: 3.75rem; 137 | @61px: 3.813rem; 138 | @62px: 3.875rem; 139 | @63px: 3.938rem; 140 | @64px: 4rem; 141 | @65px: 4.063rem; 142 | @66px: 4.125rem; 143 | @67px: 4.188rem; 144 | @68px: 4.25rem; 145 | @69px: 4.313rem; 146 | @70px: 4.375rem; 147 | @71px: 4.438rem; 148 | @72px: 4.5rem; 149 | @73px: 4.563rem; 150 | @74px: 4.625rem; 151 | @75px: 4.688rem; 152 | @76px: 4.75rem; 153 | @77px: 4.813rem; 154 | @78px: 4.875rem; 155 | @79px: 4.938rem; 156 | @80px: 5rem; 157 | @81px: 5.063rem; 158 | @82px: 5.125rem; 159 | @83px: 5.188rem; 160 | @84px: 5.25rem; 161 | @85px: 5.313rem; 162 | @86px: 5.375rem; 163 | @87px: 5.438rem; 164 | @88px: 5.5rem; 165 | @89px: 5.563rem; 166 | @90px: 5.625rem; 167 | @91px: 5.688rem; 168 | @92px: 5.75rem; 169 | @93px: 5.813rem; 170 | @94px: 5.875rem; 171 | @95px: 5.938rem; 172 | @96px: 6rem; 173 | @97px: 6.063rem; 174 | @98px: 6.125rem; 175 | @99px: 6.188rem; 176 | @100px: 6.25rem; 177 | @101px: 6.313rem; 178 | @102px: 6.375rem; 179 | @103px: 6.438rem; 180 | @104px: 6.5rem; 181 | @105px: 6.563rem; 182 | @106px: 6.625rem; 183 | @107px: 6.688rem; 184 | @108px: 6.75rem; 185 | @109px: 6.813rem; 186 | @110px: 6.875rem; 187 | @111px: 6.938rem; 188 | @112px: 7rem; 189 | @113px: 7.063rem; 190 | @114px: 7.125rem; 191 | @115px: 7.188rem; 192 | @116px: 7.25rem; 193 | @117px: 7.313rem; 194 | @118px: 7.375rem; 195 | @119px: 7.438rem; 196 | @120px: 7.5rem; 197 | @121px: 7.563rem; 198 | @122px: 7.625rem; 199 | @123px: 7.688rem; 200 | @124px: 7.75rem; 201 | @125px: 7.813rem; 202 | @126px: 7.875rem; 203 | @127px: 7.938rem; 204 | @128px: 8rem; 205 | @129px: 8.063rem; 206 | @130px: 8.125rem; 207 | @131px: 8.188rem; 208 | @132px: 8.25rem; 209 | @133px: 8.313rem; 210 | @134px: 8.375rem; 211 | @135px: 8.438rem; 212 | @136px: 8.5rem; 213 | @137px: 8.563rem; 214 | @138px: 8.625rem; 215 | @139px: 8.688rem; 216 | @140px: 8.75rem; 217 | @141px: 8.813rem; 218 | @142px: 8.875rem; 219 | @143px: 8.938rem; 220 | @144px: 9rem; 221 | @145px: 9.063rem; 222 | @146px: 9.125rem; 223 | @147px: 9.188rem; 224 | @148px: 9.25rem; 225 | @149px: 9.313rem; 226 | @150px: 9.375rem; 227 | @151px: 9.438rem; 228 | @152px: 9.5rem; 229 | @153px: 9.563rem; 230 | @154px: 9.625rem; 231 | @155px: 9.688rem; 232 | @156px: 9.75rem; 233 | @157px: 9.813rem; 234 | @158px: 9.875rem; 235 | @159px: 9.938rem; 236 | @160px: 10rem; 237 | @161px: 10.06rem; 238 | @162px: 10.13rem; 239 | @163px: 10.19rem; 240 | @164px: 10.25rem; 241 | @165px: 10.31rem; 242 | @166px: 10.38rem; 243 | @167px: 10.44rem; 244 | @168px: 10.5rem; 245 | @169px: 10.56rem; 246 | @170px: 10.63rem; 247 | @171px: 10.69rem; 248 | @172px: 10.75rem; 249 | @173px: 10.81rem; 250 | @174px: 10.88rem; 251 | @175px: 10.94rem; 252 | @176px: 11rem; 253 | @177px: 11.06rem; 254 | @178px: 11.13rem; 255 | @179px: 11.19rem; 256 | @180px: 11.25rem; 257 | @181px: 11.31rem; 258 | @182px: 11.38rem; 259 | @183px: 11.44rem; 260 | @184px: 11.5rem; 261 | @185px: 11.56rem; 262 | @186px: 11.63rem; 263 | @187px: 11.69rem; 264 | @188px: 11.75rem; 265 | @189px: 11.81rem; 266 | @190px: 11.88rem; 267 | @191px: 11.94rem; 268 | @192px: 12rem; 269 | @193px: 12.06rem; 270 | @194px: 12.13rem; 271 | @195px: 12.19rem; 272 | @196px: 12.25rem; 273 | @197px: 12.31rem; 274 | @198px: 12.38rem; 275 | @199px: 12.44rem; 276 | @200px: 12.5rem; 277 | @201px: 12.56rem; 278 | @202px: 12.63rem; 279 | @203px: 12.69rem; 280 | @204px: 12.75rem; 281 | @205px: 12.81rem; 282 | @206px: 12.88rem; 283 | @207px: 12.94rem; 284 | @208px: 13rem; 285 | @209px: 13.06rem; 286 | @210px: 13.13rem; 287 | @211px: 13.19rem; 288 | @212px: 13.25rem; 289 | @213px: 13.31rem; 290 | @214px: 13.38rem; 291 | @215px: 13.44rem; 292 | @216px: 13.5rem; 293 | @217px: 13.56rem; 294 | @218px: 13.63rem; 295 | @219px: 13.69rem; 296 | @220px: 13.75rem; 297 | @221px: 13.81rem; 298 | @222px: 13.88rem; 299 | @223px: 13.94rem; 300 | @224px: 14rem; 301 | @225px: 14.06rem; 302 | @226px: 14.13rem; 303 | @227px: 14.19rem; 304 | @228px: 14.25rem; 305 | @229px: 14.31rem; 306 | @230px: 14.38rem; 307 | @231px: 14.44rem; 308 | @232px: 14.5rem; 309 | @233px: 14.56rem; 310 | @234px: 14.63rem; 311 | @235px: 14.69rem; 312 | @236px: 14.75rem; 313 | @237px: 14.81rem; 314 | @238px: 14.88rem; 315 | @239px: 14.94rem; 316 | @240px: 15rem; 317 | @241px: 15.06rem; 318 | @242px: 15.13rem; 319 | @243px: 15.19rem; 320 | @244px: 15.25rem; 321 | @245px: 15.31rem; 322 | @246px: 15.38rem; 323 | @247px: 15.44rem; 324 | @248px: 15.5rem; 325 | @249px: 15.56rem; 326 | @250px: 15.63rem; 327 | @251px: 15.69rem; 328 | @252px: 15.75rem; 329 | @253px: 15.81rem; 330 | @254px: 15.88rem; 331 | @255px: 15.94rem; 332 | @256px: 16rem; 333 | @257px: 16.06rem; 334 | @258px: 16.13rem; 335 | @259px: 16.19rem; 336 | @260px: 16.25rem; 337 | @261px: 16.31rem; 338 | @262px: 16.38rem; 339 | @263px: 16.44rem; 340 | @264px: 16.5rem; 341 | @265px: 16.56rem; 342 | @266px: 16.63rem; 343 | @267px: 16.69rem; 344 | @268px: 16.75rem; 345 | @269px: 16.81rem; 346 | @270px: 16.88rem; 347 | @271px: 16.94rem; 348 | @272px: 17rem; 349 | @273px: 17.06rem; 350 | @274px: 17.13rem; 351 | @275px: 17.19rem; 352 | @276px: 17.25rem; 353 | @277px: 17.31rem; 354 | @278px: 17.38rem; 355 | @279px: 17.44rem; 356 | @280px: 17.5rem; 357 | @281px: 17.56rem; 358 | @282px: 17.63rem; 359 | @283px: 17.69rem; 360 | @284px: 17.75rem; 361 | @285px: 17.81rem; 362 | @286px: 17.88rem; 363 | @287px: 17.94rem; 364 | @288px: 18rem; 365 | @289px: 18.06rem; 366 | @290px: 18.13rem; 367 | @291px: 18.19rem; 368 | @292px: 18.25rem; 369 | @293px: 18.31rem; 370 | @294px: 18.38rem; 371 | @295px: 18.44rem; 372 | @296px: 18.5rem; 373 | @297px: 18.56rem; 374 | @298px: 18.63rem; 375 | @299px: 18.69rem; 376 | @300px: 18.75rem; 377 | @301px: 18.81rem; 378 | @302px: 18.88rem; 379 | @303px: 18.94rem; 380 | @304px: 19rem; 381 | @305px: 19.06rem; 382 | @306px: 19.13rem; 383 | @307px: 19.19rem; 384 | @308px: 19.25rem; 385 | @309px: 19.31rem; 386 | @310px: 19.38rem; 387 | @311px: 19.44rem; 388 | @312px: 19.5rem; 389 | @313px: 19.56rem; 390 | @314px: 19.63rem; 391 | @315px: 19.69rem; 392 | @316px: 19.75rem; 393 | @317px: 19.81rem; 394 | @318px: 19.88rem; 395 | @319px: 19.94rem; 396 | @320px: 20rem; 397 | @321px: 20.06rem; 398 | @322px: 20.13rem; 399 | @323px: 20.19rem; 400 | @324px: 20.25rem; 401 | @325px: 20.31rem; 402 | @326px: 20.38rem; 403 | @327px: 20.44rem; 404 | @328px: 20.5rem; 405 | @329px: 20.56rem; 406 | @330px: 20.63rem; 407 | @331px: 20.69rem; 408 | @332px: 20.75rem; 409 | @333px: 20.81rem; 410 | @334px: 20.88rem; 411 | @335px: 20.94rem; 412 | @336px: 21rem; 413 | @337px: 21.06rem; 414 | @338px: 21.13rem; 415 | @339px: 21.19rem; 416 | @340px: 21.25rem; 417 | @341px: 21.31rem; 418 | @342px: 21.38rem; 419 | @343px: 21.44rem; 420 | @344px: 21.5rem; 421 | @345px: 21.56rem; 422 | @346px: 21.63rem; 423 | @347px: 21.69rem; 424 | @348px: 21.75rem; 425 | @349px: 21.81rem; 426 | @350px: 21.88rem; 427 | @351px: 21.94rem; 428 | @352px: 22rem; 429 | @353px: 22.06rem; 430 | @354px: 22.13rem; 431 | @355px: 22.19rem; 432 | @356px: 22.25rem; 433 | @357px: 22.31rem; 434 | @358px: 22.38rem; 435 | @359px: 22.44rem; 436 | @360px: 22.5rem; 437 | @361px: 22.56rem; 438 | @362px: 22.63rem; 439 | @363px: 22.69rem; 440 | @364px: 22.75rem; 441 | @365px: 22.81rem; 442 | @366px: 22.88rem; 443 | @367px: 22.94rem; 444 | @368px: 23rem; 445 | @369px: 23.06rem; 446 | @370px: 23.13rem; 447 | @371px: 23.19rem; 448 | @372px: 23.25rem; 449 | @373px: 23.31rem; 450 | @374px: 23.38rem; 451 | @375px: 23.44rem; 452 | @376px: 23.5rem; 453 | @377px: 23.56rem; 454 | @378px: 23.63rem; 455 | @379px: 23.69rem; 456 | @380px: 23.75rem; 457 | @381px: 23.81rem; 458 | @382px: 23.88rem; 459 | @383px: 23.94rem; 460 | @384px: 24rem; 461 | @385px: 24.06rem; 462 | @386px: 24.13rem; 463 | @387px: 24.19rem; 464 | @388px: 24.25rem; 465 | @389px: 24.31rem; 466 | @390px: 24.38rem; 467 | @391px: 24.44rem; 468 | @392px: 24.5rem; 469 | @393px: 24.56rem; 470 | @394px: 24.63rem; 471 | @395px: 24.69rem; 472 | @396px: 24.75rem; 473 | @397px: 24.81rem; 474 | @398px: 24.88rem; 475 | @399px: 24.94rem; 476 | -------------------------------------------------------------------------------- /assets/less/layout.less: -------------------------------------------------------------------------------- 1 | @import "import/_normalize.less"; 2 | @import "import/_var.less"; 3 | @import "import/_mixin.less"; 4 | @import "import/_fonts.less"; 5 | @import "import/_grid.less"; 6 | @import "import/_flexbox.less"; 7 | @import "import/_keyframes.less"; 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | 13 | box-sizing: border-box; 14 | 15 | text-rendering: optimizeLegibility; 16 | 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | 20 | -webkit-tap-highlight-color: rgba(0,0,0,0); 21 | } 22 | 23 | html, 24 | body{ 25 | overflow: hidden; 26 | } 27 | 28 | html { 29 | font: 100%/1.5 @font; 30 | } 31 | 32 | body { 33 | &.is-loaded { 34 | footer{ 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | 40 | /* ----- 41 | Typography 42 | ----- */ 43 | @import "import/_typography.less"; 44 | 45 | /* ----- 46 | View 47 | ----- */ 48 | main { 49 | .fixed(); 50 | .size(100%,100%); 51 | 52 | .page { 53 | .fixed(); 54 | .size(100%,100%); 55 | .hidden(); 56 | text-align: center; 57 | } 58 | } 59 | 60 | /* ----- 61 | Utils 62 | ----- */ 63 | .vertical-align { 64 | display: table; 65 | position: relative; 66 | .size(100%,100%); 67 | 68 | &__item { 69 | display: table-cell; 70 | vertical-align: middle 71 | } 72 | } 73 | 74 | /* ----- 75 | Footer 76 | ----- */ 77 | footer { 78 | position: fixed; bottom: 0; right: 0; left: 0; 79 | display: block; 80 | text-align: center; 81 | .size(100%,50px); 82 | margin-bottom: 1rem; 83 | z-index: 3; 84 | opacity: 0; 85 | transition: opacity .7s @easeOutExpo; 86 | 87 | p { 88 | color: @grey-light; 89 | 90 | a { 91 | color: @grey-dark; 92 | 93 | &:hover { 94 | text-decoration: underline; 95 | } 96 | } 97 | } 98 | } 99 | 100 | /* ----- 101 | Preloader 102 | ----- */ 103 | @import "pages/_preloader.less"; 104 | 105 | /* ----- 106 | Home 107 | ----- */ 108 | @import "pages/_home.less"; 109 | 110 | /* ----- 111 | About 112 | ----- */ 113 | @import "pages/_about.less"; 114 | 115 | /* ----- 116 | Sub Views 117 | ----- */ 118 | @import "pages/_sub.less"; 119 | 120 | /* ----- 121 | Medias Queries 122 | ----- */ 123 | @import "import/_medias.less"; 124 | -------------------------------------------------------------------------------- /assets/less/pages/_about.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | About 3 | ----- */ 4 | .page-about {} -------------------------------------------------------------------------------- /assets/less/pages/_home.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Home 3 | ----- */ 4 | .page-home {} -------------------------------------------------------------------------------- /assets/less/pages/_preloader.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Preloader 3 | ----- */ 4 | .preloader { 5 | .fixed(); 6 | text-align: center; 7 | background: @white; 8 | } -------------------------------------------------------------------------------- /assets/less/pages/_sub.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Sub Items 3 | ----- */ 4 | .sub-item { 5 | display: none; 6 | .size(320px,100%); 7 | position: fixed; top: 0; right: 0; 8 | background: rgba(0,0,0,.1); 9 | text-align: center; 10 | transform: translate3d(100%,0,0); 11 | } -------------------------------------------------------------------------------- /build/app.min.css: -------------------------------------------------------------------------------- 1 | a,mark{color:#000}img,legend{border:0}legend,td,th{padding:0}body,html,svg:not(:root){overflow:hidden}a:hover,footer p{color:#686868}a,footer p a:hover{text-decoration:underline}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}hr{height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}.container,.container-fluid,.device-content{margin-right:auto;margin-left:auto}table{border-collapse:collapse;border-spacing:0}.row--float{zoom:1}.row--float:after,.row--float:before{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row--float:after{clear:both}.device-content{position:relative;width:1200px;display:block}.column{display:block;float:left}.col-1{width:8.33333333%}.col-2{width:16.66666667%}.col-3{width:25%}.col-4{width:33.33333333%}.col-5{width:41.66666667%}.col-6{width:50%}.col-7{width:58.33333333%}.col-8{width:66.66666667%}.col-9{width:75%}.col-10{width:83.33333333%}.col-11{width:91.66666667%}.col-12{width:100%}img.scale-with-grid{width:100%;height:auto;display:block}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse:not(.reverse--not-m){-ms-flex-direction:row-reverse;flex-direction:row-reverse}@include breakpoint(medium){--not-m{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.col.reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-ms-flex-preferred-size:16.666%;flex-basis:16.666%;max-width:16.666%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.666%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.middle-xs{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.bottom-xs{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-ms-flex-pack:justify;justify-content:space-between}.first-xs{-ms-flex-order:-1;order:-1}.last-xs{-ms-flex-order:1;order:1}@media only screen and (max-width:768px){.not-mobile{display:none}.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-ms-flex-preferred-size:16.666%;flex-basis:16.666%;max-width:16.666%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.666%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.middle-sm{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.bottom-sm{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-ms-flex-pack:justify;justify-content:space-between}.first-sm{-ms-flex-order:-1;order:-1}.last-sm{-ms-flex-order:1;order:1}}@media only screen and (min-width:769px) and (max-width:1024px){.not-tablet{display:none}.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-ms-flex-preferred-size:16.666%;flex-basis:16.666%;max-width:16.666%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-auto{-ms-flex-preferred-size:auto;flex-basis:auto;max-width:auto}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.666%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.middle-md{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.bottom-md{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-ms-flex-pack:justify;justify-content:space-between}.first-md{-ms-flex-order:-1;order:-1}.last-md{-ms-flex-order:1;order:1}}@media only screen and (min-width:1025px) and (max-width:1128px){.not-desktop{display:none}.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-ms-flex-preferred-size:16.666%;flex-basis:16.666%;max-width:16.666%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.666%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.middle-lg{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.bottom-lg{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-ms-flex-pack:justify;justify-content:space-between}.first-lg{-ms-flex-order:-1;order:-1}.last-lg{-ms-flex-order:1;order:1}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}*{margin:0;padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}main,main .page{position:fixed;right:0;margin:auto;height:100%;top:0}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font:100%/1.5 -apple-system,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}body.is-loaded footer{opacity:1}footer,main .page{width:100%;opacity:0;bottom:0;left:0}ul{list-style-type:none}p{font:.875rem/1.563rem -apple-system,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}main{bottom:0;left:0;width:100%}main .page{visibility:hidden;text-align:center}.vertical-align{display:table;position:relative;width:100%;height:100%}.preloader,.sub-item,footer{position:fixed;right:0;text-align:center}.vertical-align__item{display:table-cell;vertical-align:middle}footer{display:block;height:50px;margin-bottom:1rem;z-index:3;transition:opacity .7s cubic-bezier(.19,1,.22,1)}footer p a{color:#3a3a3a}.preloader{top:0;bottom:0;left:0;margin:auto;background:#fff}.sub-item{display:none;width:320px;height:100%;top:0;background:rgba(0,0,0,.1);transform:translate3d(100%,0,0)}@media only screen and (max-width:768px){html{font:80%/1.5 -apple-system,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}.device-content{width:90%}.not-mobile{display:none}}@media only screen and (min-width:769px) and (max-width:1024px){html{font:90%/1.5 -apple-system,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}.device-content{width:700px}.not-mobile{display:none}}@media only screen and (min-width:1025px) and (max-width:1128px){html{font:95%/1.5 -apple-system,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif}.device-content{width:960px}} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baptistebriel/biggie/5f7c3a46f04a3c5fecc72b522e89215ecfb75fda/favicon.ico -------------------------------------------------------------------------------- /gulp/index.js: -------------------------------------------------------------------------------- 1 | require('es6-promise').polyfill(); 2 | 3 | var fs = require('fs'); 4 | var tasks = fs.readdirSync('./gulp/tasks/'); 5 | 6 | tasks.forEach(function(task) { 7 | require('./tasks/' + task); 8 | }); -------------------------------------------------------------------------------- /gulp/tasks/aliases.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | gulp.task('default', ['less', 'lint', 'js', 'serve']); 6 | -------------------------------------------------------------------------------- /gulp/tasks/javascript.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var watchify = require('watchify'); 5 | var browserify = require('browserify'); 6 | var babelify = require('babelify'); 7 | var changed = require('gulp-changed'); 8 | var uglify = require('gulp-uglify'); 9 | var rename = require('gulp-rename'); 10 | var gutil = require('gulp-util'); 11 | var assign = require('lodash.assign'); 12 | var source = require('vinyl-source-stream'); 13 | var buffer = require('vinyl-buffer'); 14 | 15 | var customOpts = { 16 | entries: ['assets/js/main.js'], 17 | debug: true 18 | }; 19 | 20 | var opts = assign({}, watchify.args, customOpts); 21 | var bundler = watchify(browserify(opts).transform(babelify, {presets: ["es2015"]})); 22 | var destination = './build'; 23 | 24 | gulp.task('js', bundle); 25 | bundler.on('update', bundle); 26 | bundler.on('log', gutil.log); 27 | 28 | function bundle() { 29 | return bundler.bundle() 30 | .on('error', gutil.log.bind(gutil, 'Browserify Error')) 31 | .pipe(source('app')) 32 | .pipe(changed(destination)) 33 | .pipe(rename({ extname: '.js' })) 34 | .pipe(gulp.dest(destination)) 35 | .pipe(buffer()) 36 | .pipe(uglify().on('error', gutil.log)) 37 | .pipe(rename({ extname: '.min.js' })) 38 | .pipe(gulp.dest(destination)) 39 | } -------------------------------------------------------------------------------- /gulp/tasks/lint.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var jshint = require('gulp-jshint'); 5 | var gutil = require('gulp-util'); 6 | 7 | gulp.task('lint', function() { 8 | return gulp.src('assets/js/*.js') 9 | .pipe(jshint()) 10 | .pipe(jshint.reporter('default')); 11 | }); -------------------------------------------------------------------------------- /gulp/tasks/serve.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var history = require('connect-history-api-fallback'); 5 | var browserSync = require('browser-sync'); 6 | var reload = browserSync.reload; 7 | 8 | gulp.task('serve', ['less', 'lint', 'js'], function() { 9 | 10 | browserSync({ 11 | notify: false, 12 | server: { 13 | baseDir: './', 14 | middleware: [ history() ] 15 | } 16 | }); 17 | 18 | gulp.watch('assets/less/**/*.less', ['less']); 19 | gulp.watch('assets/js/**/*.js', ['js', 'lint']); 20 | 21 | gulp.watch(['*.html', 'build/*.css', 'build/*.js'], {cwd: ''}, reload); 22 | }); -------------------------------------------------------------------------------- /gulp/tasks/styles.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var less = require('gulp-less'); 6 | var autoprefixer = require('gulp-autoprefixer'); 7 | var cleancss = require('gulp-clean-css'); 8 | var rename = require("gulp-rename"); 9 | var browserSync = require('browser-sync'); 10 | 11 | gulp.task('less', function() { 12 | gulp.src('assets/less/layout.less') 13 | .pipe(less().on('error', gutil.log)) 14 | .pipe(autoprefixer({ 15 | browsers: ['last 2 versions'], 16 | cascade: false 17 | })) 18 | .pipe(cleancss()) 19 | .pipe(rename("app.min.css")) 20 | .pipe(gulp.dest('build/')) 21 | .pipe(browserSync.stream()); 22 | }); -------------------------------------------------------------------------------- /gulp/utils/handleErrors.js: -------------------------------------------------------------------------------- 1 | var notify = require("gulp-notify"); 2 | 3 | module.exports = function() { 4 | var args = Array.prototype.slice.call(arguments); 5 | 6 | // Send error to notification center with gulp-notify 7 | notify.onError({ 8 | title: "Compile Error", 9 | message: "<%= error.message %>" 10 | }).apply(this, args); 11 | 12 | // Keep gulp from hanging on this task 13 | this.emit('end'); 14 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('./gulp'); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | biggie 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "biggie", 3 | "version": "1.1.2", 4 | "description": "minimalist javascript frontend framework with bigwheel", 5 | "main": "gulpfile.js", 6 | "browser": { 7 | "framework": "./assets/js/framework", 8 | "config": "./assets/js/config", 9 | "cache": "./assets/js/cache", 10 | "utils": "./assets/js/utils", 11 | "@utils/array": "./assets/js/utils/array", 12 | "@utils/biggie": "./assets/js/utils/biggie", 13 | "@utils/css": "./assets/js/utils/css", 14 | "@utils/dom": "./assets/js/utils/dom", 15 | "@utils/func": "./assets/js/utils/func", 16 | "@utils/math": "./assets/js/utils/math" 17 | }, 18 | "dependencies": { 19 | "bigwheel": "3.0.0", 20 | "bw-router": "^2.0.6", 21 | "bw-viewmediator": "2.1.0", 22 | "bw-vm": "^2.1.3", 23 | "dom-classes": "^1.0.0", 24 | "dom-create-element": "^1.0.2", 25 | "dom-event": "^1.0.0", 26 | "dom-select": "^1.0.0", 27 | "gsap": "^1.19.0", 28 | "please-ajax": "^2.0.2", 29 | "prefix": "^1.0.0", 30 | "query-dom-components": "^0.1.0", 31 | "sniffer": "github:watsondg/sniffer" 32 | }, 33 | "devDependencies": { 34 | "babel-preset-es2015": "^6.16.0", 35 | "babelify": "^7.2.0", 36 | "browser-sync": "^2.18.5", 37 | "browserify": "^13.3.0", 38 | "connect-history-api-fallback": "^1.3.0", 39 | "es6-promise": "^4.0.5", 40 | "gulp": "^3.8.11", 41 | "gulp-autoprefixer": "^3.1.1", 42 | "gulp-changed": "^1.3.2", 43 | "gulp-clean-css": "^2.3.2", 44 | "gulp-concat": "^2.6.1", 45 | "gulp-jshint": "^2.0.3", 46 | "gulp-less": "^3.3.0", 47 | "gulp-notify": "^2.0.1", 48 | "gulp-rename": "^1.2.2", 49 | "gulp-sourcemaps": "^2.2.1", 50 | "gulp-uglify": "^2.0.0", 51 | "gulp-util": "^3.0.8", 52 | "jshint": "^2.9.4", 53 | "lodash.assign": "^4.2.0", 54 | "vinyl-buffer": "^1.0.0", 55 | "vinyl-source-stream": "^1.1.0", 56 | "vinyl-transform": "^1.0.0", 57 | "watchify": "^3.6.1" 58 | }, 59 | "repository": { 60 | "type": "git", 61 | "url": "https://github.com/baptistebriel/biggie.git" 62 | }, 63 | "bugs": { 64 | "url": "https://github.com/baptistebriel/biggie/issues", 65 | "email": "baptiste@sa-studio.fr" 66 | }, 67 | "browserify": { 68 | "transform": [ 69 | [ 70 | "babelify", 71 | { 72 | "only": "assets/js/", 73 | "presets": [ 74 | "es2015" 75 | ] 76 | } 77 | ] 78 | ] 79 | }, 80 | "scripts": { 81 | "test": "echo \"Error: no test specified\" && exit 1" 82 | }, 83 | "author": "Baptiste Briel", 84 | "license": "ISC" 85 | } 86 | -------------------------------------------------------------------------------- /templates/about.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home > About

4 |
5 |

Duplicate sections

6 |

Section 1 > Section 2

7 |
8 |

Sub sections

9 |

Gallery

10 |

Gallery 1 > Gallery 2

11 |
12 |
-------------------------------------------------------------------------------- /templates/gallery.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home > About

4 |
5 |

Duplicate sections

6 |

Section 1 > Section 2

7 |
8 |

Sub sections

9 |

Gallery

10 |

Gallery 1 > Gallery 2

11 |
12 |
-------------------------------------------------------------------------------- /templates/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |

Home > About

10 |
11 |

Duplicate sections

12 |

Section 1 > Section 2

13 |
14 |

Sub sections

15 |

Gallery

16 |

Gallery 1 > Gallery 2

17 |
18 |
-------------------------------------------------------------------------------- /templates/section/one.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home > About

4 |
5 |

Duplicate sections

6 |

Section 1 > Section 2

7 |
8 |

Sub sections

9 |

Gallery

10 |

Gallery 1 > Gallery 2

11 |
12 |
-------------------------------------------------------------------------------- /templates/section/two.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Home > About

4 |
5 |

Duplicate sections

6 |

Section 1 > Section 2

7 |
8 |

Sub sections

9 |

Gallery

10 |

Gallery 1 > Gallery 2

11 |
12 |
--------------------------------------------------------------------------------