WF5. Express: HowTo Add Bootstrap

Updated: 2016-06-05

This HowTo part of a series starting with Mean stack: Preparing workflow on Windows.

It consist of notes taken from Chapter 3 in “Getting Mean With Mongo, Express, Angular, and Node“ about adding Bootstrap styling to Express.

WF is short for Workflow meaning a manual process in this context.

WF5. Express: HowTo Add Bootstrap

Express by default delivers almost no styling in .\public\stylesheets\style.css.

So it is nice to get started with bootstrap

02-06-2016_18-44-01

  • ST3 – ctrl-alt-n “public\javascripts\jquery.min.js” //Create and opens new file
  • ST3 -ctrl-shift-p “fetf” – enter – jquery – enter //Download content into file
  • ST3 -ctrl-shift-p “fetp” – enter – Bootstrap – “\public\bootstrap”
  • ST3 -ctrl-shift-p “fetp” – enter – Bootstrap_Amelia – “\public\bootstrap\css”

Now you got jQuery, bootstrap and the amelia theme downloaded.

02-06-2016_23-20-33

  • ST3 – ctrl-p “layoj” – enter //Opens .\app_server\views\layout.jade
  • Add the missing parts: meta, link, script:
  head
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title= title
    link(rel='stylesheet', href='/bootstrap/css/amelia.bootstrap.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
        script(scr='/javascripts/jquery.min.js')
        script(scr='/bootstrap/js/bootstrap.min.js')

Now you got

02-07-2016_00-08-50

The End.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: