Tampilkan postingan dengan label grid. Tampilkan semua postingan
Tampilkan postingan dengan label grid. Tampilkan semua postingan

Kamis, 05 Desember 2013

Responsive HTML5 CSS Grid (Templates)

CSS Grid. Responsive CSS Grid, built for web and mobile.


CSS Grid is a valid HTML5, responsive CSS Grid from 1 to 8 columns. It works on iPhone, iPad, Google Android and Windows 8.
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

  • With or without column padding

  • Detailed Instructions

  • PSD files included for 1024, 768, 480, 320


Tested and compatible with:


  • iOS 5+

  • Android 2.5+

  • Safari 5+

  • Chrome 27.0+

  • IE 8, 9, 10+

  • 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 (New! Added 13 Sept 2013)
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.

Javascript Toggle Navigation for Mobile
When a screen width becomes too narrow to fit all the navigation, an alternative is required. This download includes the Javascript Toggle Navigation for FREE, so you can use this for hiding and displaying the navigation buttons.
Does this have Instructions?
Sure does. This download comes with some detailed instructions on using the grid, css structure and understanding responsive grids.

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

Canvas Multi-Grid construction (Canvas)

Multi-Grid

Is a tool that uses the HTML5 Canvas power to create 5 different types of grid line patterns.

Features include:

  • 5 different types of grid patterns (blocks, diamonds, hexagons, circles, diagonal lines (left,right)
  • Build-in responsive functionality
  • No dependencies – pure Javascript
  • HTML5 Canvas means performance
  • Plethora of options include, line-color, size, background-color, alpha, offset to create different types of grids
  • Easy to customize, simple API

How to use?

Multi-Grid is perfect for blueprint applications and dashboards, wireframe tools or screens and/or design templates.

Sample:

Canvas Multi-Grid construction (Canvas)

Multi-Grid

Is a tool that uses the HTML5 Canvas power to create 5 different types of grid line patterns.

Features include:

  • 5 different types of grid patterns (blocks, diamonds, hexagons, circles, diagonal lines (left,right)
  • Build-in responsive functionality
  • No dependencies – pure Javascript
  • HTML5 Canvas means performance
  • Plethora of options include, line-color, size, background-color, alpha, offset to create different types of grids
  • Easy to customize, simple API

How to use?

Multi-Grid is perfect for blueprint applications and dashboards, wireframe tools or screens and/or design templates.

Sample:

CSS Pricing Tables Five Skins DZS (Pricing Tables)

Intro – top


CSS3 Pricing Tables DZS is a bundle of five awesome pricing tables


Features



  • easy to install - install and get this plugin ready in less then one minutes.

  • responsive – looks great from mobile to HD

  • CSS3 technology - this gallery uses cutting-edge css3 definitions to render awesome 3D effects in supporting browsers, the others will degrade gracefully
  • compatible with all major browsers, including IE – compatible from IE7 to IE10, Chrome, Safari and Firefox
  • SEO friendly – built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget

  • iPhone / iPad optimized – this component has been optimized for Apple touch devices
  • Android optimized – this component has been tested on Android 4.0 and works awesome

What do you get?



  • CSS3 Pricing Tables DZS - get creative!

  • documentation – extensive documentation on how to install & configure the plugin

  • free updates – even if the value of this gallery increases with upcoming updates, you will get them for free

  • free support – for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support


 



Other Great Plugins





Credits



 

Responsive Pricing Tables (Pricing Tables)







If you need clean and professional pricing tables for your site, this set is probably what you’re looking for. These tables are coded to automatically fit into your layout and they will take the available space you give them so you don’t need to worry about width values.




The package contains 2 sets of files : for layouts that have a light design, and for those which have a dark layout. These tables come with the Font Awesome icons and nice tooltips.




Features




  • From 2 up to 5 columns

  • Fully responsive

  • Font Awesome icons

  • CSS3 Tooltips

  • Dark & light themes

  • 12 additional colors

  • Fits automatically into your layout

  • Clean and professional design

  • Cross-browser support

  • Tested on mobiles and tablets

  • Documentation fle included



Compatible Browsers




  • Internet Explorer 7 (no tooltips)

  • Internet Explorer 8+

  • Firefox 4+

  • Safari 3+

  • Chrome

  • Opera 10+



Changelog



07/10/2013 – Version 1.0




  • Initial release



Please note that some features don’t show up on some browsers, for example gradients or CSS3 transitions don’t work under Internet Explorer 7-8. The layout degrades gracefully and works fine with those older browsers.
Just email me if you want some additional screenshots, thanks for reading :)




Pricing Tables - Fully Responsive and Bootstrap (Pricing Tables)

Pricing Tables is simple yet powerful way to display your pricing plans. It is fully responsive. It has an amazing css3 zoom effect on hovering.


If you like our work, feel free to rate us , because that’s the only thing which encourages us to do more awesome work





Features



  • - Fully Responsive

  • - Built with Bootstrap

  • - Well commented code

  • - Well Documented

  • - Easy to Edit

  • - Amazing CSS3 Zoom effect on hover


Support


If you have any feedback or any query related to this product, please let us know though comments section or through our profile contact form

CSS Responsive Touch-Friendly Gallery with Effects (Animations and Effects)

Details


100% CSS, this thumbnail gallery works great on your computer as on your touch devices. You have many effects to choose from, as the dynamics and colour of the details box to the image’s dynamics and style.
The clean code is easy to modify and comes with a documentation file.





Available description box styles:



  • Fade Center

  • Fade to Black

  • Fade to White

  • Black Fade to Zero

  • White Fade to Zero

  • Slide from Bottom

  • Slide from Left

  • Slide from Right



Available Image Styles:



  • Shrink

  • Zoom

  • Slide Up

  • Slide Down

  • Tilt



BONUS styles (available only on computer):


  • Blur to Clear

  • Clear to Blur

  • Desaturate to Color

  • Color to Desaturate




NOTE: the images and the demo in the video are not included.

Credits for the photos:
Matthew Simantov
sskennel
KikeXtra
Checo Che
Malkav
Lola núñez
steve.garner32
Renato Ganoza
Jazminator
Firelknot


Feel free to rate it!



CSS Pricing Tables Five Skins DZS (Pricing Tables)

Intro – top


CSS3 Pricing Tables DZS is a bundle of five awesome pricing tables


Features



  • easy to install - install and get this plugin ready in less then one minutes.

  • responsive – looks great from mobile to HD

  • CSS3 technology - this gallery uses cutting-edge css3 definitions to render awesome 3D effects in supporting browsers, the others will degrade gracefully
  • compatible with all major browsers, including IE – compatible from IE7 to IE10, Chrome, Safari and Firefox
  • SEO friendly – built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget

  • iPhone / iPad optimized – this component has been optimized for Apple touch devices
  • Android optimized – this component has been tested on Android 4.0 and works awesome

What do you get?



  • CSS3 Pricing Tables DZS - get creative!

  • documentation – extensive documentation on how to install & configure the plugin

  • free updates – even if the value of this gallery increases with upcoming updates, you will get them for free

  • free support – for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support


 



Other Great Plugins





Credits



 

CSS Pricing Tables Five Skins DZS (Pricing Tables)

Intro – top


CSS3 Pricing Tables DZS is a bundle of five awesome pricing tables


Features



  • easy to install - install and get this plugin ready in less then one minutes.

  • responsive – looks great from mobile to HD

  • CSS3 technology - this gallery uses cutting-edge css3 definitions to render awesome 3D effects in supporting browsers, the others will degrade gracefully
  • compatible with all major browsers, including IE – compatible from IE7 to IE10, Chrome, Safari and Firefox
  • SEO friendly – built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget

  • iPhone / iPad optimized – this component has been optimized for Apple touch devices
  • Android optimized – this component has been tested on Android 4.0 and works awesome

What do you get?



  • CSS3 Pricing Tables DZS - get creative!

  • documentation – extensive documentation on how to install & configure the plugin

  • free updates – even if the value of this gallery increases with upcoming updates, you will get them for free

  • free support – for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support


 



Other Great Plugins





Credits



 

Responsive Grid Shortcodes for WordPress (Interface Elements)

Responsive Grid Shortcodes for WordPress


Version 1.2 is available now!


New features of version 1.2:



  • Added buttons on the editor bar in wordpress for quick addition of the grid shortcodes (no need to memorize the shortcodes anymore!

  • You also get the .ai files that I used for the button icons when you buy this plugin!

  • Functional fixes and improvements



This plugin provides a shortcode for you to implement a grid system layout without coding the grid in WordPress. The plugin adds the necessary markup and CSS to make the responsive grid in any page or post on your site.



This plugin was made to be the easiest plugin available to implement a grid into a page or post.



To use it, type [one_half]’whatever you want in that grid section’[/one_half], for the last grid element of that row you must use [one_half last=”yes”].



Grid shortcodes available:



  • full-width

  • one-half

  • one-third

  • two-thirds

  • one-fourth

  • three-fourths



New Features Added:



  • Added support for a new grid shortcode: Full Width.



Documentation and a Quick Start Guide is included in the download!

Lister : A Powerful Content Organizer (Interface Elements)

Lister is a Fully Responsive tool aimed to quickly make your lists look great and attractive. With Lister you are not limited to only the traditional ‘vertical’ lists, and also can order your items horizontally, making your content look much more organized and semantically logical.




New in Version 1.5 : To-Do Lists!




Lister support hundreds of icons (Font Awesome (version 4 included!), IcoMoon, Fontello), numbered lists (Inc. Roman) or alphabetic order. You can further style the Icons, Positioned and assigned on-hover animations.




You can achieve almost any grid-style structure with Lister, as it lets you choose the amount of columns, and assign fixed heights to Items.




I’ve added an Examples Page for Lister with plenty of examples to get you started, this page will be constantly updated : Lister Examples




Lister was designed to look great out-of-the-box, and to be implemented without entering a single line of shortcode.




Lister’s Features :



  • 7 List Themes, 10 Color Schemes, 6 Icon Shapes & 9 on-hover Animations.

  • 2 Shortcode Generators, one for List and one for Items.

  • Hundreds of Icons (Supports Font Awesome, IcoMoon, Fontello and more)

  • Complete CSS control. Supports the HTML5 ‘style’ attribute. Provides pseud-unique IDs, and allows the assign unique classes.

  • Light & Quick. Lister loads no Javascript and is based on CSS3 alone.

  • Responsive! Lister is flexible and responsive from the get-go, and allows you to enable/disable responsiveness per list (and limit to big/small screens)!

  • Compatible with All Major Browsers (Mobile / Desktop).

  • Supports Nested Lists.



Support



I’ll do my best to provide quick and free support to any question you might have. moreover, I’ll be happy to add any feature you find missing, and/or quickly fix any bug you might encounter.

Testimonials Wordpress Plugin (Interface Elements)

Testimonials plugin for WordPress is responsive, the main propose of the plugin is to display testimonials, but it can be used for other proposes.


You can display the entries in 3 different Ways


1. Slider

In this slider you can display testimonials with 3 different style with a number of options you set such as ( Image Size,Image Radius,Number of items, Order By, Order, Auto Play, Pause On Hover, Buttons Visibility, Buttons Radius, Buttons Position, Scroll Duration, Pause Duration, Font Style).




2. Grid

The testimonials will also display it in a responsive grid with a number of column and with 3 different syles, depending on your settings.





3. List




A simple responsive list to display your testimonials in a simple way. depending on your settings.





You can customize the layout, with several layout options.


1. Items Style

You can display slider, grids, list with 3 different layout style with the information to the right, or below the image or above the image, depending on the settings.



a. Style 1



b. Style 2



c. Style 3



2. Image Size




You can display slider, grids, list with 4 different image size, depending on the settings.



a. Large



b. Medium



c. Small



d. Without Image

3. Image Radius




You can display slider, grids, list with 4 different image radius size, depending on the settings.



a. Large Radius



b. Medium Radius



c. Small Radius



d. Without Radius






4. Number of Columns




In the grid layouts you can choose how many columns you want to display. It responsive and adept in different screen sizes.



5. Border Style




You can display testimonials with 3 different options. depending on your settings.



- Border Color




You can change border color by select color from color piker in the settings.


6. Font Style

You can choose text font, font size, font color depending on the settings.


Group by categories



You can group testimonials by categories and you can display it by selected category or all of them.



Widget Ready


The shortcode will work on widget, just copy the shortcode in testimonials widget.


Shortcode Generator



The shortcode generator will make a preview of how the layout looks with the selected settings.








Version Log


2013/11/14 – version 1.2
Fixed "Testimonials Items number to show at most" bug.

2013/10/18 – version 1.1
Add categories, Fixed slider loading delay.

2013/09/30 – version 1.0
First stable release.