Merge branch 'master' of github.com:sahat/hackathon-starter into merge-auth
* 'master' of github.com:sahat/hackathon-starter: Fixed typos and revisied custom html and css design section Add custom design 101 section to mini-guides Add html5up to Recommended Design linkspull/2/head
commit
9da5a60ff3
51
README.md
51
README.md
|
@ -199,6 +199,7 @@ Recommended Design
|
||||||
- [3D Dropdown Menu](http://soulwire.github.io/Makisu/) - CSS3 3D Dropdown Menu that folds and unfolds.
|
- [3D Dropdown Menu](http://soulwire.github.io/Makisu/) - CSS3 3D Dropdown Menu that folds and unfolds.
|
||||||
- [Creative Link Effects](http://tympanus.net/Development/CreativeLinkEffects/) - Beautiful link effects in CSS.
|
- [Creative Link Effects](http://tympanus.net/Development/CreativeLinkEffects/) - Beautiful link effects in CSS.
|
||||||
- [Medium Scroll Effect](http://codepen.io/andreasstorm/pen/pyjEh) - Fade in/out header background image as you scroll.
|
- [Medium Scroll Effect](http://codepen.io/andreasstorm/pen/pyjEh) - Fade in/out header background image as you scroll.
|
||||||
|
- [HTML5UP](http://html5up.net/) - Beautifully designed HTML templates.
|
||||||
|
|
||||||
Recommended Node.js Libraries
|
Recommended Node.js Libraries
|
||||||
-----------------------------
|
-----------------------------
|
||||||
|
@ -306,6 +307,56 @@ how a particular functionality works. Maybe you are just curious about
|
||||||
how it works, or maybe you are lost and confused while reading the code,
|
how it works, or maybe you are lost and confused while reading the code,
|
||||||
I hope it provides some guidance to you.
|
I hope it provides some guidance to you.
|
||||||
|
|
||||||
|
###:rose: Custom HTML and CSS Design 101
|
||||||
|
[HTML5 UP](http://html5up.net/) has many beautiful templates that you can download for free, like the ones you see below:
|
||||||
|
![Alt](http://html5up.net/uploads/previews/6742121165068310.jpg)
|
||||||
|
![Alt](http://html5up.net/uploads/previews/9257227011867312.jpg)
|
||||||
|
|
||||||
|
When you download the ZIP file, it will come with *index.html*, *images*, *css* and *js* folders. So, how do you
|
||||||
|
integrate it with Hackathon Starter? Hackathon Starter uses Bootstrap CSS framework, but these templates do not.
|
||||||
|
Trying to use both CSS files at the same time will likely result in undesired effects.
|
||||||
|
|
||||||
|
:exclamation: **Note:** Using the custom templates approach, you should understand that you cannot reuse any of the views I have created: layout, home page, api browser, login, signup, account management, contact. Those views were built using Bootstrap grid and styles. You will have to manually update the grid using a different syntax provided in the template. **Having said that, you can mix and match if you want to do so: Use Bootstrap for main app interface, and a custom template for a landing page.**
|
||||||
|
|
||||||
|
Let's start from the beginning. For this example I will use [Escape Velocity](http://html5up.net/escape-velocity/) template:
|
||||||
|
![Alt](http://html5up.net/uploads/previews/6330653905846315.jpg)
|
||||||
|
|
||||||
|
**Note**: For the sake of simplicity I will only consider `index.html`, and skip `left-sidebar.html`,
|
||||||
|
`no-sidebar.html`, `right-sidebar.html`.
|
||||||
|
|
||||||
|
Move all javascript files from `html5up-escape-velocity/js` to `public/js`. Then move all css files from `html5up-escape-velocity/css` to `public/css`. And finally, move all images from `html5up-escape-velocity/images` to `public/images` (You could move it to the existing **img** folder, but then you would have to manually change every `img` reference). Grab the contents of `index.html` and paste it into [HTML To Jade](http://html2jade.aaron-powell.com/).
|
||||||
|
|
||||||
|
Create a new file `escape-velocity.jade` and paste the Jade markup there. Change `!!! 5` to `doctype html`. It's a fairly recent
|
||||||
|
change in **Jade** language, but http://html2jade.aaron-powell.com hasn't caught up to this change yet.
|
||||||
|
|
||||||
|
Let's see how it looks. Create a new controller **escapeVelocity** inside `controllers/home.js`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
exports.escapeVelocity = function(req, res) {
|
||||||
|
res.render('escape-velocity', {
|
||||||
|
title: 'Landing Page'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
And then create a route in `app.js`. I placed it right after the index controller:
|
||||||
|
```js
|
||||||
|
app.get('/escape-velocity', homeController.escapeVelocity);
|
||||||
|
```
|
||||||
|
|
||||||
|
Restart the server (if you are not using **nodemon**), then you should see the new template at [http://localhost:3000/escape-velocity](http://localhost:3000/escape-velocity).
|
||||||
|
|
||||||
|
I will stop here, but if you would like to use this template as more than just a single page, take a look at how these Jade templates work: `layout.jade` - base template, `index.jade` - home page, `partials/navigation.jade` - Bootstrap navbar, `partials/footer.jade` - sticky footer. You will have to manually break it apart into smaller pieces. Figure out which part of the template you want to keep the same on all pages - that's your new `layout.jade`.
|
||||||
|
Then, each page that changes, be it `index.jade`, `about.jade`, `contact.jade`
|
||||||
|
will be embedded in the new `layout.jade` via `block content`.
|
||||||
|
|
||||||
|
This is a lengthy process, I know, and templates you get from outside **HTML5**UP,
|
||||||
|
will have yet another grid system. That's why I chose Bootstrap CSS for the Hackathon Starter.
|
||||||
|
Most people are familiar with Bootstrap, it's easy to get started, very extendable.
|
||||||
|
You can also buy a Bootstrap theme drop it in into your project, and everything looks great without a single change to your markup or CSS class names. However, if you would like to go with a completely custom design, there you have it!
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
###:bulb: How do flash messages work in this project?
|
###:bulb: How do flash messages work in this project?
|
||||||
Flash messages allow you to display a message at the end of the request and access
|
Flash messages allow you to display a message at the end of the request and access
|
||||||
it on next request and only next request. For instance, on a failed login attempt, you would
|
it on next request and only next request. For instance, on a failed login attempt, you would
|
||||||
|
|
Loading…
Reference in New Issue