Thrill Life Productions
First steps:
- install node.js vs 6.11. npm vs 3.10.10
- install bower
- Terminal: npm install -g bower
Install Bootstrap in your Node powered apps with the npm package:
-
Terminal: npm install bootstrap@4.0.0-alpha.6
-
create a folder scss / within that folder create vendor folder
-
Going to Customize our bootstrap scss: a. go to bower_components/bootstrap b. pull out _custom.scss & bootstrap.scss c. place these in your vendor folder
-
Goto bootstrap.scss (only common out what you will be using) add to these files "../..bower_components/bootstrap/scss/"
// Core variables and mixins @import "custom"; @import "../../bower_components/bootstrap/scss/variables"; @import "../../bower_components/bootstrap/scss/mixins";
// Reset and dependencies @import "../../bower_components/bootstrap/scss/normalize"; @import "../../bower_components/bootstrap/scss/print";
// Core CSS @import "../../bower_components/bootstrap/scss/reboot"; @import "../../bower_components/bootstrap/scss/type"; @import "../../bower_components/bootstrap/scss/images"; //@import "../../bower_components/bootstrap/scss/code"; @import "../../bower_components/bootstrap/scss/grid"; //@import "../../bower_components/bootstrap/scss/tables"; //@import "../../bower_components/bootstrap/scss/forms"; @import "../../bower_components/bootstrap/scss/buttons";
// Components @import "../../bower_components/bootstrap/scss/transitions"; //@import "../../bower_components/bootstrap/scss/dropdown"; //@import "../../bower_components/bootstrap/scss/button-group"; //@import "../../bower_components/bootstrap/scss/input-group"; //@import "../../bower_components/bootstrap/scss/custom-forms"; @import "../../bower_components/bootstrap/scss/nav"; @import "../../bower_components/bootstrap/scss/navbar"; @import "../../bower_components/bootstrap/scss/card"; //@import "../../bower_components/bootstrap/scss/breadcrumb"; //@import "../../bower_components/bootstrap/scss/pagination"; //@import "../../bower_components/bootstrap/scss/badge"; //@import "../../bower_components/bootstrap/scss/jumbotron"; //@import "../../bower_components/bootstrap/scss/alert"; //@import "../../bower_components/bootstrap/scss/progress"; //@import "../../bower_components/bootstrap/scss/media"; //@import "../../bower_components/bootstrap/scss/list-group"; @import "../../bower_components/bootstrap/scss/responsive-embed"; //@import "../../bower_components/bootstrap/scss/close";
// Components w/ JavaScript //@import "../../bower_components/bootstrap/scss/modal"; //@import "../../bower_components/bootstrap/scss/tooltip"; //@import "../../bower_components/bootstrap/scss/popover"; //@import "../../bower_components/bootstrap/scss/carousel";
// Utility classes @import "../../bower_components/bootstrap/scss/utilities";
-
Inside your vendor folder- create a file main.scss @import 'abstracts/variables';
//bring Bootstrap @import 'vendor/bootstrap'; @import 'base/typography';
@import 'components/navigation'; @import 'pages/home';
-
In your SCSS folder create _home.scss abstracts /file: _variables.scss base /file: _typography.scss components /file: _navigation.scss layout pages /file: _home.scss
-
Inside thrill_life_productions - create a file thrill_index.html
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
-
Inside thrill_life_productions - create a folder fonts a. goto fonts http://fontawesome.io/ b. download c. grab zip file font-awesome-4.7.0 and drag to fonts folder d. In the of your html, reference the location to your font-awesome.min.css. paste this link
e. change link to say:
f. fa-calendar-o - Unicode: f133