Extend Grid - we make the life of the layout designer a little easier.
The concept of modular grid itself has become extremely fashionable over the past few years. First of all, designers. And secondly from the maker-ups.
In principle, this is not bad. A typesetter, based on the specifics of his profession, must love order and modular grids with their proper application, quite significantly simplify life and make a pleasant harmony when designing a layout.
About modular meshes
')
A modular layout system is a layout system in which the modular grid with a certain pitch (module), the same or different horizontally and vertically, becomes the basis for the composition of lanes and turns. Based on Wikipedia .
And a few more links:
http://cherenkevich.livejournal.com/38085.html
www.htmlbook.ru/content/?id=79
Also about the modular grid more than once wrote on Habré.
One of the distributors of nets, became the notorious framework 960.gs. Now there are many of them, any self-respecting CSS framework will not do without the magic word grid :), for example, the same Blueprint .
Following this fashionable trend and trends, layouts made for one or another stack more often come to the layout (more often of course 960.gs). Of course, there were a lot of tools and grid generators, but uncomfortable. It is inconvenient to generate a grid each time and insert it into css. Difficult to edit, difficult to disable. Very often, different bugs appear under different browsers.
Yes, there are several tools under Firefox. The first minus is a bit of them - Web Developer and GridFox . And the second and most important minus, works only under Firefox. And I wanted to work under all browsers.
There is also another very similar analogue of http://gridder.andreehansson.se/ , but again, strict binding to 960, alas ... But the idea and implementation is very similar.
Maybe there is, but it was already too lazy to look.
In dreams, there was a desire to make a small socket, with which you can make any grid (not necessarily 960) and insert it in any place. And what would the grid data be saved and what would work in any browser.
So this is such a small short-list that turned from a dream into reality.
What is the result?
Fig. 1 - Extend Grid in action
How to use? Very simple. Just connect three js-files. If someone is confused by the number of connected files, they can be combined into one. For the sake of convenience, the Extend Grid is divided into three parts - localization, settings, and the main script itself.
Example:
All sources are here .
You can also download everything in a single archive .
But not without cons
In each browser, you will have to re-enter the data.
There is no division into projects. Of course, you can share with the help of cookies in the settings, but I would like to in the interface.
Disadvantages in the interface. At the moment, a clear reference to the pixels. Yes, it can be changed through settings, but the unit of measure is global too, applies to all modules, both to columns and columns.
The main disadvantages of the interface, which, in principle, are repairable. But in general, the Extend Grid already justifies itself, after the combat tests in several projects.
Plans
Rewrite the code and arrange in the form of a jQuery plugin.
Correct the above disadvantages.
Add a few features, such as a ruler.
And actually collect the bug-report and wishes.
In principle, this is not bad. A typesetter, based on the specifics of his profession, must love order and modular grids with their proper application, quite significantly simplify life and make a pleasant harmony when designing a layout.
About modular meshes
')
A modular layout system is a layout system in which the modular grid with a certain pitch (module), the same or different horizontally and vertically, becomes the basis for the composition of lanes and turns. Based on Wikipedia .
And a few more links:
http://cherenkevich.livejournal.com/38085.html
www.htmlbook.ru/content/?id=79
Also about the modular grid more than once wrote on Habré.
One of the distributors of nets, became the notorious framework 960.gs. Now there are many of them, any self-respecting CSS framework will not do without the magic word grid :), for example, the same Blueprint .
Following this fashionable trend and trends, layouts made for one or another stack more often come to the layout (more often of course 960.gs). Of course, there were a lot of tools and grid generators, but uncomfortable. It is inconvenient to generate a grid each time and insert it into css. Difficult to edit, difficult to disable. Very often, different bugs appear under different browsers.
Yes, there are several tools under Firefox. The first minus is a bit of them - Web Developer and GridFox . And the second and most important minus, works only under Firefox. And I wanted to work under all browsers.
There is also another very similar analogue of http://gridder.andreehansson.se/ , but again, strict binding to 960, alas ... But the idea and implementation is very similar.
Maybe there is, but it was already too lazy to look.
In dreams, there was a desire to make a small socket, with which you can make any grid (not necessarily 960) and insert it in any place. And what would the grid data be saved and what would work in any browser.
So this is such a small short-list that turned from a dream into reality.
What is the result?
- A small javascript script. In compressed form less than 10 KB.
- Works in any browser that supports javascript :)
- Allows you to make any modular grid.
- A special mold ( lines ) for balancing a vertical rhythm (for example, the vertical rhythm can be read here ).
- Stores data locally, in cookies.
- You can paste in any place (by ID).
- In the settings you can specify the unit of measurement (while optional, in the future we will transfer to the interface).
Fig. 1 - Extend Grid in action
How to use? Very simple. Just connect three js-files. If someone is confused by the number of connected files, they can be combined into one. For the sake of convenience, the Extend Grid is divided into three parts - localization, settings, and the main script itself.
Example:
<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.ru.pack.js"></script>
<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.settings.js"></script>
<script type="text/javascript">
// ( ID)
var parentGridLayout = "wrapper";
</script>
<script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.min.js"></script>All sources are here .
You can also download everything in a single archive .
But not without cons
In each browser, you will have to re-enter the data.
There is no division into projects. Of course, you can share with the help of cookies in the settings, but I would like to in the interface.
Disadvantages in the interface. At the moment, a clear reference to the pixels. Yes, it can be changed through settings, but the unit of measure is global too, applies to all modules, both to columns and columns.
The main disadvantages of the interface, which, in principle, are repairable. But in general, the Extend Grid already justifies itself, after the combat tests in several projects.
Plans
Rewrite the code and arrange in the form of a jQuery plugin.
Correct the above disadvantages.
Add a few features, such as a ruler.
And actually collect the bug-report and wishes.
Source: https://habr.com/ru/post/90060/
All Articles