We’ve put a lot of thought into all Baasic stater kits: easy setup and simple usage were our main guiding principles. Clone, install, serve and build - that’s basically all you have to know to run your own blog.

Blog starter kit themes

So, you’ve cloned the Baasic Starter Kit of your choice from our GitHub repo and installed all project dependencies - what’s next?

Blog starter kit folder structure

Everything you need to start the development is placed inside of the src folder. Angular’s directives and controllers are placed inside the app folder and themes are in the themes folder.

Blog Starter Kit Folder Strucutre

Themes and templates

Lets look at the theme structure: the folder assets contains all your assets, such as images, scripts, fonts, etc. src folder holds your unprocessed CSS files. Inside of the templates folder you will find your markup files.

Blog Starter Kit folder structure

Templates consist of multiple HTML files and are made in accordance with the DRY approach. Every HTML file holds a chunk of code for the different section of the template. The main advantage of the DRY approach is maintainability - for example, we have only one file for the footer section which is used on almost every page, so when we edit the footer file changes apply across the entire site.

You can use relative paths in your theme. If you need to load image from the folder theme-name/assets/img it should look like this:

    <img src="/assets/img/image-name.jpg" />

Same goes for the background-image in CSS files:

    ...
    background-image: url(assets/img/some-image.jpg);
    ...

In the templates folder, every module has its own folder with markup files. Some markup files contain only AngularJS directives. One of such files is blog-home.html which has directive with attribute page-size="5". This value represents the number of posts per page, so you can adjust it to your needs.

There are some markup files in the root of the templates folder. - 404.html is used for error 404 - Page not found. - login.html is a page with directives for login and social login. main.html contains directive <main ui-view></main> which opens different pages when you click on navigational links, but also can contain different elements such as sidebar or footer which appears on more pages. - master.html contains loading animation, but can contain any markup that you want to show. - markdown-syntax-highlight.html acts as a help page or a cheat-sheet for markdown syntax while writing blog posts.

CSS files are also grouped by their functionality. Every CSS file is focused on a single feature - block, element, variable, utility class or plugin, resulting in a more maintainable CSS codebase. If you want to change the color of the theme, just change color variables in the vars.colors.css file and if you want to change layout - there is CSS file for that too.

CSS files

Creating a new theme

There are two ways to create a new theme for the blog starter kit. You can reuse and customize an existing theme if it already has pieces of functionality you need, or you can start from the default theme.

No matter which approach you choose, it will be a good idea to copy the theme (any theme you choose) and change its name.

Customizing the existing theme is rather easy. The majority of the work can be done solely by altering the existing CSS files.

Main CSS file is app.css - it has references to all other CSS files included in the post processed output CSS file. If you made a new CSS file you want to add it to your theme, you should include it in the reference list in app.css. It contains a line which references the google font used by the theme. You can include as many fonts as you want, but you should have good UX practices in mind.

It is important to mention support for the optional blog menu template - its template file should be placed in templates/utils/ folder named blog-menu.html.

Blog menu template looks like this:

<div class="row">
    <div class="sidebar" role="banner">
        <header role="banner" class="header group">
            <div class="group spc--bottom--lrg">
                <a ui-sref="master.main.index"><h1 class="logo">Baasic Starter Kit Blog Platform</h1></a>
                <a href="javascript:void(0)" ng-click="menuOpened=!menuOpened" ng-class="{'nShow': menuOpened}" class="menu-toggle"><span></span></a>
            </div>
        </header>
        <div class="sidebar__container">
            <div class="sidebar__widget">
                <div class="header__controls" ng-class="{'expand': menuOpened}">
                    <div class="search">
                        <form ng-controller="SearchCtrl" novalidate ng-submit="searchBlog()">
                            <input class="input--search" placeholder="Search..." type="search" ng-model="searchFor" />
                            <button type="submit" class="btn--search"></button>
                        </form>
                    </div>
                </div>
                <p class="header__desc" ng-class="{'expand': menuOpened}">"It's very important not to embellish on your order. No extraneous comments. No questions. No compliments."<span class="header__auth">Jerry Seinfeld, "The Soup Nazi"</span></p>
            </div>
            <nav class="sidebar__navigation" role="navigation" ng-class="{'expand': menuOpened}">
                <h2 class="sidebar__title">Recent Tags</h2>
                <ul class="tags group" ng-controller='MainCtrl'>
                    <li class="tags__item" ng-repeat="tag in tags">
                        <a ui-sref="master.main.blog-search({ tags: tag.slug })" class="tags__link " title="{{ tag.tag }}">{{ tag.tag }}</a>
                    </li>
                </ul>
            </nav>
            <div class="sidebar__widget header__share" ng-class="{'expand': menuOpened}">
                <h2 class="sidebar__title">Spread the word</h2>
                <ul class="smm group">
                    <li class="smm__item">
                        <a class="smm__link" href="https://www.facebook.com/">
                            <img src="assets/img/smm-facebook.svg" alt="Facebook" class="smm__icon">
                        </a>
                    </li>
                    <li class="smm__item">
                        <a class="smm__link" href="https://www.linkedin.com">
                            <img src="assets/img/smm-linkedin.svg" alt="LinkedIn" class="smm__icon">
                        </a>
                    </li>
                    <li class="smm__item">
                        <a class="smm__link" href="https://twitter.com/">
                            <img src="assets/img/smm-twitter.svg" alt="Twitter" class="smm__icon">
                        </a>
                    </li>
                    <li class="smm__item">
                        <a class="smm__link" href="https://github.com/">
                            <img src="assets/img/smm-github.svg" alt="GitHub" class="smm__icon">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidebar__widget" ng-class="{'expand': menuOpened}">
                <h2 class="sidebar__title">Admin</h2>
                <div ng-if="$root.user.isAuthenticated">
                    <p class="sidebar__message">Welcome, {{ $root.user.displayName }}</p>
                    <button ng-controller="MainCtrl" type="button" class="btn btn--primary btn--med" ng-click="newBlogPost()">New post</button>
                    <baasic-logout on-logout="setEmptyUser()">
                    <button type="button" class="btn btn--secondary btn--med" ng-click="logout()">Logout</button>
                </baasic-logout>
            </div>
            <div ng-if="!$root.user.isAuthenticated">
                <p class="sidebar__message">To create new blog please </p>
                <a class="btn btn--primary btn--med" ui-sref="login">login</a>
                <a class="btn btn--primary btn--med" ui-sref="register">register</a></div>
            </div>
            <footer class="footer" role="contentinfo">
                <div class="footer__info">
                    <p>Copyright @ Blog name</p>
                </div>
                <div class="footer__poweredby">
                    <p>Powered by <a href="http://www.baasic.com">Baasic</a></p>
                </div>
            </footer>
        </div>
    </div>
</div>

You can put some markup in the blog-menu.html, style it using CSS and call it whenever you need it via the <blog-menu> directive.

<div class="header header--home">
    <div class="header header--gradient">
        <blog-menu></blog-menu>
        <h2 class="header__title">work hard, dream big</h2>
    </div>
</div>

Make sure you style all the screens and blocks/elements in your theme. Here is a complete list of pages that may require changes:

  • blog list page (homepage)
  • single blog post
  • add/edit blog post form
  • login page
  • register page
  • password recovery and password change pages
  • account activation page
  • search results page
  • 404 page

Here are also some elements that you should pay attention to:

  • header
  • logo
  • navigation
  • search field and button
  • tags
  • buttons
  • forms
  • typography
  • social icons
  • footer

When embarking on the journey of making your theme from scratch, the default theme will serve as a skeleton of the new theme. The default theme is a fully functional plain HTML template without any classes or CSS styles or CSS files. This is “blank slate” starter theme for those who would like to create their own theme from scratch.

Default theme

It contains markup files, favicon and configuration file. Assets folder and folder structure should be same as in other themes. Some things must be precisely named and located as they are referenced in gulp file tasks such as serve and dist.

If you are using a directive for the blog menu, blog-menu.html file must be in the templates/utils folder. CSS files must be placed in theme-name-folder/src/ folder and the main CSS file that holds all references to other CSS files must be named app.css. Here is how to reference other CSS files:

/*------------------------------------*\
    # Application CSS file
\*------------------------------------*/

/*
* Fonts
*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,300,400italic,700,700italic);

/*
* Variables
*/

@import "vars.defaults.css";
@import "vars.colors.css";
@import "vars.responsive.css";
@import "vars.typography.css";

/**
* Generic styles
* Default style setup for reseting or normalizing our CSS
*/

@import "generics.normalize.css";
@import "generics.boxmodel.css";

/**
 * Base styles
 * The base global classes and styling
 */

@import "base.container.css";
@import "base.globals.css";
@import "base.typography.css";
@import "base.viewtransitions.css";

/**
 * Core
 */
@import "core.styledtext.css";


/**
* Project specific modules
* All our modules such as buttons, inputs, labels, tables etc.
*/

@import "modules.anchor.css";
@import "modules.row.css";
@import "modules.alert.css";
@import "modules.grid.css";
@import "modules.input.css";
@import "modules.loader.css";

/**
* Project specific components
* All project components such as headers, footer, bars, dropdowns etc.
*/

@import "components.logo.css";
@import "components.profile.css";
@import "components.btn.css";
@import "components.bg.css";
@import "components.layout.css";
@import "components.form.css";
@import "components.styledtext.css";
@import "components.header.css";
@import "components.footer.css";
@import "components.tags.css";
@import "components.smm.css";
@import "components.article.css";
@import "components.post.css";
@import "components.editor.css";
@import "components.searchresults.css";
@import "components.pager.css";
@import "components.message.css";

/*@import "components.componentname.css";*/


/**
* Project specific external plugins
* All project Sass or CSS plugins such as Select2, Dropit etc.
*/

@import "plugins.tageditor.css";


/**
* Common classes
* Class helpers such as push, pull, radius etc.
*/

@import "util.group.css";
@import "util.floats.css";
@import "util.spacers.css";
@import "util.radius.css";
@import "util.displays.css";

If you want to include the additional functionality to your blog, you can implement it very easily. We have implemented a few additional features in the event-minimal theme, and here is a separate post describing how to achieve that.

Building steps

As always, all plugins and gulp tasks are contained within the gulpfile.js in the root folder.

You can change your default theme by adding your own theme name:

var theme = g.util.env.theme || '<your-theme-name>';

Alternatively, you can leave the default theme as is and watch your theme with this gulp command:

gulp serve –-theme your-theme-name

By default, Gulp is serving files on localhost:3000.

Baasic API is what gives soul to your blog – texts, images, tags, users etc. Starter kit includes a configuration file where you define your api key. We have provided several themes for the starter kit and each of them has its own configuration file. You can define your api key in one place and all themes will use it. This is useful when you want to try different themes with the same data.

If you have several apps (and api keys), you can assign different keys to themes, so each theme can have its own data. Serving multiple blogs from a single folder has never been easier.

In the app.conf.json file (in the starter kit root folder for all themes, or separately in each theme folder) you can configure the api key:

{
    "apiKey": "<your-unique-api-key>"
}

It’s time to deploy our blog and see how it looks in a real-world scenario.

To do so, enter following command at the command prompt:

gulp dist --theme 'your-theme-name'

Or if you’re working with the default theme just enter:

gulp dist

Now, we have our files ready for upload in the dist folder.

Base path

If you want to place your app somewhere other than the root of your domain, an additional step is required. After dist task finishes, go to your dist folder, open index.html and modify <base href=”/”> as described in the example below.

<html ng-app="app">
    <head>
        <base href="/your-path/" />
        ...
    </head>
    <body>
        ...
    </body>
</html>

Conclusion

Creating a blog theme has never been easier. With just a few changes to the existing theme you can get personalized themes for your blogs very quickly. If you feel confident and adventurous you can even make your own theme from scratch. You can also add custom features if you need them. We encourage you to jump in and try Baasic blog starter kit to see how easy it is to run your own blog without dealing with servers, databases and advanced programming concepts.

Feel free to leave a comment

comments powered by Disqus