startbootstrap/startbootstrap-new-age

A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age

New Age is a web app landing page theme 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-new-age
• Clone the repo: git clone https://github.com/StartBootstrap/startbootstrap-new-age.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-new-age's Issues

Running 'gulp default' resets source css file?

Hey, every time I modify css styling and run gulp default, it resets it. Am I doing something wrong or suppose to modify the gulp script in some way?

Improvement for gh-pages compatibility

Since 2nd November 2016, gh-pages with running jekyll blog are per default ignoring vendor and node_modules folders (see https://github.com/blog/2277-what-s-new-in-github-pages-with-jekyll-3-3 ). So it's good to update the gulp inject task and name the folder something like lib. I'll create a PR when I have some time.

Internet Explorer 11 issues

The site doesnt look good in IE11 unfortunately.

How to update the min.css

i modified the new-age.css,
and I can't see the changes.
I guess I need to apply the changes to new-age.min.css
How can I apply?
I would appreciate if you could answer :D

Help running with express

I added express to the app npm install express --save and made my express file server.js

'use strict';

const express = require('express');

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

I run gulp and then node server.js. The website is live on http://0.0.0.0:8080/ but no style or images show up. What am I doing wrong?

update device screenshots

Firstly, I would like to thank you for making this great design available to us all for free.

Secondly, Facebook offers a wide variety of device screenshots, they have the Galaxy S9, and some relatively new phones. Your project only has till the Galaxy S5.

https://facebook.design/devices

It would be great if we can get updated devices once in a while!

THank you very much.

How is the form section setup?

Hi. Great project. I am trying to figure out how to set up the feedback form. How does this get set up to send to my email or for example MailChimp or something similar. Thanks!

build in a separate folder

i am not sure which file should copy

if it can build and generate a build folder , that will be very nice

thank you

Which files are necessary for deploying?

Beautiful template, thanks. I've followed the directions under Advanced Usage and am ready to deploy the site, but the total size of my working directory is 381 MB.

Breakdown per folder

ncdu 1.14.2 ~ Use the arrow keys to navigate, press ? for help
--- /Users/allen/Sites/mysite-landing -----------------------------------------
164.0 MiB [##########] /.git
127.6 MiB [#######   ] /node_modules
 78.9 MiB [####      ] /device-mockups
  8.2 MiB [          ] /vendor
  2.2 MiB [          ] /img
280.0 KiB [          ]  package-lock.json
 48.0 KiB [          ] /scss
 16.0 KiB [          ] /css
 12.0 KiB [          ]  index.html
 12.0 KiB [          ]  .DS_Store
  8.0 KiB [          ] /js
  4.0 KiB [          ]  README.md
  4.0 KiB [          ]  gulpfile.js
  4.0 KiB [          ]  package.json
  4.0 KiB [          ]  LICENSE
  4.0 KiB [          ]  heroku-build.js
  4.0 KiB [          ]  .browserslistrc
  4.0 KiB [          ]  .travis.yml
  4.0 KiB [          ]  .gitignore

Is there a build script I can/should run that would essentially copy just the required files to a production server? In my case, I want to drop this page into an existing Django app. I'm a bit new to npm & gulp.

Thanks!

Icons colouring issue in older version of Firefox

I opened the website on an older version of Firefox, 48.0.1 and the coloring of the icons is messed up. With the most recent version there is no problem.

This is what I see, any way to fix this for users who haven't updated their browsers?

are these buttons (Device Mockups, Flexible Use) generated by files? I can't find the JPG file. Where is it generated?

Hello, are these buttons (Device Mockups, Flexible Use) generated by files?
I can't find the JPG file. Where is it generated?

Color scheme

Could anyone help me to identify the color scheme used on this theme? I would like to use with a new one.

Rails Integration TypeError: e(...).scrollspy is not a function

I've integrated all of the JS and CSS and everything works except I'm getting an error in Chrome dev tools:

Uncaught TypeError: e(...).scrollspy is not a function
    at application-ac2e9e0016d7aa08b057.js:1
    at Object.<anonymous> (application-ac2e9e0016d7aa08b057.js:1)
    at t (application-ac2e9e0016d7aa08b057.js:1)
    at Object.<anonymous> (application-ac2e9e0016d7aa08b057.js:1)
    at t (application-ac2e9e0016d7aa08b057.js:1)
    at Object.<anonymous> (application-ac2e9e0016d7aa08b057.js:1)
    at t (application-ac2e9e0016d7aa08b057.js:1)
    at application-ac2e9e0016d7aa08b057.js:1
    at application-ac2e9e0016d7aa08b057.js:1

I've installed all of the dependencies in the package.json but I don't see any reference to scrollspy. Is this an external library and/or how can I get this working as expected?

Possible to get iPhone X device-mockups?

Thanks

js and more not found

It doesn't compress the CSS

Thanks for fixing the gulpfile to compress the js. It is now working:

gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);

However the css still doesn't compile.
I have custom css in new-age/css/
and gulp css ignores those.

This wasn't the case in the previous release.

Is there any chance you could fix this please?

[chrome] - social anchors are not shown

Chrome version: Version 77.0.3865.90 (Official Build) (64-bit)

Loading the example url
https://blackrockdigital.github.io/startbootstrap-new-age/
in chrome results in the social buttons being hidden

Debug

scripts/start-debug.js

Possible to get iPhone 7 device-mockups?

I'm working on a project where I want to display artboards of those dimensions.

Issue with prettier.js

..../node_modules/prettier/index.js:13656
} catch {
^

SyntaxError: Unexpected token {
at new Script (vm.js:51:7)
at createScript (vm.js:138:10)
at Object.runInThisContext (vm.js:199:10)
at Module._compile (module.js:626:28)
at Object.Module._extensions..js (module.js:673:10)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)
at Module.require (module.js:606:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:pug: node scripts/build-pug.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:pug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /.../.../.npm/_logs/...-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Device image credits?

Is there somewhere that contains the links to the original device images this theme uses?

How can i change index file extension.

I am using old version of startbootstrao-new-page
Please let me know how can i add index.php instead of index.html.

Hi i am creating a website using php, using startbootstrap-new-age theme for quick development but i am little stuck.

I have make some changes in gulpfile to run index.php instead of index.html and it's working but when i did this scss function in gulpfile (which is responsible for converting SCSS into css) is not working as expected.

gulp.task('css:compile', function() { return gulp.src('./scss/**/*.scss') .pipe(sass.sync({ outputStyle: 'expanded' }).on('error', sass.logError)) .pipe(gulp.dest('./css')) });

It's not converting the variables but working fine for simple SCSS like :
Working example
#mainNav { h1 { font-size: 20px; color: orange } }

Not Working in this condition
#mainNav { h1 { font-size: 20px; color: **$orange-color** } }

Two badges in the README are not rendering

Expected behaviour

All README badges should render well.

Actual behaviour

Two badges in the README are not rendering

Problem font awesome

I do not understand why my social media button does not show up the same way as on your theme...! You can have a look on: http://ivandureve.github.io/booth
Thank you very much,
Sincerely,
Ivan

When click on start now for free button white header not disappear when you scroll up

Cannot read property 'top' of undefined

Good Day, I have this error on the new-age.min.js. I've used Angular and imported all the css and js on the angular.json. What causes this problem?

Icon gradients not working on Safari, not showing

Safari has an issue with color: transparent; and webkit-background-clip since way back.
https://stackoverflow.com/questions/31289537/webkit-text-fill-color-transparent-not-working-in-safari-7-1-7

While it applies to text ok now, it does not apply to the bootstrap icon.

Chrome

Safari

Can't Install via NPM

Trying to install via NPM but causing fail when installing in sub-directory

C:\wamp64\www\randomofme.com>npm i startbootstrap-new-age
npm WARN saveError ENOENT: no such file or directory, open 'C:\wamp64\www\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\wamp64\www\package.json'
npm WARN [email protected] requires a peer of popper.js@^1.14.6 but none is installed. You must install peer dependencies yourself.
npm WARN www No description
npm WARN www No repository field.
npm WARN www No README data
npm WARN www No license field.

+ [email protected]
added 6 packages from 13 contributors and audited 1940 packages in 66.221s
found 0 vulnerabilities

Rest of node_modules installed on root (www), not on sub-directory, sub-directory still empty

OS: Windows 10
LocalServer: Apache on WAMP
NPM Version: 6.5.0

concat JS and CSS to improve initial page load speed

The thorough gulp file is highly appreciated this page does very well once caching and gzipping is enabled:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblackrockdigital.github.io%2Fstartbootstrap-new-age%2F

https://tools.pingdom.com/#!/ddPX9I/https://blackrockdigital.github.io/startbootstrap-new-age/

Could it make sense to add a final concat step that puts the template-specific and vendor files into one .js file and one .css file? Or at least those included above the fold?

For one thing, gzip is not efficient for files below 1KB, so on Firebase for example none of these small files are gzipped.

header on mobile

Hi David,

I do really like the template. But I would like to know - how to show the header on mobile?

Many thanks,

Jerus

Problem with Device-Mockup

Im trying to change the mockup for "nexus_6" but it does not work... it appears a default macbook instead!