Last active
August 29, 2015 14:15
-
-
Save Kevinlearynet/3d298ee15a75de36db9f to your computer and use it in GitHub Desktop.
Static Site Engines with Node + Express Code Samples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Elements | |
| Fundamental building blocks of MIT Technology Review's digital styles. | |
| ## Doctype | |
| {{ organization }} makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. | |
| ### HTML | |
| ```html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| ... | |
| </html> | |
| ``` | |
| ### Preview | |
|  | |
| ## Units & Measurement | |
| CSS3 introduces a few new units, including the rem unit, which stands for "root em". The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. | |
| ### HTML | |
| ```html | |
| html { font-size: 62.5%; } | |
| body { font-size: 14px; font-size: 1.4rem; } /* =14px */ | |
| h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ | |
| ``` | |
| ## Typography | |
| #### Fonts | |
| ### Neue Haas Grotesk | |
| The digital version of Helvetica that everyone knows and uses today is quite different from the typeface’s pre-digital | |
| design. Originally released as Neue Haas Grotesk, many of the features that made it a Modernist favorite were lost in | |
| translation as the designs were reworked for changing typesetting technologies. | |
| In 2011, type designer Christian Schwartz restored the original Neue Haas Grotesk in digital form – bringing back features like optical size variations, alternate glyphs, and refined spacing – and captured much of the warmth and personality of the original. | |
| Neue Haas Grotesk is the most widely used font on the MIT Technology Review website. It's used for body text, metadata, story lists and streams, comments, and other widgets. | |
|  | |
| ### Miller | |
| Miller, designed by Matthew Carter in 1997, is a “Scotch Roman,” a class of sturdy, general purpose types of Scottish | |
| origin, widely used in the United States in the 19th century. | |
| Miller is faithful to the Scotch style though not to any one historical example — and is authentic in having both roman and italic | |
| small caps, a feature of the originals. | |
| On our website, we use Miller almost exclusively for headlines on article pages. | |
|  | |
| ### Benton Sans | |
| Benton Sans is a typeface that is the result of Tobias Frere-Jones efforts to study and redesign News Gothic in 1995, which was later expanded by Cyrus Highsmith. | |
| Benton Sans is used mostly for utility and navigation purposes. | |
|  | |
| ## Images | |
| There are a few different ways we place images in stories. | |
| #### Thumbnails | |
| A story's thumbnail is used in a variety of places across the website including stream pages, various sections of the home page, and related content boxes. To ensure consistency in layout, the dimensions of the thumbnails are always square. We size our thumbnails to be 392 x 392 pixels so that if that image is selected as the A1 story, it will be large enough for the A1 on the home page. | |
| ### Example of a thumbnail at different sizes throughout the website | |
|  | |
|  | |
|  | |
| #### Images in stories | |
| Articles can support images as wide as 519px. If an image is 299px in width or less, it hangs into the margin with the caption tucked underneath it. | |
| ### Small image that is 299px wide | |
|  | |
| When an image is 300px wide or more, it will be displayed in alignment with the body text. Larger images should be no wider than 519px. | |
| ### Large image that is 519px wide | |
|  | |
| ## Links | |
| ### Style | |
| Text links on the MIT Technology Review website should be blue (hex code #206f96) and underlined. The hover state should change to red (hex code #d7182a). | |
| [Example link]() | |
| ### Behavior | |
| Links should always open in the same window or tab, allowing the user to retain control over their navigation and browsing experience. They should never open in a new window or tab. | |
| ## Buttons | |
| ### Primary | |
| This style should be used for primary calls to action that initiate some kind of transaction, such as "Buy Now" or "Activate Account". | |
|  | |
| ### Secondary | |
| These smaller buttons are for secondary actions and functions, such as pagination, | |
|  | |
| ### Tertiary | |
| These text links are for actions used to navigate the website. There may be several of these buttons present on a single page. | |
|  | |
|  | |
|  | |
| ### Behavior | |
| Buttons should always open in the same window or tab, allowing the user to retain control over their navigation and browsing experience. They should never open in a new window or tab. | |
| ## Branding & Colors | |
| ### Branding | |
| On the MIT Technology Review website, we use the Stacked Logo. The Stacked Logo should be used in contexts where the simplest or boldest expression is needed, including situations where it will be seen with other logos – | |
| such as a listing of event sponsors – and on magazine covers. | |
| The logo must always be used as a supplied graphic file, and never typeset by the user, to ensure that the correct scale relationships and spacing are maintained. The letterforms have been redrawn to work at different scales, so it is crucial that the logo not be recreated from the typefaces. | |
| The areas around the logo should always be kept clear of external graphic elements. | |
| We use the white version of the logo on a black background, and it appears both in the [header](/patterns#header) and the [footer](/patterns#footer). | |
|  | |
| ### Colors | |
| #### Core Palette | |
| Consistent use of color enhances the strength of the MIT Technology Review | |
| identity. The core color palette consists of red, black, grey, and white. See examples and general uses below. | |
|  | |
| #### Extended Palette | |
| The extended palette anticipates the need for a fuller range of color that works in conjunction with, and potentially in the place of, the core palette. See examples and general uses below. | |
|  | |
| ## Grid | |
| The width of the MIT Technology Review website is 1020px. Most of the layouts are based on a five column grid. Each column is 188px wide with a 20px gutter between each. | |
|  | |
| ## Icons | |
| Icons are used minimally on the website. We have several custom icons as seen in the [tertiary button](/elements#buttons) and [share widget](/components#share-widgets), but we are moving towards using the icon library from [Font Awesome](http://fortawesome.github.io/Font-Awesome/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| var gulp = require('gulp'), | |
| less = require('gulp-less'), | |
| path = require('path'), | |
| rename = require('gulp-rename'), | |
| nodemon = require('gulp-nodemon'), | |
| jshint = require('gulp-jshint'), | |
| livereload = require('gulp-livereload'), | |
| uglify = require('gulp-uglifyjs'), | |
| install = require('gulp-install'); | |
| // install package dependencies | |
| gulp.task('install', function () { | |
| gulp.src(['./bower.json', './package.json']) | |
| .pipe(install()); | |
| }); | |
| // jshint | |
| gulp.task('jshint', function () { | |
| gulp.src('./*.js') | |
| .pipe(jshint()) | |
| }); | |
| // concatenate and minify client-side JS | |
| gulp.task('uglify', function () { | |
| gulp.src('./public/js/*.js') | |
| .pipe(gulp.dest('./dist/js')) | |
| .pipe(rjs({ | |
| baseUrl: 'dist/js' | |
| })) | |
| .pipe(livereload()); | |
| }); | |
| // compile LESS | |
| gulp.task('less', function () { | |
| // core.less | |
| gulp.src('./public/less/core.less') | |
| .pipe(less({ | |
| lint: true, | |
| compress: true | |
| })) | |
| .pipe(gulp.dest('./public/dist')) | |
| .pipe(livereload()); | |
| // livefyre-sidenotes | |
| gulp.src('./public/less/livefyre-sidenotes.less') | |
| .pipe(less({ | |
| lint: true, | |
| compress: true | |
| })) | |
| .pipe(rename('livefyre-sidenotes.css')) | |
| .pipe(gulp.dest('./public/dist')) | |
| .pipe(livereload()); | |
| }); | |
| // watch for file changes | |
| gulp.task('watch', function () { | |
| gulp.watch('./public/less/*.less', ['less']); | |
| //gulp.watch('./public/js/*.js', ['require-uglify']); | |
| }); | |
| // nodemon: automatically reload env when files change | |
| gulp.task('nodemon', function () { | |
| nodemon({ | |
| script: 'app.js', | |
| ext: 'js twig', | |
| ignore: ['public/*'], | |
| nodeArgs: ['--debug'], | |
| env: { | |
| 'NODE_ENV': 'development' | |
| } | |
| }) | |
| .on('change', ['jshint']) | |
| .on('restart', function () { | |
| console.log('restart'); | |
| }); | |
| }); | |
| // runtime | |
| gulp.task('default', ['nodemon', 'watch', 'install']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% include "_head.html" %} | |
| </head> | |
| {% include "_toolbar.html" %} | |
| <section class="main layout-default"> | |
| <div class="container region"> | |
| <aside class="secondary" data-hash="#view-template" data-offset-top="139" data-sticky></aside> | |
| <main id="view-template" class="primary markdown"> | |
| {% marked %} | |
| {% include view %} | |
| {% endmarked %} | |
| </main> | |
| </div> | |
| </section> | |
| {% include "_footer.html" %} | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Dynamic URL Routing | |
| * | |
| * Wildcard handler for all site pages, where thse | |
| * URL path corresponds to a view template. | |
| */ | |
| app.get('/*', function(req, res) { | |
| // what view should we use based on the current route? | |
| var viewPath = app.get('views'); | |
| var viewTemplate = (req.url === '/') ? 'index' : req.url.substring(1); | |
| var templatePath = viewPath + '/' + viewTemplate + '.html'; | |
| var viewTitle = (req.url === '/') ? 'home' : req.url.substring(1); | |
| // layout: simple (for index) | |
| if (req.url === '/') { | |
| res.render('layout-simple', { | |
| view: './index.html', | |
| activeRoute: req.url, | |
| title: viewTitle | |
| }); | |
| } | |
| // layout: default | |
| else { | |
| // does the view template for this route exist? | |
| // if not serve an error page | |
| fs.exists(templatePath, function(exists) { | |
| if (exists) { | |
| res.render('layout-default', { | |
| view: viewTemplate + '.html', | |
| activeRoute: req.url, | |
| title: viewTitle | |
| }); | |
| } else { | |
| res.render('layout-error', { | |
| view: './error-404.html', | |
| activeRoute: req.url, | |
| title: viewTitle | |
| }); | |
| } | |
| }); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment