Code Monkey home page Code Monkey logo

headstart's Introduction

Headstart - Make beautiful webpages GitHub license GitHub release jsDelivr Download Gitter Chat

Headstart is a CSS framework.

Features:

  • Brand Colors (Info, Success, Warning, Danger)
  • Responsive, Scalable Grid system
  • Typography
  • Ionicons Icon font
  • Navbars
  • Mobile-first
  • Code views
  • Responsive <img>s
  • Panels, Thumbnails, Cards
  • Custom forms
  • Color palates
  • Carousels
  • CDN / Self-hosting

Install

Note: The files that are currently marked as "SOON" will be added later.

To use jsDelivr's awesome CDN RECCOMMENDED:

<!-- Main CSS File -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/headstart-css/0.3.1/rotem.min.css">
<!-- JS File -->
<script src="SOON"></script>

To use self-hosting:

Download Headstart from here, extract it somewhere in your website, then:

<!-- main css file -->
<link rel="stylesheet" href="path/to/rotem.min.css">
<!-- JS file -->
<script src="SOON"></script>

How to use icons

To use the icons, add a <i> or a <span> with class="ion-XXX" when XXX is the icon name.
For example:

<div class="col-3 success">
  <p><i class="ion-chevron-right"></i> Example</p>
</div>

Versioning

The versioning system for stable releases is MAJOR.MINOR.PATCH (Semantic versioning).

The versioning system for unstable (development) releases (Only from v2) is vMAJORDEV-YEARwWEEKREVISION (For example, the second release for v2 on week 21 of 2017 is v2-17w21b.)

Compile from source

To compile from sources on Linux/macOS (Windows is not supported, and will not be in the future (Note: Cygwin is probably supported, but isn't tested)):

You need to have jdk and ruby-sass installed. To install, Type in the terminal:

$ sudo apt-get install ruby-sass openjdk-8-jdk # Debian-based distros
$ sudo yum install rubygems openjdk-8-jdk && sudo gem install sass # Fedora-based distros
$ sudo pacman -S ruby-sass openjdk-8-jdk # Arch-based distros
$ sudo gem install sass # macOS and other ruby-enabled distros. For JDK, download the corrsponding file from http://www.oracle.com/technetwork/java/javase/downloads/ and follow installation instructions.

On debian-based and arch-based distros, the command will install ruby as well as sass and java. On fedora-based distros, the command will install ruby and java, and then sass. On macOS and other distros with ruby installed, the rubygems package manager will install sass.

Then do:

$ git clone https://github.com/RotemDev/Headstart.git # Clone the repository
$ cd Headstart
$ ./compile # Run the compile script.
$ cat compile.log # (to see the compilation log).

Then, the compiled CSS files and fonts are located at <CLONING_DIR>/css/, and the compiled JS files are at <CLONING_DIR>/js-dist/

headstart's People

Contributors

roteminecraftil avatar gitter-badger avatar

Stargazers

Rafael Santos Sá avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

gitter-badger

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.