Git Product home page Git Product logo

startbootstrap-clean-blog's Introduction

Clean Blog is a stylish, responsive blog theme for Bootstrap created by Start Bootstrap. This theme features a blog homepage, about page, contact page, and an example post page along with a working PHP contact form.

Preview

Clean Blog 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.

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.

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.

Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

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-clean-blog's People

Contributors

besrourms avatar coliff avatar davidtmiller avatar finalangel avatar initplatform avatar irineos1995 avatar maccath avatar mrpowers avatar svanimpe avatar tarabass 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

startbootstrap-clean-blog's Issues

Social media buttons

When I modify any of the original text the social media buttons disappear... Any solutions?

Media query for masthead

I would like to serve different images as background in the <header class="masthead"> element. The actual image would be chosen with media query on the device's size (basically, always the same figure but with different file size).
I was wondering if it's something you've already done, or if you have suggestions/templates.
Cheers

Change Jquery script into Vanilla JS

Hi, I am trying to include React on this theme...
Bootstrap is already replace and everything is fine, even the requirement with jquery.
Now I want to remove jquery also from the clean-blog.js
The option A is doing it with React 100%. (Is what I am going to do)
And the option B, for no expert users is to stop using jquery, and use Vanilla js.

Just that! good luck! .

No comments section

I like this template and I was disappointed when I found there was no comments section on the single post page. :(

Contact Form Broken

Nothing I do can get the contact form to work. Have change the line in the PHP file with an email account that isn't gmail/hotmail. Form submits but never receive mail.

Bootstrap navigation dropdown link text not visible

This is regarding the Bootstrap navigation component (http://getbootstrap.com/components/#navbar-default)

I have added the following HTML to the right area of the navigation bar:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</li>

However, on utilising this drop-down link, the links within the drop down menu are not visible unless you scroll down on the page (and thereby the links remain invisible if the page doesn't scroll).

I am happy to submit a fix for this.

Links in social buttons

When adding my own links to the social buttons, they only work if I right-click and choose "open in new tab". If pressed "normally" it re-directs to a blank page, URL still says page adress. When tested in Edge I get an error message saying "This content can not be displayed in a frame". As far as I'm concerned there are no frames on the page that would cause this. I've also tried creating links outside of bootstrap the same problem occur with these.

No pagination

I know the template has a pager. Could you add pagination too?

Background issues

Hey there! Love this blog theme! I use it at http://ashfurrow.com/ and I've enjoyed learning from your code.

One thing is that intro-header's background colour isn't respected, at least on Safari. It's always white. I think that I've narrowed the problem down to these few lines:

.intro-header {
    background-color: @gray; 
    background: no-repeat center center; 

The first line sets the background colour, but it's overriden by the following background: specifier. I switched the order of the two lines and it worked for me.

Thanks again!

Compile one CSS file only with Sass

Hello,

I see you include 2 css file, 1 for bootstrap, and one for the theme
I try to compile 1 CSS file only with Sass, but i can't get it to work
How to achieve it ?
Here is what i've tried :

@import 'node_modules/bootstrap/scss/bootstrap';

@import "variables.scss";
@import "mixins.scss";
@import "global.scss";
@import "navbar.scss";
@import "masthead.scss";
@import "post.scss";
@import "contact.scss";
@import "footer.scss";
@import "bootstrap-overrides.scss";

As you can see, the btn-primary color is not overrided (default bootstrap blue ?) :


Img


Thanks for your help

Can I use your theme as my site template?

As per definition this is not an issue. I like your template and it's simplicity. Can I use it for my personal site blog. nothing professional. I honor copyrights.

Contact Form

Hi, For my web page I am using only the contact form, But I am having an issue with it's implementation I got constantly the message. Sorry it seems that my mail server is not responding. Please try again later!
Any recommendation to make it work in hosting live. Thanks in advance.

Rendering content other than posts

I'm trying to insert an interactive map in the body of the bootstrap theme around line 73. I noticed the map only renders if I remove the line < div class="col-lg-8 col-md-10 mx-auto" >, but when that happens, the map renders over the page. If I keep the line in, the map is not visible.

IE - scrolling issue with navbar when scrolling up.

When scrolling up in IE the navbar is showing, but hiding again when stop scrolling. To fix this replace

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
    var MQL = 1170;

    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
        var headerHeight = $('.navbar-custom').height();
        $(window).on('scroll', {
                previousTop: 0
            },
            function() {
                var currentTop = $(window).scrollTop();
                //check if user is scrolling up
                if (currentTop < this.previousTop) {
                    //if scrolling up...
                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
                        $('.navbar-custom').addClass('is-visible');
                    } else {
                        $('.navbar-custom').removeClass('is-visible is-fixed');
                    }
                } else {
                    //if scrolling down...
                    $('.navbar-custom').removeClass('is-visible');
                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                }
                this.previousTop = currentTop;
            });
    }
});

with

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
    var MQL = 1170;

    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
        var headerHeight = $('.navbar-custom').height();
        $(window).on('scroll', {
                previousTop: 0
            },
            function() {
                var currentTop = $(window).scrollTop();
                //check if user is scrolling up
                if (currentTop < this.previousTop) {
                    //if scrolling up...
                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
                        $('.navbar-custom').addClass('is-visible');
                    } else {
                        $('.navbar-custom').removeClass('is-visible is-fixed');
                    }
                } else if (currentTop > this.previousTop) {
                    //if scrolling down...
                    $('.navbar-custom').removeClass('is-visible');
                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                }
                this.previousTop = currentTop;
            });
    }
});

Contact form using formspree is broken

Dear developpers,

I am using the template designed for Github.
The contact form implemented in this template use formspree.io to redirect emails as github only accept static pages (not php).K

Nevertheless, I have the message "Sorry XXX, it seems that my mail server is not responding. Please try again later".
The fact is I do not received the email from formspree.io to validate my account. I try several e-mail accounts, I do not received this email.

Do you have ideas to fix this?

best

Cannot /Get

I try to run node index.js and get this error in ther browser

Video responsive ?

Has anyone been able to figure out why the script will not allow for responsive videos ?

Separate bootstrap css

Hello,

Is there any way to have separate files for css?
One to import bootstrap and one for bootstrap overrided values?

ActionView::Template::Error: Invalid CSS in cleanblog.css

When using Capybara to test a RoR application that uses this project's CSS, an error occurs as the sass gem parses the css.

The error is: ActionView::Template::Error: Invalid CSS after "...orm-group::not(": expected pseudo_expr, was ":first-child)"

I found reference to this same error on Stack Overflow from someone who encountered the problem when pushing a rails app that uses the blackrockdigital/startbootstrap-freelancer to Heroku. The post is located at http://stackoverflow.com/questions/29895297/sasssyntaxerror-invalid-css-after-orm-groupnot-expected-pseudo-expr

NPM cannot find module

This was working yesterday but when I ran NPM start today I got this error. I am new to using NPM. Error: Cant find module C:\inetpub\wwwroot\Sites\blog\startbootstrap-clean-blog-gh-pages\index.js

Metalsmith SSG build synergy?

Hi David,
I am looking to provide some basic "starter repo's" for Metalsmith SSG, so I converted this template so it can be immediately edited and added to as a static site: https://github.com/metalsmith/startbootstrap-clean-blog. Thx to metalsmith's unopinionated nature, I had to alter almost nothing from the sources and was done in +- 2 hours. In the process of doing so, I wondered if perhaps startbootstrap could benefit from using metalsmith as the build pipeline: metalsmith can do all what the scripts files do and would allow users to write content in markdown and build more easily upon the existing template (and soon I will also add an esbuild bundler plugin).

I am aware static sites are not the only use case of these generic templates, but would argue the result is still more usable for any use case as the data is externalized. Also to be noted is that if you don't like the markdown, the content pages can also be pug templates (using @metalsmith/in-place)

It's also definitely a win for metalsmith because the alternative is (what I just did) forking the templates and manually keeping them in sync. Please clone the fork when you have some time and see if you like the added value it provides

FontAwesome envelope icon is not displayed

Using the envelope icon from FontAwesome does not work. It just shows an empty disc (circle).

<li class="list-inline-item">
    <a href="mailto:{{ $owner_email }}" target="_blank">
      <span class="fa-stack fa-lg">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-envelope fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>

Implement a scroll up button

Please implement a scroll up button with smooth scrolling in pages. This is I guess rather easy to implement. I am talking about buttons that appear after you start scrolling down and then pressing them gets you to the very top of the page.

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.