Navigation
HomeSearch
Submit A Resource
Contact Us
About Functionn
Subscription Options
Subscribe By Email (265+)
Lists
Archives
Nov 8, 2012
Author:
Hirvesh
Posted At: 11/08/2012
Tags:
canvas,
color,
colors,
date,
free,
grid,
grids,
help,
IE,
image,
iOS,
prototyping,
SVG,
tool,
UI
Cedvel - An Online Tool For Designing Grid Systems
Cedvel is an application for designing grid systems. Cedvel aims to ease the grid design process and help you explore more alternatives. Rectangles are building blocks of grids in Cedvel. Use the rectangle tool draw an arbitrary rectangle on the canvas and then modify its exact dimensions and margins from the properties panel. Once you are satisfied with the size and position of your container rectangle, divide it into rows and columns and set gutter widths and heights.
Margins define width, height and position of a rectangle within a page. Modifying the width of a rectangle simultaneously affects it's right margin value. Modifying the left margin of a rectangle will affect it's width also changing it's position in the page. Rows, columns and gutters are automatically updated when the width or height of a rectangle changes.
Rectangle lock control panel enables you to lock width, height or margin values. When the top margin of a rectangle is increased, the height of the rectangle decreases. With the height of the rectangle locked, changing the top margin does not affect it's height but moves the rectangle down.
Ratios between values can be controlled from the ratio input field either with entering a specific ratio or selecting a preset ratio from the drop-down menu. The golden ratio and root rectangle ratios are available in the drop-down menu. The flow-switch controls which value will be affected from the change in ratio.
Each row or column can be individually selected from the layers panel and can be divided into more rows and columns. Recursively these new rows and columns can also be selected and divided enabling lots of possibilities.
Circles and lines are formed of two points in Cedvel. A circle’s center is its first point and it's second point marks the length and angle of the radius. Lines are also formed of two points and an angle defining the slope.
Rectangles can have baseline, image and rectangle grids. Once activated, each of these grids can be individually customized with their own line styles, values and colors.
Grids can be exported as PNG files ideal for screen use or SVG files for printing. SVG files can be opened with Vector based applications such as Adobe Illustrator.
Requirements: None
Demo: http://cedvel.com/
License: Free
Margins define width, height and position of a rectangle within a page. Modifying the width of a rectangle simultaneously affects it's right margin value. Modifying the left margin of a rectangle will affect it's width also changing it's position in the page. Rows, columns and gutters are automatically updated when the width or height of a rectangle changes.
Rectangle lock control panel enables you to lock width, height or margin values. When the top margin of a rectangle is increased, the height of the rectangle decreases. With the height of the rectangle locked, changing the top margin does not affect it's height but moves the rectangle down.
Ratios between values can be controlled from the ratio input field either with entering a specific ratio or selecting a preset ratio from the drop-down menu. The golden ratio and root rectangle ratios are available in the drop-down menu. The flow-switch controls which value will be affected from the change in ratio.
Each row or column can be individually selected from the layers panel and can be divided into more rows and columns. Recursively these new rows and columns can also be selected and divided enabling lots of possibilities.
Circles and lines are formed of two points in Cedvel. A circle’s center is its first point and it's second point marks the length and angle of the radius. Lines are also formed of two points and an angle defining the slope.
Rectangles can have baseline, image and rectangle grids. Once activated, each of these grids can be individually customized with their own line styles, values and colors.
Grids can be exported as PNG files ideal for screen use or SVG files for printing. SVG files can be opened with Vector based applications such as Adobe Illustrator.
Requirements: None
Demo: http://cedvel.com/
License: Free
Trending Posts On Functionn This Week
Other Interesting Resources:
Subscribe to:
Post Comments (Atom)
Trending Posts
Popular Posts
- 20 Fresh, High-Quality Free WordPress Themes 2012
- 50 Fresh, High-Quality Free WordPress Themes 2012 - Edition #2
- The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts
- Timeline - A JavaScript Library For Beautifully Crafted Timelines That Are Easy, And Intuitive To Use
- BLUR.JS - A JQUERY PLUGIN PRODUCING PSUEDO-TRANSPARENT BLURRED ELEMENTS
- Selene - A Stunning & Sleek jQuery UI Theme
- jQuery UI Bootstrap Theme - Bootstrap v2.X's Theme For jQuery UI
Recent Posts
Popular Categories
- JavaScript (535)
- JQuery (275)
- Libraries (132)
- CSS (115)
- frameworks (113)
- Tools (112)
- html (86)
- Github (79)
- html5 (71)
- Node.js (58)
- mobile (52)
- Responsive (49)
- CSS3 (47)
- page effects (45)
- Web Design (41)
- Bootstrap (35)
- twitter (31)
- image effets (22)
- MVC (18)
- generators (18)
- CoffeeScript (16)
- graphics (10)
Popular Components
- icons (42)
- Graphs (22)
- popups (19)
- notifications (17)
- web fonts (17)
- visualizations (14)
- sliders (11)
- polyfills (10)
- localstorage (8)
- social media buttons (8)
Popular Licenses
- MIT License (493)
- free (144)
- GPL (64)
- Apache License v2.0 (48)
- CC Attribution 3.0 License (46)
- GPLv2 (20)
- GPLv3 (11)
- Custom License (7)
0 comments:
Post a Comment