16
Dec

DIY DOMAINING MARKETPLACE SERIES PART V 1/2: Enhancing our template with CSS Grid

Welcome to PART V 1/2 of our series DIY Domaining Challenge: Your own custom marketplace, PART IV 2/2 is here.

Before we go ahead with the final publisher module ( next part ), we will be enhancing the template that we’ve designed in part III.

The reason is simple: The web design world is having a quiet revolution right this instant. There is this thing that is changing and will completely change the way we create layouts for web pages. I won’t spend much time talking about it, but the important thing about CSS Grid is the fact that it is really easy and also it naturally works across devices and browsers. You read that right, there is no need to use 400 different frameworks anymore. As of the time of this writing CSS Grid layout (which is now part of CSS specification, not a framework) is already supported by Chrome, Firefox,  MS Edge, Opera and Safari (that includes ipads and iphones). Check this link to visualise CSS Grid’s compatibility. It’s really easy. There is no need to install, download nor include external files. It’s all in the browser. But given this context, where people from all over will be hitting your landing page then there is a need to ensure full fallback compatibility to all devices, as it is possible people may be running older versions of supported browsers. We are essentially only talking about IE 10.

Conclusion: CSS Grid is the most advanced and powerful layout system in CSS, and for such reason we will be taking advantage of it in our domaining context.

So let’s get to it. Our current lander from part 3 is functional but it lacks a few key elements just so it is a truly generic template ( meaning: it should be smart enough to adapt itself no matter which domain is underlying its current existence -and what’s more: it should know if the underlying browser or device needs to be served the fallback version, we will use @media queries for that, btw).

Let’s visualise what we need:

Full responsive CSS Grid layout. All devices. All browsers. Includes fallback for ancient devices.

Check the live version here, it should display as above.

You can see on the below snippet how the layout adapts itself on a much smaller viewport:

See the Pen DIY Domaining Challenge: CSS Grid layout PART V (2/2) by DomainOverflow.com (@domainoverflow) on CodePen.

The above is our empty template. Below you can see a generic example on how we will ensure there is a fallback in case the device or the browser are ancients:

<pre class=""><code class=" cm-s-default" data-lang="css" data-og-lang="css" data-alt-lang="css">  <span class="cm-def">@media</span> <span class="cm-keyword">only</span> <span class="cm-attribute">screen</span> <span class="cm-keyword">and</span> (<span class="cm-property">min-width</span>: <span class="cm-number">500px</span>)  {
    <span class="cm-qualifier">.wrapper</span> {

        <span class="cm-property">grid-template-columns</span>: <span class="cm-number">20%</span> <span class="cm-atom">auto</span>;
        <span class="cm-property">grid-template-areas</span>:
    <span class="cm-string">"header   header"</span>
        <span class="cm-string">"sidebar  content"</span>
        <span class="cm-string">"sidebar2 sidebar2"</span>
        <span class="cm-string">"footer   footer"</span>;
    }
    }

    <span class="cm-def">@media</span> <span class="cm-keyword">only</span> <span class="cm-attribute">screen</span> <span class="cm-keyword">and</span> (<span class="cm-property">min-width</span>: <span class="cm-number">600px</span>)   {
        <span class="cm-qualifier">.wrapper</span> {
      <span class="cm-property">grid-gap</span>: <span class="cm-number">20px</span>;
            <span class="cm-property">grid-template-columns</span>: <span class="cm-number">120px</span> <span class="cm-atom">auto</span> <span class="cm-number">120px</span>;
            <span class="cm-property">grid-template-areas</span>:
      <span class="cm-string">"header  header  header"</span>
            <span class="cm-string">"sidebar content sidebar2"</span>
            <span class="cm-string">"footer  footer  footer"</span>;
            <span class="cm-property">max-width</span>: <span class="cm-number">600px</span>;
        }
    }</code></pre>
&nbsp;

In the above snippet you can see that the definition of our grid changes based on the minimum width of the viewport ( the device itself ).

In our project repository you can browse the finished version where we also apply @supports within the CSS just so the browser actually tells you which version you are seeing, as per the following tiny screenshot:

Using @supports with CSS Grid ensures a corresponding message of the underlying @media query.

Now let’s get back to domains, and what else is missing so our template will work uniquely across all your domains. 

As you noted the lander with CSS Grid explicitly tell us where each section is, so at the time it is actually rendered, it should do the following:

-It must know the domain name by itself upon loading, before serving the html.

-It must work in all browsers and devices.

-R1 The .domain image, .title , .domain-name, .message1, .message2 , .pos-link should be smartly populated, no matter which domain it happens to be loaded on.

-R2 The values for the image, title, message1, message2 and the pos-link url will come from our domains.json inventory file. a single record should look like this:

Domain inventory .json also accepts html as the input.

(please leave a comment down below if you wish to have a form wrapped around the inventory & config file logic and I will add it to our project repository).

What about theme colours, font-types and etc ? There are two things to keep in mind here when the page loads:

-It will load the CSS from the source code first. So you can change styles directly on the CSS as long as you remember that:

-The config & inventory file (domains.json) will override the runtime CSS properties (as per the above screenshot).

The reason for the added logic is just so everyone can easily customise it. So even if you understand absolutely nothing that I have written you can still edit the domain.json file and custom it your way.

OK, The template is now:

-Responsive.

-Cross-Device (mobile, desktop and ancient devices ).

-Config file driven

-Free

What else ?

So let’s add content easily via html, with the following mapping:

(this is where you would do your own mapping but feel free to use the suggested as well ).

Domain Name: That is auto-loaded no need to specify the underlying domain.

.domainName class with content.

.domainName class with content.

Title: Via config file “Welcome!”

.title class with content.

.title class with content.

Additional slot 1: Domain Name.

.class additionalSlot with content.

.class additionalSlot with content.

Domain media: A catchy picture. Also driven by the config file.

.domainMedia class with content.

.domainMedia class with content.

Extended content: You tube video. Randomly chosen.

.extendedContent class with a 6-hours acquarium randomly chosen video.

.extendedContent class with a 6-hours acquarium randomly chosen video.

Navigational: Set of links.

.Navigational class with content.

.Navigational class with content.

Additional slot 2: Contact Form ( this is a good place for Ads too ).

.contactForm class with a contact form.

.contactForm class with a contact form.

Please note, the send on the included form performs a post to the server side and assumes the shell mail is OK. Please write a comment down below if you need assistance adjusting the contact form to your email.

POS link: Same as .message1 (below). Config file driven.

Message 1: Link “This domain is for sale” linking to the POS as well. Config file driven

.message1 class with content.

.message1 class with content.

Message 2: Link : POS link https://contato.link ( using our POS from part II ).  Config file driven.

.message2 class with content

.message2 class with content

Please note you could add a direct payment method on the lander. That is really entirely up to you. That is why I chose to make this layout very, but very easy to be refactored your own way. If you do so, please follow the open source license ( MIT ) that is associated with it in our project repository. Feel free to use our POS from part II.

Main Content: For this one, Added bonus: I’m also including a random balloon pop-up code mini-game. Every time you shoot a balloon a message will appear. You may customise the message to fit your context.

.mainContent class with the Balloon Domain Game.

.mainContent class with the Balloon Domain Game.

 

 

Click here to see the live version.

CSS Grid developed template.

CSS Grid developed template.

You can download it and tweak it locally from our open source repository, in github.

 

Alternative

Ultimately if you are refactoring this approach to hundreds of domains, then you would want to have a dashboard to add content and macro manage with micro details. You would also want to manage your direct Ads revenue, the traffic, is it up or is it down, leads interaction, etc al.

 

Dotboss.digital's bulk publisher.

Dotboss.digital’s bulk publisher.

 

This is where I will tell you that you can achieve the same as above in less than 5 minutes. Not only you get a dashboard to manage everything but you get a bulk publisher, 100s of layouts, a website builder tailored for domain investors, you can drag and drop your layouts all the way to publishing, no technical knowledge needed and much more. And of course, you get SSL for free to all of your domains. You can signup here. Dotboss.Digital is the most complete domain management system ever written.

 

Dotboss.Digital's SEO Wizard is very, very handy.

Dotboss.Digital’s SEO Wizard is very, very handy.

 

In our next article we will tackle the bulk publisher and add all components into our admin dashboard. We will also upgrade our POS from part II to CSS Grids !

I hope you will find this useful and thanks for reading.

s

 

 

 

Tags: , , , ,

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

%d bloggers like this: