{"id":21135498,"url":"https://github.com/kelyvin/ghost-caffeine-theme","last_synced_at":"2025-03-14T12:44:10.214Z","repository":{"id":2125917,"uuid":"45766434","full_name":"kelyvin/ghost-caffeine-theme","owner":"kelyvin","description":"A minimalist, Material Design inspired Ghost Theme for optimal desktop and mobile experiences","archived":false,"fork":false,"pushed_at":"2023-04-16T20:37:19.000Z","size":4398,"stargazers_count":334,"open_issues_count":17,"forks_count":97,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-01-21T06:43:29.129Z","etag":null,"topics":["blogging","caffeine","ghost","ghost-blog","ghost-installation","ghost-theme","ghost-themes","publishing","themes"],"latest_commit_sha":null,"homepage":"https://caffeinecoding.com","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kelyvin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-08T04:10:12.000Z","updated_at":"2024-12-17T12:13:20.000Z","dependencies_parsed_at":"2023-07-08T16:32:09.607Z","dependency_job_id":null,"html_url":"https://github.com/kelyvin/ghost-caffeine-theme","commit_stats":{"total_commits":174,"total_committers":16,"mean_commits":10.875,"dds":"0.14942528735632188","last_synced_commit":"be52a8caad399c37f1e4c07032ce62930cd9e7c8"},"previous_names":["kelyvin/caffeine-theme"],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelyvin%2Fghost-caffeine-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelyvin%2Fghost-caffeine-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelyvin%2Fghost-caffeine-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelyvin%2Fghost-caffeine-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kelyvin","download_url":"https://codeload.github.com/kelyvin/ghost-caffeine-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243581061,"owners_count":20314163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blogging","caffeine","ghost","ghost-blog","ghost-installation","ghost-theme","ghost-themes","publishing","themes"],"created_at":"2024-11-20T06:56:03.982Z","updated_at":"2025-03-14T12:44:10.180Z","avatar_url":"https://github.com/kelyvin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Caffeine Theme [![Build Status](https://travis-ci.org/kelyvin/caffeine-theme.svg?branch=master)](https://travis-ci.org/kelyvin/caffeine-theme) [![GitHub version](https://badge.fury.io/gh/kelyvin%2Fcaffeine-theme.svg)](https://github.com/kelyvin/caffeine-theme/releases)\n\n![Caffeine Coding](http://i.imgur.com/NiugCmL.png)\n\n## Read before use\nThank you so much for your support and contributions for the past 6+ years. The Ghost Foundation has evolved immensely in the past several years and their [current collection of free/paid themes](https://ghost.org/themes/) have gone a lot further than when I originally started this project. Because of this and a shift of personal priorities, I will **no longer be actively developing this theme** and any future updates will no longer be coming from me. I will still try to merge in a PR every now and then, and if anyone is passionate about continuing support, plesae reach out to me and I can make you a contributor. Thank you again for your years of support!\n\n## Introduction\n\n**Caffeine Theme** is a Material Design inspired theme for the [Ghost](https://ghost.org?lmref=744)publishing platform. It originally began as a fork of [Uno-Zen](https://github.com/Kikobeats/uno-zen), but has since been drastically changed. Huge thanks to the original creator for the original theme layout and inspiration.\n\n**The theme is super easy to configure,** with almost no code change necessary! Simply follow the customization options [below](#customizations).\n\nYou can check out the theme in action on my official blog [Caffeine Coding](https://www.caffeinecoding.com)\n\n## Ghost Versions Support\n\nThis theme has been upgraded to `v4.0.0` to support the latest version of `Ghost v2.*`. If you still need theme support for `Ghost v1.*`, you can download the [Caffeine Theme v3.0.6](https://github.com/kelyvin/caffeine-theme/releases/tag/v3.0.6) release. If you are still on `Ghost v0.11.*`, you can download [Caffeine Theme v2.9.0](https://github.com/kelyvin/caffeine-theme/releases/tag/v2.9.0) release.\n\n**Note**: because this theme maintains a certain style, you will not be able to take advantage of the [Image Size Options](https://themes.ghost.org/docs/ghost-editor#section-image-size-options) of Ghost v2. If you'd like to have more image sizing options, please provide a potential solution (that works well with the design) and make a pull request.\n\n### Table of Contents\n\n- [Theme Features](#theme-features)\n- [Installation](#installation)\n  - [Option 1](#option-1)\n  - [Option 2](#option-2)\n  - [Option 3](#option-3)\n  - [Add JQuery and other libraries](#add-jquery-and-other-libraries)\n- [Customizations](#customizations)\n  - [General Settings](#general-settings)\n  - [Number of Posts](#number-of-posts)\n  - [Header icon](#header-icon)\n  - [Favicons](#favicons)\n  - [Tags Overlay](#tags-overlay)\n  - [Google Analytics](#google-analytics)\n  - [Disqus Comments](#disqus-comments)\n  - [Masonry Grid Layout (beta)](#masonry-grid-layout-beta)\n  - [Mailchimp](#mailchimp)\n  - [Toast Notifications](#toast-notifications)\n  - [Cover](#cover)\n    - [Cover title](#cover-title)\n    - [Cover subtitle](#cover-subtitle)\n    - [Disable Cover](#disable-cover)\n  - [Links](#links)\n  - [Browser Compatibility Page](#browser-compatibility-page)\n  - [Custom static pages](#custom-static-pages)\n  - [Social Networks](#social-networks)\n  - [AMP Support](#amp-support)\n  - [Syntax highlight support for additional languages](#syntax-highlight-support-for-additional-languages)\n- [Developing and Contributing](#developing-and-contributing)\n  - [File System](#file-system)\n  - [Building](#building)\n  - [Colors](#colors)\n  - [Preparing for production](#preparing-for-production)\n\n## Theme Features\n\nBecause Caffeine Theme draws inspiration from Material design practices, you'll see familiar design patterns throughout the theme, such as cards, several buttons, etc.\n\nLike the original Uno-zen theme that helped provide the skeleton for this project, there may still be some shared similiaries with the original project. However, there are some vast changes as well, especially around the mobile experience and animation logic.\n\nThe following is a list of key differences that include, but are not limited to:\n\n- **Masonry** support for pinterest-esque grid layouts\n- **Scroll reveal** support for Google+ like rendering\n- **Mailchimp** integration and support for email subscriptions\n- **Font-awesome** support to use the latest icons from Font Awesome\n- **Toast notifications** support to keep your users informed when they hit your home page\n- **Prismjs** support for syntax highlighting in your posts\n- Special browser compatibility page for IE9 and below.\n- Mobile-first driven experience\n- Improved responsiveness for dynamic screen widths (no more hard-refreshing the page)\n- A search and tag overlay that can be used on both the desktop and mobile experience\n- Bigger emphasis on the splash page\n- Smoother animations and style\n\n## Installation\n\nYou can install this theme in one of three ways, but the last two options require `git`.\n\n### Option 1\n\nDownload the latest release on [Github](https://github.com/kelyvin/caffeine-theme/releases), download the zip, extract the folder, and paste it into your theme folder (`content/themes`) of your Ghost installation\n\n### Option 2\n\nEnter the theme folder (`content/themes`) of your Ghost installation and paste the following command:\n\n```bash\n$ git clone https://github.com/kelyvin/caffeine-theme\n```\n\n### Option 3\n\nIf you have your Ghost blog hosted on git and you want to continuously get the latest updates, you can add this repo as a submodule. Create a `.gitmodules` file in your root Ghost installation and add the following like so:\n![](http://i.imgur.com/r6mN5U4l.png)\n\n## Add JQuery and other libraries\n\nThis theme needs jQuery to work, but jQuery is not provided by the theme. Instead, you need to inject it into the `Blog Footer` in the `Code injection` of your Ghost installation:\n\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js\"\u003e\u003c/script\u003e\n\n```\n\nIn addition, this theme also takes advantage of [Masonry](http://masonry.desandro.com/) to provide a nicer grid layout and [Scroll Reveal](https://scrollrevealjs.org/) for sleek scrolling animations. These are not mandatory and fallbacks are also provided for both. If you would like these feature(s), inject the following code as well. (Note: imagesloaded is not necessary, but recommended for smooth masonry layouts).\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/masonry-layout@4.0/dist/masonry.pkgd.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/scrollreveal.js/3.0.9/scrollreveal.min.js\"\u003e\u003c/script\u003e\n\n```\n\nAt the end, it should probably look something like this:\n![](http://i.imgur.com/AqE46Sr.png)\n\n## Customizations\n\nAs mentioned earlier, this theme is very easily configurable to suit your needs. Every feature of the theme that you can easily customize will be listed below.\n\n### General Settings\n\nMake sure to set up some of your default settings within your Ghost Admin panel → `General`. By setting your blog title, description, cover, logo, and posts per page, you will be able to maximize the capabilities of this theme.\n\n### Number of Posts\n\nWith ghost migrating to v1, to set the number of posts per page, you'll have to configure a file within the theme directly. The configuration is set within the `package.json`. To adjust it, you'll need to modify the following:\n\n```javascript\n\"config\": {\n    \"posts_per_page\": 6\n}\n```\n\n### Header icon\n\nOn every page there is an icon on the upper-left hand corner that will open the splash screen. If you'd rather set your own icon, overwrite the `icon.png` within `assets/img/icon`. Or, if you rather not use an icon, you can simply open up the `partials/header.hbs` and uncomment the following line:\n\n```html\n\u003cimg src=\"{{@site.logo}}\" alt=\"{{@site.title}} avatar\" class=\"avatar rounded hvr-buzz-out\" /\u003e\n```\nand delete the following line:\n\n```html\n \u003cimg src=\"{{asset \"img/icons/icon.png\"}}\" alt=\"{{@site.title}} icon\" class=\"icon rounded hvr-buzz-out\" /\u003e\n```\n\n### Favicons\n\nCreate your favicons with [Favicon Generator](http://realfavicongenerator.net/) and place them in in `assets/img/icons` or whatever folder you feel comfortable with.\n\n### Tags Overlay\n\nTo purpose of the tags overlay is to display a list of popular tags that you want your users to easily find and navigate to. You can continuously add to this list to create an \"infinite\" list of tags.\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar tag_names = ['code', 'career'];\n\u003c/script\u003e\n```\n\n*Note: Ghost currently does not have a \"production\" ready feature to easily find your list of tags, so this is the temporary solution until that feature is more broadly supported.*\n\n### Google Analytics\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar ga_id = 'UA-YOUR_ID_HERE';\n\u003c/script\u003e\n```\n\n### Disqus Comments\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar disqus_shortname = 'YOUR_DISQUS_SHORTCUT_HERE';\n\u003c/script\u003e\n```\n\n### Masonry Grid Layout (beta)\n\nBy default this theme will create a two column grid layout if you decided to import the Masonry package as described in the [instructions above](add-jquery-and-other-libraries). If you didn't import the package, the theme will render a single column grid.\n\nYou can customize the number of columns you'd like your home page to render by simply specifying the number in the following option.\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar gridOptions = {\n    columns: 3\n};\n\u003c/script\u003e\n```\n\nThis will change the theme to use a 3 column grid. Feel free to experiment the grid columns with the number of posts you want to show on each page to get the experience that you want!\n\n*Note: This feature is still somewhat experimental and you may see some jumpy animations*\n\n### Mailchimp\n\nThis theme easily enables you to create a Mailchimp subscription sign-up. We are using [Hello Byte's subbscribe](https://github.com/shlomnissan/subbscribe) library to create an opt-in popup form. Due to its lack of support for a package manager, I have included its assets as part of this project. I will try to keep that updated regularly as needed.\n\nTo enable this feature, you'll need to obtain your Mailchimp embed signup form action URL, which is documented [here](http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms). Then inject it into your blog header like the example below.\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar mailchimpOptions = {\n    url: \"//1bytebeta.us9.list-manage.com/subscribe/post?u=1c261e60d8259c0c636801494\u0026amp;id=7fa99bf359\"\n};\n\u003c/script\u003e\n```\n\nYou **must** set the `url` option for the subscribe button to appear properly. Otherwise, you can modify the contents of the subscribe button by simply adding more options to `mailchimpOptions`. The following list of options are supported and you can edit them to your liking:\n\n```javascript\nvar mailchimpOptions = {\n    url: \"//1bytebeta.us9.list-manage.com/subscribe/post?u=1c261e60d8259c0c636801494\u0026amp;id=7fa99bf359\",\n    title: \"Never miss a post!\",\n    text: \"Stay up to the date with the latest posts from Caffeine Coding!\",\n    name: \"\u003ca href='https://www.facebook.com/caffeinecoding' target='_blank'\u003e@caffeinecoding\u003c/a\u003e\",\n    color: \"#56817A\",\n    thumbnail: \"http://i.imgur.com/39erIwp.png\"\n};\n```\n\n### Toast Notifications\n\nThis theme has support with [toastr](https://github.com/CodeSeven/toastr) to create custom notifications on your blog for your users to see. You can configure the notification through the Ghost admin panel, as seen in the example below:\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar notificationOptions = {\n    type: \"info\",\n    message: \"I want to show this message\",\n    isShownOnce: true,\n    escapeHtml: false\n};\n\u003c/script\u003e\n```\n\nThe `type` will define the type of notification to render, the `message` will display the message to render, `escapeHtml` will specify whether to escape the message to render HTML, and `isShownOnce` will set whether to only show our users the notification once.\n\n**Note**: `isShownOnce` will be determined by setting a value in local storage that is set to the `message`. So if your message changes, the local storage value will be set to the new message. We determine whether to show the notification based on whether the current notification message is equal to their last visit.\n\n### Cover\n\nGo to Ghost Admin panel → General → `Blog Cover`\n\n#### Cover title\n\nBy default, the title that you see in the cover page of your blog is extracted from your blog settings (Admin panel → Blog Title).\n\nIf you want to customize it, you can do it like so:\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar profile_title = 'Caffeine Theme';\n\u003c/script\u003e\n```\n\n#### Cover subtitle\n\nThe purpose of the subtitle is to describe your bio in a quick phrase.\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar profile_resume ='Software Engineer';\n\u003c/script\u003e\n```\n\n#### Disable Cover\n\nIf you'd like to disable the cover and go directly to the home page, you can simply add the following code to the code injection.\n\nGo to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\nvar disableCover = true;\n\u003c/script\u003e\n```\n\n### Links\n\nGo to Ghost Admin panel → `Navigation` and add/edit items.\n\nThe \"Home\" link is always included by default, so you don't need to add it manually.\n\n### Browser Compatibility Page\n\nThis theme includes a special browser compatibility page for users who use IE9 and below. You can enable it by creating a static page with the post url as `browser-compatbility`, as seen in the example below.\n\n![](http://i.imgur.com/unIDJxOl.png)\n\n### Custom static pages\n\nCheck out the official [documentation](http://themes.ghost.org/docs/page-context) on Ghost.org.\n\n### Social Networks\n\nTo manage your social networks, you'll need to provide a custom config option. \n\nFor Facebook and Twitter links, go to Ghost Admin panel → General → `Social accounts`.\nFor LinkedIn and Github links, go to Ghost Admin panel → `Code Injection` → `Blog Header` and add:\n\n```html\n\u003cscript\u003e\n    var socialConfig = {\n        facebook: {\n            title: \"Caffeine Coding on Facebook\"\n        },\n        twitter: {\n            title: \"@KelyvinN on Twitter\"\n        },\n        linkedIn: {\n            link: \"https://linkedin.com/in/kelyvin\",\n            title: \"Kelyvin on LinkedIn\"\n        },\n        github: {\n            link: \"https://github.com/kelyvin\",\n            title: \"Kelyvin on Github\"\n        }\n    };\n\u003c/script\u003e\n```\n\nIf you don't provide a config for any of these, they will automatically be omitted. If you want other social links besides these four, you'll have to get your hands a little dirty. You can edit the file `partials/social.hbs` with all the social networks you want to show, following the same HTML markup pattern that you see. You can find the right social icon for you by searching through [Font Awesome's icon list](http://fontawesome.io/icons/).\n\n\n### AMP Support\n\nAs of Ghost v0.10.0, Ghost supports and will automatically render AMP (accelerated mobile pages) versions of your posts. You can read more about the [AMP project here](https://www.ampproject.org/).\n\nIncluded in this theme is an `amp.hbs` file that represents the AMP template. This template is simply a clone of [Ghost's default template](http://themes.ghost.org/v0.10.0/docs/amp) but with some some slight modifications to better fit the style of this theme.\n\nFor example, if you'd like to change the default header color to match your theme's default color, simply open up `amp.hbs` and modify the following line with the HEX color of your choice:\n\n```CSS\n.main-header {\n    ...\n    background: #56817A no-repeat center center;\n    ...\n}\n```\n\nTo see how the AMP version of a post looks, append `/amp` to the end of the URL of your post. So if you had a blog post with the url: `https://www.caffeinecoding.com/why-intuit/`, it's AMP equivalent would be: `https://www.caffeinecoding.com/why-intuit/amp`.\n\n### Syntax highlight support for additional languages\n\nPrism.js includes only some basic languages such as html, markdown, css and javascript. Add the Prism.js autoloader plugin to dynamically load additional languages. You need to inject it into the `Blog Footer` in the `Code injection` of your Ghost installation:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-core.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/autoloader/prism-autoloader.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ePrism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/'\u003c/script\u003e\n```\n\n## Developing and Contributing\n\nThere may be a situation where you want to pull the code and modify the code directly, or you may even want to contribute! You may do this to simply change the base colors, add additional features, or even help me fix some bugs! Follow the instructions below on how to get started with this.\n\n### File System\n\nThe code for the theme is divided into 3 main sections: static files (as HTML and images), CSS and JS. Check out the directory structure below:\n\n```\n.\n├── LICENSE.md\n├── README.md\n├── assets\n│   ├── css\n│   │   └── caffeine-theme.css //production css\n│   ├── fonts\n│   ├── img //favicons and cover image\n│   ├── js\n│   │   ├── src //all the code that will be compiled, concatenated, and minified\n│   │   │   ├── __init.js\n│   │   │   ├── cover.js\n│   │   │   ├── main.js\n│   │   │   └── search.js\n│   │   └── caffeine-theme.js //production js\n│   └── scss //all the sass stylsheets that will be bundled together\n│   │   ├── components //stylesheets for specific components\n│   │   ├── _aside.scss\n│   │   ├── _loading.scss\n│   │   ├── _media-queries.scss\n│   │   ├── _page-error.scss\n│   │   ├── _pagination.scss\n│   │   ├── _post.scss\n│   │   └── _search.scss\n│   ├── modules //stylesheets for generic modules\n│   │   ├── _buttons.scss\n│   │   ├── _effects.scss\n│   │   ├── _fonts.scss\n│   │   ├── _forms.scss\n│   │   ├── _global.scss\n│   │   ├── _grid.scss\n│   │   ├── _mixins.scss\n│   │   ├── _reset.scss\n│   │   └── _variables.scss\n│   └── caffeine-theme.scss //parent sass file\n|   \n├── default.hbs\n├── error.hbs\n├── gulpfile.js\n├── index.hbs\n├── node_modules\n├── package.json\n├── partials //partial hbs views\n│   ├── aside.hbs\n│   ├── comments.hbs\n│   ├── footer.hbs\n│   ├── google-analytics.hbs\n│   ├── links.hbs\n│   ├── meta.hbs\n│   ├── pagination.hbs\n│   ├── search.hbs\n│   └── social.hbs\n├── post.hbs\n└── tag.hbs\n```\n\nPutting the files in context:\n\n- The JS inside `assets/js/src` is compiled into `assets/js/caffeine-theme.js`\n- The SCSS (we use [SASS](http://sass-lang.com/)) files inside `assets/scss` are compiled into `assets/css/caffeine-theme.css`\n- We have some static files like `post.hbs`, `tag.hbs`, `default.hbs`, `index.hbs`... the partials views inside `assets/partials` are used in these views.\n\nTo bundle, minify, and compile the stylesheets and js files, we use [Gulp](http://gulpjs.com/), check `gulpfile.js` for the build tasks.\n\n### Building\n\nFor local development you need to have to install some core node modules and have a locally running Ghost server.\n\nAssuming you already have [Node and npm](https://nodejs.org/en/) installed, follow the instructions to install [Gulp](http://gulpjs.com/).\n\nRun your Ghost server separately like this:\n\n```bash\nnpm start\n\nMigrations: Up to date at version 004\nGhost is running in development...\nListening on 127.0.0.1:2368\nUrl configured as: http://localhost:2368\nCtrl+C to shut down\n```\n\nNote that my local Ghost is running in the port `2368`.\n\nWith your local Ghost running, open another terminal and enter in the folder `content/themes` of your local Ghost and clone the theme repository and install the dependencies for local development:\n\n```bash\n$ git clone https://github.com/kelyvin/caffeine-theme \u0026\u0026 cd caffeine-theme \u0026\u0026 npm install\n```\n\nThen run `npm start` or the `gulp` command in the theme terminal. This should set you up for a development scenario, and looks like this:\n\n![](http://i.imgur.com/QLTegAH.png)\n\nWith the `gulp` command you are automatically launching the task to compile the assets and reload the server when your assets change. To do this, we use [BrowserSync](http://www.browsersync.io). It is set up as middleware between the theme and Ghost. You can connect different devices and try the responsive of the website as well.\n\nYou need to use the same port as your Ghost server for proxying. If your Ghost server is in a different port than `2368` you need to modify `gulpfile.js` and put the correct port.\n\n**Note: I recommend using the `npm start` command since it will automatically run `npm install` for simplicity's sake.**\n\n### Colors\n\nEdit the file `assets/scss/modules/_variables.scss`. Remember that before you deploy your changes to prod, it is necessary to compile the build to rebuild your new stylesheet, so keep running your gulp process in background.\n\n### Preparing for production\n\nWhen you are ready and want to deploy a new version, package your code using `gulp build` command, that will minify and concatenate all the necessary code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelyvin%2Fghost-caffeine-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkelyvin%2Fghost-caffeine-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelyvin%2Fghost-caffeine-theme/lists"}