/2018_design

Primary LanguageCSS

LNET Redesign - Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Explore Bootstrap docs »
Explore SASS »


Table of contents

Quick start

Set up dependencies and get to work:

  • Windows Users Install RubyInstaller: Gives you gem
  • Linux Users Install Ruby Version Manager: Gives you gem
  • Install Sass with gem: gem install sass
  • Install nodeJS: Gives you Node Package Manager (npm)
    • If creating a new Bootstrap project (our source files are already setup):
      • Install bootstrap: npm install bootstrap
      • Install font-awesome: npm install font-awesome
      • Install jquery: npm install jquery
      • Install roboto-fontface: npm install roboto-fontface
    • If adding new images to img/banners/: node js/dirs.js
  • Clone the repo: git clone https://github.com/LegislativeCoordinatingCommissionGIS/2018_design.git
  • Watch and compile Sass: sass --watch styles/scss:styles/css
    • Sass watches for .scss changes in styles/scss folder and compiles to .css in styles/css folder

Read the Sass and Bootstrap documentation for information on the framework and more.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

2018_design/
├── html/
│   ├── docs/
│   │   ├── banner.html
│   │   ├── components.html
│   │   ├── grid.html
│   │   ├── lcc.html
│   │   └── test.html
│   ├── house/
│   │   └── index.html
│   ├── joint/
│   │   └── index.html
│   └── senate/
│       └── index.html
│
├── styles/
│   ├── css/
│   │   ├── app.css
│   │   ├── app.css.map
│   │   ├── jquery-ui.css
│   │   └── jquery-ui.css.map
│   │
│   ├── fonts/
│   │
│   └── scss/
│       ├── _lnet.scss
│       ├── _lnet-datepicker.scss
│       ├── _lnet-footer.scss
│       ├── _lnet-mixins.scss
│       ├── _lnet-navbar.scss
│       ├── _variables.scss
│       ├── app.scss
│       ├── jquery-ui
│       └── jquery-ui.scss
├── img/
│   └── banners/
│
├── js/
│   ├── jquery-ui.1.12.1.custom/
│   │   └── jquery-ui assets
│   ├── bootstrapWindowHelper.js
│   ├── calendar.js
│   ├── dirs.js
│   ├── docsApp.js
│   ├── getParameterByName.js
│   └── navbarhelper.js
│
└── node_modules/
    ├── bootstrap/
    ├── font-awesome/
    ├── jquery/
    ├── roboto-fontface/
    └── readme.txt

We will provide compiled CSS and JS (app.*), as well as compiled and minified CSS and JS (app.min.*). CSS source maps (app.css.map) are available for use with certain browsers' developer tools.

Contributing

Do not edit /styles/css/app.css or node_modules/bootstrap/ directly! Those files are automatically generated. You should edit the source files in /styles/scss/ and/or js/ instead.

The GitLab issue tracker or GitHub is the preferred channel for bugs, feature requests, and submitting pull requests

All HTML and CSS should conform (generally) to the Code Guide, maintained by Mark Otto.