NoBlackMagic Theme

Responsive HTML theme for blogs and websites.

PROPERTIES

• beautiful responsive: smartphone / tablet / desktop optimized
• hight configurable responsive behaviors
• TwitterBoostrap available for stylish contents
• full editable LESS source
• dropdown menu on smatphones
• floating sidebar on small tablets
• fixed sidebar on desktop

TODO:

• IE10+ check... may be 9+??

First Install

As soon as you clone or download this package you need to use NPM to solve required developement dependencies then run the default GruntJS task to build it.

npm install && grunt

You need the lates NodeJS and NPM versions installed on your machine!

Development Server

node server.js

Then open a web browser and point to:

http://localhost:8080

Deal With Sources

All theme sources are stored in /src folder.

Because this is just a theme you can run the index.html file and it should display the fully functional theme just after cloning or forking this repository

LessCSS

All theme styles are build with LessCss. The main LESS source which drive all the others is src/less/noblackmagic.less.

When you start a LESS working session you should activate an utility which compile the LESS sources into a plain CSS file which is already linked into index.html:

grunt watch-less

Now you can edit your LESS source and see the results directly on the browser.

3rd party CSS

<!--[CSS]-->
<link rel="stylesheet" href="./css/noblackmagic.css" />
... add other css here ...
<!--[/CSS]-->

then list all 3rd party styles in build.json

{
  "css": [
    "src/css/noblackmagic.css"
    "src/css/addon-style",
    ...
  ]
}

3rd party Javascript

<!--[JS]-->
<script src="js/noblackmagic.js"></script>
... add other scripts here...
<!--[/JS]-->

then list all 3rd party scripts in build.json

{
  "js": [
    "src/js/noblackmagic.js",
    "src/js/library-01",
    ...
  ]
}

Build a Production Theme

NoBlackMagic can be processed to optimize all required CSS and Javascript into concatenated and minified files.

// build the production sources
grunt build

Then you can open the /build folder to enjoy the theme ready to be used for production.

• single minified CSS
• single minified Javascript
• strip all demo text

IMPORTANT: all 3rd party CSS and Javascript must be listed into build.json as described above!