Code Monkey home page Code Monkey logo

theme-kit's Introduction

Bootstrap Theme Kit: Make your own Bootstrap 4 Themes

This is simple starter project to help you get started quickly when making a custom Bootstrap 4 theme.

There is a full tutorial avaiable at hackerthemes.com: How to build your own Bootstrap themes.

This readme is the short version of that.

What this project does

This repository includes a project structure with a build script that builds a custom CSS version of Bootstrap 4, using Gulp. You can clone this repository, run the Gulp task and go right into modifying variables and adding styles. There's also an HTML file that contains a neatly organized collection of Bootstrap components that fit a 1920x1080 display, so you can instantly see the outcome.

Video Demonstration

There is a short demonstration of this project on YouTube: https://www.youtube.com/watch?v=Gi5ffoE3mPc

Prerequisites

  • This works on Windows, macOS and Linux.
  • Node Package Manager and Gulp are required. Make sure you can run gulp -v and npm -v.
  • You can get Node at nodejs.org, then install gulp using npm install gulp-cli -g

Getting started

  1. Clone this repo
  2. Run npm install
  3. Run gulp watch
  4. Look at index.html (ideally with a local development webserver)
  5. Add any Bootstrap Sass variables into scss/_custom-variables.scss
  6. Add any custom styles into scss/_custom-styles.scss. You can use Bootstrap's mixins here.
  7. Repeat steps 4 to 6 until you like what you see :-)

Creators

Alexander Rechsteiner

Bootstrap

Copyright and license

Code and documentation copyright 2017 HackerThemes Code released under the MIT License.

theme-kit's People

Contributors

arechsteiner avatar tlongren avatar

Watchers

 avatar

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.