Git Product home page Git Product logo

startbootstrap-creative's Introduction

Creative is a one page, creative website theme built with Bootstrap created by Start Bootstrap.

Preview

Creative Preview

View Live Preview

Status

GitHub license npm version

Download and Installation

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

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.

Contact Form

The contact form available with this theme is prebuilt to use SB Forms. SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our SB Forms markup, all you need to do is sign up for SB Forms on Start Bootstrap.

After signing up you will need to set the domain name your form will be used on, and you will then see your access key. Copy this and paste it into the data-sb-form-api-token='API_TOKEN' data attribute in place of API_TOKEN. That's it! Your forms will be up and running!

If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the closing </body> tag to SB Forms.

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 theme overview page at Start Bootstrap.

About

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

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

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-creative's People

Contributors

albertborsos avatar davidtmiller avatar dmolson avatar dmzza avatar hocdoc avatar manouchehri avatar timu57 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

startbootstrap-creative's Issues

Upgrade jQuery to avoid Prototype Pollution

Hi,
First, thank you for your work, it saved me a lot of time and fits perfectly to my needs.
It looks like there is a moderate vulnerability in the jQuery dependency.

Npm audit security report :
Moderate | Prototype Pollution
Package | jquery
Patched in | >=3.4.0
Dependency of | startbootstrap-creative
Path | startbootstrap-creative > jquery
More info | https://npmjs.com/advisories/796

Can you please update the jQuery dependency ? That would be awesome.

Have a good day.

PS : Same problem appears to some of your other repositories. I'll be reporting it when I see it.

Top menu (Scrollspy) problem with Firefox

Hi.
If you try the demo with a browser other than Chrome you 'll notice that there is a problem with the top menu (Scrollspy).
I you play a little with that you will see that if you click on the "Services" the "About" href will be active, or if you click on the "Portfolio" the previous one will be active.
Anyway... something is going on with the active top menu.

Thank you.

None of the css files are working

I have been using this template for a project im working on. And the css wasn't working and a few days ago the css started working, like everything I changed actually starting showing. But today none of the css files are working again. (I deleted everything out of all the css files and my page still showed all the css)

P.S. I was wondering which of the css files I need to use, because there are multiple files)

Thanks in advance,

I

Page not rendered correctly by Googlebot

Nothing bellow banner is rendered by Googlebot when the desktop version is fetched and rendered through search console. Menu is nor rendered by Googlebot. This has potential consequences for SEO and indexing of all information on the page. Could be related to Googlebot using Chrome 41 to render pages.
795c9f90-4d69-4117-8e82-21f5a45f16a5

Header logo

Hi, i love the Creative theme, one question please... about adding a logo: i added a png (transparent, 24bit) logo with white writing (in creative.css-> .navbar-default .navbar-header .navbar-brand) and managed to make it change to dark writing as the sticky menu enter (creative.css-> .navbar-default.affix .navbar-header .navbar-brand),
but in mobile versions the background is white and then the default logo is not seen... (white on white). any solution for mobile version logo?
http://themarketplace.co.il/other/diamining/index.html#contact

Thank you very much!

Change image source for the gallery

I'm currently trying to changes the contents of the image gallery to different images as well as create another popup that will display a div containing an Iframe and text underneath.

How would I go about changing the magnific-popup to allow for such things??

Kind Regards

Scroll Spy Is Not A Function

Im recreating this template in a project of mine but i keep getting the scroll spy is not a function error. Which is file is scroll spy referenced in.

Making a post request for new article redirects to "Cannot POST /"

When trying to post a new article(story), I am redirected to a blank page that says "Cannot POST /"

I have the route set up as following:

  post '/stories' => 'stories#create'

and the controller action as:

def create
    @story = Story.new(story_params)

    if @story.save
      render json: @story, status: :created, location: @story
    else
      render json: @story.errors, status: :unprocessable_entity
    end
  end

modal window fade effect

If use bootstrap 4 modal window like

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

(example from https://getbootstrap.com/docs/4.0/components/modal/)

it's don't have any fade effect in that template in firefox browser.

Version 3

I am currently using the version 3 of this theme yet the branch for the v3 is gone. How can I use the version 3? I am using npm to install this theme.

not responsive

I download code from github, UI looks good but its not responsive. Do I need to do anything extra?

Footer

This is really a great and simple theme. Are there any plans to add a footer to this?

Links to portfolio

Hello, there!
I would like to know how to put a link to the image in portfolio. I don't want to open it in a pop-up.
Thank you

How do you get this file to deploy on Heroku

This is probably a n00b question, but I've been working with your template and trying to get it deploy on Heroku and I can't get it to deploy. Heroku detects it as a Node.js file but all of the documentation on deploying a Node.js file on Heroku does not sync with what you have so I figured you have a simple fix on how to get it to deploy. It needs a server.js or Procfile...is this something only Heroku requires or can I get this to deploy elsewhere easily? Thanks!

header overlaps the navbar on IE11 browser

Header overlaps the top menu on IE11 browser.

Fix for IE 11 in creative.scss

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .my-auto .row { padding-top: 150px; } }

The "About" Section

In this section below i am recreating it to be a "reviews" section and I would like to add a bxslider to add multiple reviews. How do i do this? Any help would be wonderful!

Thanks!
Emily

We've got what you need!


Start Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Start Bootstrap are open source, free to download, and easy to use. No strings attached!

Get Started!

css missing msg on wp

I keep getting this message on Wordpress everytime I tried to download any of the free templates.

The package could not be installed. The theme is missing the style.css stylesheet.
I've tried everything but no avail

not working on iphone

hello
the live preview works fine however the 1.0.2 available for download (so is the version available on github) does not work on iphone. works well on any other device.
any clue?
thanks

Help with font icons

Hi how are you? i'm having problems to show the font icons when the page is already uploaded.
In my localhost its everything ok:
image
But when it's online it doesn't show the icons and the console says something like "slow network" blabla
image
Your help is really valuable for me!
Gracias! Saludos! :)

Gulp Support

Are you guys planning on releasing a version using gulp?

sticky footer

Thank you for the great theme.
I was trying to add ad sticky footer for the cookie notification bar but these styles seems not to work

html {
  min-height:100%;
  position:relative;
}
body {
  margin-bottom:60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

If I remove the position:relative from the html it's at the footer but not sticky.

Can't understand "collapsed" in index.html

Hi,

I am new to open-source and this is the first project that I cloned. I just wanted to draw attention to line number 43 in index.html. It is as shown

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>

I have doubt with class="navbar-toggle collapsed". What's the use of collapsed here? I searched, found about collapse but couldn't find anything related to collapsed. Am I missing something or is it just a typo?

Problem with background photo in the front page

I am using python 3.6 and django version 2.0.2.

When i incorporate the code into my app, the first page background is always missing (hence in white color). Others photos/ icons are just all fine.

Can anyone help?

SUGGESTION for JS change.

Hei,

First: nice template. Create job :)

I do have one suggestion due to fact how Silverstripe CMS handles certain things. In js/creative(.min).js file
Row 8:
scrollTop: ($($anchor.attr('href')).offset().top - 50)
I would replace with
scrollTop: ($($anchor.attr('href').substring($anchor.attr('href').indexOf("#"))).offset().top - 50)

Or to make it more simple, Row 6 I would change from
var $anchor = $(this);
to
var $anchor = $(this).attr('href');
and then row 8 would be:
scrollTop: ($($anchor.substring($anchor.indexOf("#"))).offset().top - 50)

The reason is to make sure the anchor+name (for example #about) is forced to use. In Silverstripe all hrefs automatically get / in front of ANY URL. Meanwhile, it will work on any system anyways, due to the fact that return is always #+name (#about).

Of course - second option is to change template and js to use some other custom attribute, like data-value or any other similar.

Responsive background color of navbar breaks with external url

I added a list of social icons to the navbar and everything works fine with it until I fill the href tag with an url. At that point, the bar stops changing color when scrolled and always displays as transparent.

This is my code (working correctly):

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container-fluid">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">G. Valentini</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
                              
        <div class="collapse navbar-collapse" id="navbarResponsive">                                    
          <ul class="nav navbar-nav navbar-right flex-row">
	    <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-twitter"></i></a></li>
             <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-youtube"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-researchgate-square"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-google-scholar-square"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-orcid"></i></a></li>              
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-github"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-linkedin"></i></a></li>
          </ul>
            
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#news">News</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Research
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item js-scroll-trigger" href="#pols">Information in living systems</a>
                <a class="dropdown-item js-scroll-trigger" href="#robotswarms">Collective decisions in robot swarms</a>
                <a class="dropdown-item js-scroll-trigger" href="#kilogrid">Kilogrid</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#publications">Publications</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#stats">Stats</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

The above snipped works perfectly. When I populate the href field of the social icons with a url, for example:

<li class="nav-item"><a href="https://twitter.com" class="nav-link px-2"><i class="fab fa-lg fa-twitter"></i></a></li>

then the navbar stops changing color when scrolled. it seems this behavior only happens for large screen sizes while everything seems fine when the navbar is collapsed.

Code line 92 different

Sorry! Just letting you know that the code line 92 is different in the preview and different in the downloadable code.

Get Started!

Thanks for the amazing theme!

Collapse conflict

In v4, it appears the scrolling effect in creative.js is conflicting with the bootstrap collapse feature. In the current commit of Creative, collapse works with button tags, but not anchor tags, since it utilizes the # urls too.

It appears to be caused by this new method in creative.js:
$('a[href*="#"]:not([href="#"])').click(function() {

How to add images to gallery categories in the portfolio section?

Gallery section (portfolio): How do I configure the gallery to show images per categories only? Currently the gallery shows all images from all categories and not only the one that the user selects. How to make the gallery working to only show the pictures from a specific category and not all pictures from all categories? Any feedback is highly appreciated....

How do you change a stroke color of hamburger icon?

I noticed
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)
shows a hamburger icon, but Is it possible to change three stroke colors?

Changing Orange Color

Hi love your theme am just having trouble changing the orange to a green color.

Have spent 3 days on it to no avail.

Could you please assist.

Kindest regards

Aaron

Button not centering on all display widths

Upon adding a button to this section of the theme, the button is correctly centered in my preview window, but if I extend it just a bit or to full width, it jumps to the left. I've tried but I cannot get it to work for the life of me.

screen shot 2016-03-16 at 7 13 31 pm
screen shot 2016-03-16 at 7 13 42 pm

Too little vertical margin in the Contact section in mobile

There is too little vertical margin between the Contact section elements on mobile resolutions.

See how the envelope icon is almost touching the phone number. There should be more margin between those elements.

bootstrap_template_margin_issue

Version: 5.1.4
Browser: Chrome 75 with resolution set to "iPhone X" from dev tools

scrollSpy is not a function

Getting this error:

Uncaught TypeError: $(...).scrollSpy is not a function creative.js:20

Uncaught TypeError: Cannot read property 'classList' of null classie.js:36

How to get over it??

Issue with Ad-Blockers

Hi, I am using this amazing template for a personal project, but, I find that when navigating through it, suddenly it jumps to top and the navigation bar goes transparent (I leave an OK image and an image with the issue).

1
2

To "fix" it, I had to disable adblock and popup blockers, weird. In order to avoid disabling this, I had to remove at the CSS (creative.css/creative.min.css) the following beginning lines:

body,
html {
  width: 100%;
  height: 100%;
}

Hope it helps to anyone with same problem.

A.

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.