Code Monkey home page Code Monkey logo

footer-nav-bar's Introduction

Footer Navigation Bar



GitHub deployments GitHub code size in bytes GitHub repo size

A full-width footer with navigation links for a company (template.) This has been coded using vanilla HTML5 & CSS3 (SCSS) and is fully responsive, with a stylish, modern interface and optimised for the web.

โœ”๏ธ Features:

  • Dark themed style
  • Fully responsive
  • Optimised for the web

๐Ÿค“ Stacks Used:

html5 css3 sass

๐Ÿ”— Links

๐Ÿ–‹๏ธ Notes

Forking/cloning this repo to work on yourself is welcomed. Before doing so however, the repo owner strongly advises reading the following:

PRODUCTION BUILD & DEPLOYMENT

This has been built using Dart SASS and Parcel. To run this in a dev environment, run npm install sass -D and npm install parcel-bundler -D in the terminal. Below are Parcel and SASS-specific commands for dev and production compiling:

  • npx sass --watch src/scss:dist/css (optional)*
  • npm run dev will run an auto-compile with each change
  • npm run build will optimise and package the project for client-side interaction

*the Parcel Bundler will compile the src and dist code, so this step is optional (ideal for checking SASS compilation beforehand or where Parcel Bundler may not be required. For further commands, see the SASS Documentation)

For serverless deployment, ensure the settings has dist configured as the base directory. These can be altered in the package.json

SOURCE ASSETS

All assets used deemed relevant for this project to be used client-side and cloned to a local computer have been added in their respective directories. Any changes to the files and dirs will need to be adjusted accordingly in the package.json

PULL REQUESTS

While the repo owner is open to new/alternative approaches to the code leveraged in this repo, please kindly note he is only considering PRs pertaining to improved functionality, accessibility or stability. PRs therefore pertaining to design or aesthetics will not be considered at this time. If you would like to discuss these separately, the repo owner will happily do so. You may contact him either via email or via LinkedIn.

footer-nav-bar's People

Contributors

asbhogal avatar

Stargazers

 avatar

Watchers

 avatar

footer-nav-bar's Issues

WIP-SASS-Environment-Modification / 01

The repo owner is making several switches in his approach to SCSS programming and CSS compiling. The following actions will be carried out for this issue (not in sequential order):

  • Owing to its upcoming deprecation, the '@import' directive will be replaced with '@forward' and '@use' rules for respective files (partials and main stylesheets)
  • Subsequently, a new npm install of Dart SASS* will be integrated to replace the Live SASS Compiler currently used
  • Leveraging of Parcel to run a dev environment and compile an optimised production build (w/ minification)
  • A change in directory structure with /src and /dist and sub-folders within
  • Vercel deployments will require a change in base directory to point to the correct index.html

The idea here is to create a development environment which supports the new SASS ruling and optimises builds for future deployment whilst incorporating auto-refresh to improve performance. Build environments will be deployed on the main branch and accessible via the Vercel link. Since the above steps relate to one another, the logical approach is to combine and action them in one branch, rather than individual ones. This approach will be replicated across the relevant repositories (subs. issues raised.)

*The Static Site Compiler will not be leveraged as this is designed for development only, requires additional customisation for assets and has a continual issue with BrowserSync vulnerabilities

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.