startbootstrap / startbootstrap-one-page-wonder

A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder

One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap.

Preview

View Live Preview

Status

Download and Installation

To begin using this template, choose one of the following options to get started:

• Download the latest release on Start Bootstrap
• Install via npm: npm i startbootstrap-one-page-wonder
• Clone the repo: git clone https://github.com/StartBootstrap/startbootstrap-one-page-wonder.git
• Fork, Clone, or Download on GitHub

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with dist directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Usage

Clone the source files of the theme and navigate into the theme's root directory. Run npm install and then run npm start which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the package.json file to see which scripts are included.

npm Scripts

• npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
• npm run build:assets copies the files in the src/assets/ directory into dist
• npm run build:pug compiles the Pug located in the src/pug/ directory into dist
• npm run build:scripts brings the src/js/scripts.js file into dist
• npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
• npm run clean deletes the dist directory to prepare for rebuilding the project
• npm run start:debug runs the project in debug mode
• npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

You must have npm installed in order to use this build environment.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

About

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

• https://startbootstrap.com
• https://twitter.com/SBootstrap

Start Bootstrap was created by and is maintained by David Miller.

• https://davidmiller.io
• https://twitter.com/davidmillerhere
• https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2023 Start Bootstrap LLC. Code released under the MIT license.

startbootstrap-one-page-wonder's Issues

Drupal integration

I haven't found easy solution to integrate with Drupal. Any solution/idea?

Can't run build with github action

I try to build a github CI like this:

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
      - run: npm run build

But I get this error:

Error: Cannot find module 'shelljs'
Require stack:
- /home/runner/work/tyvain.github.io/tyvain.github.io/scripts/clean.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:[18](https://github.com/Tyvain/tyvain.github.io/runs/5314103267?check_suite_focus=true#step:4:18))
    at Object.<anonymous> (/home/runner/work/tyvain.github.io/tyvain.github.io/scripts/clean.js:1:12)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:8[22](https://github.com/Tyvain/tyvain.github.io/runs/5314103267?check_suite_focus=true#step:4:22):12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/runner/work/tyvain.github.io/tyvain.github.io/scripts/clean.js'
  ]

https://github.com/Tyvain/tyvain.github.io/runs/5314103267?check_suite_focus=true

Source: https://github.com/Tyvain/tyvain.github.io

Title Bar Obscures Content

when i click on the link in the title bar, it scrolls down to the relevant page heading, but it scrolls down too far, such that the title bar obscures the top of the heading. how can i make it scroll down less so that the chosen heading is fully visible?

Unable to show up the footer

In my case, unable to see the footer.
If they can check the same problem, they can change footer class, "bg-black" to "bg-dark".I think this is the solution, but please tell me about that if you know any better solution.
Thank you for reading.

<footer class="py-5 bg-black"> </footer>

Navbar shifts when lower content is removed

as displayed in the gif below. I tried looking at it to figure out what's causing it, but couldn't figure it out

CSS Style Sheet Not Loading with HTML file

The CSS Style file is not uploading when I upload the html index file. here is the code I am using

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>One Page Wonder - Start Bootstrap Template</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Myles Studio Photography</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">


                <li>
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Full Width Image Header -->
<header class="header-image">
    <div class="headline">
        <div class="container">
            <h1>How Did We Do?</h1>
            <h2>Let us know what you think and receive a free coupon</h2>
        </div>
    </div>
</header>

The only information I changed in the CSS Style sheet was the images.
Here is the link to the site when I post it on the web
https://58b89c205e06bd4e3e1dd42b0961d86398950bae.googledrive.com/host/0B_u1sfBJ8QuwcHRKNEZHZkMwR1U/