Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Say you declared a grid like this:
body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content auto min-content;
}
This depends on content, for sure, but how it’s likely to play out is like this:
+—+————-+
| | |
| | |
+—————–+
| | |
| | |
| | |
| | |
| | |
| | |
+—————–+
| | |
+—+————-+

That’s really easy to draw out quick in ASCIIFlow Infinity.

Now you want to place elements in that grid, and arguably the easiest way to do that is to specify the grid rows/columns they should start/end at.
/* grid-area: row-start / column-start / row-end / column end */

.logo {
grid-area: 1 / 1 / 2 / 2;
}

.site-header {
grid-area: 1 / 2 / 2 / 3;
}

.sidebar-nav {
grid-area: 2 / 1 / 3 / 2;
}

.main-content {
grid-area: 2 / 2 / 3 / 3;
}

.site-footer {
grid-area: 3 / 1 / 4 / 3;
}
There are other ways to do this. You could use longhand CSS properties. You could name the areas. But say you like doing it this way because it is succinct or whatever. That’s where the ASCII is useful! Leave it in a CSS comment and number the lines.
/*
1 2 3
1 +—+————-+
| | |
| | |
2 +—————–+
| | |
| | |
| | |
| | |
| | |
| | |
3 +—————–+
| | |
4 +—+————-+
*/
Now you’ve got an visual reference to pick out those grid numbers from.
If you like native apps and wanna get real fancy, there is Monodraw.

The post Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference appeared first on CSS-Tricks.
Source: CssTricks

Posted on July 9, 2018 in Apps, css, Drupal Developer, drupal developer austin, Drupal Development, Expert Drupal Development, Logo, The, Web Design Services

Share the Story

Back to Top