{"id":3447,"date":"2012-12-18T15:51:45","date_gmt":"2012-12-18T12:51:45","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=3447"},"modified":"2021-08-16T15:33:22","modified_gmt":"2021-08-16T12:33:22","slug":"ui-library-layouts","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/ui-library-layouts\/","title":{"rendered":"UI Library: effective way to organize interface components. Layouts"},"content":{"rendered":"\n

UI Library: Preface<\/a><\/p>\n\n\n\n

UI Library: Writing CSS<\/a><\/p>\n\n\n\n

We’re already familiar with Modules, but they don’t fit when dealing with\u00a0a\u00a0site\u00a0layout. When explaining Modules<\/a> we’ve learned to think component-based.<\/p>\n\n\n\n

Now, let’s add one more rule \u2014 Grids control width. It means that all Modules should be designed not to depend on width that gives more flexibility when placing them anywhere you need.<\/p>\n\n\n\n

Creating a grid<\/h2>\n\n\n\n

Let’s take a closer look at a primitive layout example we see every day:<\/p>\n\n\n\n

\"Complicated<\/figure>\n\n\n\n

The Grid classes should be made location-free. Note a block with the class row<\/code> that clears all the floats properly. Don’t forget about it.<\/p>\n\n\n\n

\n
\n

 <\/p>\n

Navigation<\/div>\n

 <\/p>\n

Content<\/div>\n

 <\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\/* The clearfix hack is a popular way to contain floats without resorting \n * to using presentational markup.\n * Credits: http:\/\/nicolasgallagher.com\/micro-clearfix-hack *\/\n.row {\n  *zoom: 1;\n}\n\n.row:before,\n.row:after {\n  display: table;\n  content: \"\";\n  line-height: 0;\n}\n\n.row:after {\n  clear: both;\n}\n\n\/* Reserved classes for columns *\/\n.col1of3, .col2of3 {\n  float: left;\n}\n\n.col1of3 {\n  width: 33.33333%;\n}\n\n.col2of3 {\n  width: 66.66666%;\n}\n<\/pre>\n<\/div>\n\n\n\n
We’ve reserved some unique classes for the columns: .col1of3<\/code>, .col2of3<\/code>. All of them have float: left<\/em> to behave like floats and width: xx%<\/em> where xx<\/em> is a percentage value from 0 to 100.<\/p>\n\n\n\n
We’ve also reserved .row<\/code>(clearfix hack) which is a popular way to contain floats without resorting to using presentational markup.<\/p>\n\n\n\n
After inserting some test data inside, let’s take a look at\u00a0the\u00a0result<\/a>.<\/p>\n\n\n\n
Organizing more complex grids<\/h2>\n\n\n\n
\"Default<\/figure>\n\n\n\n
Using grids with percentage width allows us to build quite complex\u00a0layout.
Don’t forget to wrap columns with\u00a0.row<\/code>.
Let’s take a\u00a0look<\/a>.<\/p>\n\n\n\n
Spaces<\/h2>\n\n\n\n
Now we know how to create fluid layouts, but usually you need to add some space between columns or blocks inside each column. Use spaces for that.<\/p>\n\n\n\n
\n
Block with margin-bottom of the large size.<\/div>\n<\/div>\n\n\n\n
\n
\/* Should be used to modify the default spacing between objects \n(not between nodes of the same object)\n * a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical\n * x, s, m, l, n       = 3px, 5px, 10px, 20px, none\n * p, m                = padding, margin *\/\n\n.mbl {\n  margin-bottom: 20px;\n}\n<\/pre>\n<\/div>\n\n\n\n
Here’s an example<\/a>.<\/p>\n\n\n\n
As you can see in the comment line above, we can define paddings\/margins for each side. Also, we can set the size. Let’s see how it’s made:<\/p>\n\n\n\n
\n
\/* Large Padding size for all sides *\/\n.ptl, .pvl, .pal { padding-top:    20px; }\n.prl, .phl, .pal { padding-right:  20px; }\n.pbl, .pvl, .pal { padding-bottom: 20px; }\n.pll, .phl, .pal { padding-left:   20px; }\n\n\/* Large Margin size for all sides *\/\n.mtl, .mvl, .mal { margin-top:    20px; }\n.mrl, .mhl, .mal { margin-right:  20px; }\n.mbl, .mvl, .mal { margin-bottom: 20px; }\n.mll, .mhl, .mal { margin-left:   20px; }\n<\/pre>\n<\/div>\n\n\n\n
Take a look at the Sass based version<\/a> with 4\u00a0different\u00a0sizes.<\/p>\n\n\n\n
Use spaces to modify default spacing between objects (not between nodes of the same object).<\/p>\n\n\n\n
TIP: Railsware site<\/a> is based on a such grids\u00a0+\u00a0spaces\u00a0system. Feel free to go and inspect the source and learn how we\u00a0built\u00a0it.<\/p><\/blockquote>\n\n\n\n
We’re not going to cover responsive layouts here since it’s worth writing additional post about it.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI Library: Preface UI Library: Writing CSS We’re already familiar with Modules, but they don’t fit when dealing with\u00a0a\u00a0site\u00a0layout. When explaining Modules we’ve learned to think component-based. Now, let’s add one more rule \u2014 Grids control width. It means that all Modules should be designed not to depend on width that gives more flexibility when placing them anywhere you need. Creating a…<\/p>\n","protected":false},"author":29,"featured_media":3448,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Sergii Iurevych"],"class_list":["post-3447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t