Code Monkey home page Code Monkey logo

blossom-boilerplate's Introduction

Blossom UI Boilerplate

Get started with Blossom UI basics using this starter boilerplate.

Blossom UI is a Stylus environment for developers to theme their website; already consisting of several vital web elements, it's dead easy for beginners to set up websites within minutes. More advanced users can take advantage of Blossom's theming capabilities using Stylus.

Find out more about Blossom

Features

  • Stylus powered Blossom framework for CSS
  • PugJS for HTML templating
  • Hot reloading of CSS and HTML content using Browser Sync
  • Production & Development environments
  • JS file minifier
  • HTML compression
  • Image optimization
  • CSS compression
  • Detailed Gulp CLI debug

Setup

Download or clone the repository to your directory of choice.

Install all the dependencies: npm install

If you have problems using Gulp, make sure it's in the working directory: npm install gulp

Development environment

Run gulp dev to start the Browser-Sync server on port: 3000.

To make sure you've run it correctly ensure there are no fatal errors in the console, and finally navigate to http://localhost:3000 to view the page.

If you see It's working!, then you're good to go!

Changes made to a Blossom .styl or Template .pug file will be stream loaded back in to your browser.

Production environment

Running gulp prod will handle everything you need to just drag the dist file straight into the hosting of your choice.

This includes:

  • All HTML files deflated from whitespace
  • Uglified JS files
  • Compiled & compressed Blossom UI .css file
  • Image (.png/.jpg/.jpeg/.gif) optimization

Modifying Blossom

Modifying Blossom UI is dead easy. Just navigate to ./libs/stylus and you'll be greeted by the Stylus source contents.

You can edit the existing design of Blossom by overriding .styl files in src and input custom styling in _.styl.

Make sure to make use of/change variables in variables.styl

Hosting

The main purpose of this boilerplate is to output static files which is compatible with the majority of hosting services out there.

My hosting of choice for static files is Surge

Get hosting

Install Surge: npm install --global surge

Build the boilerplate to the dist folder: gulp prod

Upload to Surge: surge ./dist

Find out more about getting started with Surge here

Issues

If you find any issues with running or building the boilerplate on certain machines open up an issue

Licensed under MIT - Copyright (c) 2017

blossom-boilerplate's People

Contributors

animify avatar aotik avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  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.