Say hello to responsive design made easy.
Say hello to responsive design made easy.
http://groundworkcss.github.io
GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit created by @ghepting.
Using GroundworkCSS, you can rapidly prototype and create accessible web apps that work on virtually any device. Key features that make GroundworkCSS stand out are:
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:
In addition to these (required) support files:
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)
<!-- Modernizr -->
<script src="/js/libs/modernizr-2.6.2.min.js"></script>
<!-- framework css -->
<!--[if gt IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/css/groundwork.css">
<!--<![endif]-->
<!--[if lte IE 9]>
<link type="text/css" rel="stylesheet" href="/css/groundwork-core.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-type.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-ui.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-anim.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-ie.css">
<![endif]-->
At the bottom of your HTML document (just before your closing body tag)
<script type="text/javascript" src="/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/groundwork.all.js"></script>
If you use Sass and you want to compile your own build of Groundwork or integrate it along with your project code.
Sass source files are located in src/sass and src/coffee.
Important files to edit are:
You can then output your own groundwork[.css/.js], or import groundwork.sass
as part of your project's Sass. The latter lets you utilise GroundworkCSS's
library through @include
or @extend
for your custom classes.
If you're using Groundwork in a Ruby on Rails project, definitely use the groundworkcss-rails gem
Read Contributing to Groundwork and fork away! :)