Welcome to the highest rated responsive CSS grid, on CodeCanyon.
CSS Grid is a valid HTML5, responsive CSS Grid from 1 to 8 columns. It works on iPhone, iPad, Google Android and Windows 8. It also features a Toggle Navigation Menu for mobile.
Why is this different to other CSS grids?
There are many grids out there already, but after working on several responsive websites, I found most of them to be quite complex for beginners, so I developed this simple solution where developers at all levels would be able to use it. Read below to see how easy it is to use!
Features
- Works on: iPad, iPhone, HTC, Nokia, Samsung, Sony, LG, Blackerry
- Fixed or Percentage Columns (or mix them)
- 1 to 8 columns
- Easy HTML Setup
- Use stack class to automatically stack columns
- Use CSS3 animate class to animate the transition between columns
- Toggle Navigation Menu uses CSS3 and Javascript
- With or without column padding
- Retina screen support
- Detailed Instructions
- PSD files included for 1024, 768, 480, 320
Tested and compatible with:
- iOS 5, 6, 7
- Android 2.5+
- Safari 5+
- Chrome 27.0+
- IE 8, 9, 10, 11
- Windows 8 (IE 10)
Changing columns from fixed to percentage
You can change a column from fixed width to percentage width by changing f to p.
It really is that easy!
Stacking Columns
In some cases, content can become a little squashed on mobile portrait as the space is quite narrow. If this is the case, you may need to stack the columns on top of each other. All you need to do is add stack to the DIV, and it will automatically stack the columns on top of each other.
Animating Columns
Easily make the DIV animate by adding animate to the html. This uses CSS3 Transitions.
Toggle Navigation Menu for Mobile
When a screen width becomes too narrow to fit all the navigation (like on mobile devices), an alternative navigation system is required. This download includes the Toggle Menu Navigation which has 3 options. Top, Left and Right. You also have options for Fixed (stays fixed to top) and Static (scrolls with page)
Does this have Instructions?
Sure does. This download comes with some detailed instructions on using the grid, css structure, toggle navigation and understanding responsive grids. You can also access the instructions online.
Need some help?
Feel free to get in touch if you have any questions and I will get back to you as soon as possible.
------------------------------------------------------------------------ v 1.3 (18 December 2013) * Toggle Nav, CSS3 Transitions * Toggle Nav, Fixed and Static Position options * Toggle Nav, Top, Left and Right options * Animated transitions for HTML when @media changes * Updated instructions and PSD files ------------------------------------------------------------------------ v 1.2 (13 September 2013) * Toggle Nav, simplified code * Toggle Nav, changed to stack on top instead of overlapping content * Stack CSS added, allowing easy option to stack DIVs for narrow width ------------------------------------------------------------------------ v 1.1 (11 July 2013) * Toggle Nav Added for narrow widths ------------------------------------------------------------------------ v 1.0 (14 June 2013) * Released ------------------------------------------------------------------------
This Responsive CSS Grid was developed by cssgrid.co.
Available exclusively at CodeCanyon from Envato.
No comments:
Post a Comment