Git Product home page Git Product logo

codesmith-site-build's Introduction

CSS-SASS Bootstrap Builder - Codesmith Website Build

A Webpack developement environment for compiling production CSS and JavaScript using Hot Module Replacement (HMR), SASS, the Twitter Bootstrap library, Pug/Jade, EJS, PurifyCSS, and more.

How to begin?

  1. Run yarn install to install all the dependencies
  2. Run yarn start for development mode
  3. New browser window should open automatically.

Build production files by running yarn prod.

Known Issues

  • If .jpg files are causing compile errors, run brew install libpng.
  • New image files will not be recongnized until running webpack in terminal.
  • Extra html/ejs templates must be mannually added to webpack.config.js and src\app.js.

To-do

Urgent:

  • Run production build by running yarn prod then replace .png photos (that are not logos) with compressed .jpg files
  • Integrate into codemisth-public-site repo as an .ejs template (adjust proper routing)

Sooner:

  • Update head meta icons
  • lazy-loading functionality for homepage image slideshow.
  • create fix to resize program.html's sidenav on overflow
  • fix styling quirks with mobile nav
  • Fix custom font not showing up on remote computers

Later:

  • Smoother image-rotater
  • Manually roll out JS functionality for main nav behaviors in order to drop Bootstrap's JS. Use bootstrap native (a vanilla js implementation of bootstrap's js) in the meantime.
  • Refactor production stylesheet to symantic class names.
  • Event Page
  • Blog Feed Page
  • Single Blog Post Page
  • Global Style Guide
  • Add validation to sign-up form on homepage
  • Viewport-based margins

codesmith-site-build's People

Contributors

markmarcelo avatar smeads avatar smozingo avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.