GithubHelp home page GithubHelp logo

groundwork's Introduction

GroundworkCSS

GroundworkCSS v1.10.0

Say hello to responsive design made easy.

http://groundwork.sidereel.com

GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit created by @ghepting.

Using GroundworkCSS, you can rapidly prototype and build accessible web apps that work on virtually any device. Key features that make GroundworkCSS stand out are:

  • nestable, fractions-based, fluid grid system
  • works on virtually anything: mobile, tablet, or large screen devices
  • built with modular SCSS and JS components
  • easy to customize
  • responsive text
  • unique approach to responsive tables
  • supports purely semantic implementations by utilizing Sass @extend, @mixin and %placeholder classes

Getting Started using GroundworkCSS

Default Build

The easiest way to incorporate GroundworkCSS into your project is to copy the pre-compiled CSS and JS files into your project, and then refer to them in markup. The 2 most important files are:

  • css/groundwork.css
  • js/groundwork.all.js

In addition, these support files may be used:

  • css/groundwork-ie.css (IE Compatibility)
  • js/libs/html5shiv.min.js (IE Compatibility)
  • css/font-awesome-ie7.min.css (IE Compatibility)
  • js/plugins/jquery.cycle2.js (Required for Cycle2)

All in all, you may end up with markup that looks like the following:

At the top of your HTML document (within the head section)

<link type="text/css" rel="stylesheet" href="/css/groundwork.css">
<!--[if IE]><link type="text/css" rel="stylesheet" href="/css/groundwork-ie.css"><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/libs/html5shiv.min.js"></script><![endif]-->
<!--[if IE 7]><link type="text/css" rel="stylesheet" href="/css/font-awesome-ie7.min.css"><![endif]-->

At the bottom of your HTML document (just before your closing body tag)

<script type="text/javascript" src="/js/plugins/jquery.cycle2.js"></script>
<script type="text/javascript" src="/js/groundwork.all.js"></script>

Custom Build

If you use SCSS and you want to compile your own build of groundwork you can do so (good if you need lean CSS output for your site).

SCSS source files are located in src/scss. Important files to edit are:

  • groundwork.scss: dictates which modules are imported for compilation (delete/comment out unneeded modules).
  • _variables.scss: initial settings for GroundworkCSS, including whether to generate grid/helper classes or not.

You can then output your own groundwork.css, or import groundwork.scss as part of your project's SCSS. The latter lets you utilise GroundworkCSS's library through @include or @extend for your custom classes.

Want to develop on and contribute to GroundworkCSS?

Read Contributing to Groundwork and fork away! :)

groundwork's People

Contributors

chandranshu12 avatar geekatwork avatar geoffreycrofte avatar ghepting avatar pocesar avatar puchesjr avatar rwetzlmayr avatar sethta avatar xinix 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.