Template and guide of the landing page.

Very good, to the CSS. Follow the ball that bounces on:

Always design using a monolithic style sheet per media objective. That means a file for the screen, a file to print, etc. The amount of separate files used in the creation of a page slows the loading of the page thanks to what is called "handshaking".

Have you ever noticed when uploading files via FTP how a single 1 megabyte file will load faster than 100 separate 10k files, despite having the same total file size? That is the overload of handshaking to request a file or start a new connection to transfer a file. Keeping the total number of files under control is a must have. and that's why I'm NOT a big fan of when people use dozens of separate style sheets or dozens of separate scripts.

… and really if you have enough CSS to guarantee more than one file, you have too much CSS; but I have NEVER seen a normal website that justifies the use of more than 48k of CSS (not even counting the reduction) and why I recoil with horror when I see all herps and derps vomiting half a megabyte or more of CSS that covers dozens of records. Epic / FAIL / in web development.

… and another attack on the frames, since they often start with twice that, even before you even wrote a single line of your own style!

Enough about that, on the actual sheet we go.

I always start with a & # 39; reboot & # 39; in my style sheets. The reboots exist because it was NEVER the work of HTML specifications to say how things look, so at the beginning it was completely dependent on the user-agent (A browser is a UA but a UA is not always a browser) To determine how to convey those meanings. Because of this when CSS appeared, there was no standardized basis for things like margins, fills and borders, so many elements did not have (and still do not have) a common starting point. This is something that the CSS specification MUST have explicitly established and has never …

A restart only gives you a common baseline of zero to begin with.

There are smaller reboots, such as the so-called & # 39; universal & # 39; of "* {margin: 0; padding: 0; border: 0;}", but that can wreak havoc with the style differences of the form elements in FF and IE. There are larger reboots, such as Eric Meyer's "reboot", but they tend to be big, bloated messes that waste time-setting values ​​that do not need to be reset, but are limited to being frames for themselves. In fact, these massive reboots are the ones that give the concept a bad name and have caused many developers to reject them, even if that makes the compatibility more effective.

The one that I use (created by Dan Schulz, RIP) it is the commitment; the good safe means; The Goldilocks area. Aim only at what you NEED to have edges, padding and margins restored and nothing else. In a quarter of a K in size, it is not big enough to be a bandwidth problem or to present real claims.

All right, let's move on.

HOUR – The comment says it all. They are there for SEMANTICA and UA nonvisual. Since this is a screen medium where we can transmit that meaning in other ways, we can hide them.

@media (maximum width: 480 px) – Within this there is a text size change setting for the Microsoft and Apple browsers. Some older devices do not recognize the META graphics window, and this is the solution for that. Unfortunately, if you send the -webkit- to some Safari desktop copies, the user's ability to zoom is disabled. (Even though ALL Mobile Safari is not affected … it's CrApple, they're worse than M $ on things like this … Think of Apple's web technologies as if they were as badly composed as your idea of ​​a cooling solution) ..

Fortunately, all mobile devices that "need" this solution have 480px or narrower screens, and it is unlikely that many desktop safari users configure the browser window so small, so a simple media query to say no Send this to nothing "bigger" handles the problem.

From this moment, I will make the design of the desktop with the support / degradation inherited FIRST. Many people say "the mobile first" and that is totally negative. See, we can go to modern mobile devices with media queries, we can not go to legacy desktops. Why would you code what you CAN customize first and then stop using any mechanism to admit something else?

html, body – Set them to 100% height allows us to create a minimal height design. This will be useful with the "grid design" system that I will place there so that the background image can be stretched to fit the page.

body, button, entry, select, table, textarea – I like to configure all my common source data in advance. It must be taken into account that most of the elements are inherited from the body, so when BODY establish almost everything. However, just like the reboot, those other tags are not inherited, so I get them here as well.

I did not implement the hard-to-read webfont things since I am not a fan of them in the flow text. Avoid using these things if you care about accessibility: reserve web fonts for decorations, icons or additional things so that the user does not sit reading all the time. I do not advise the use of web sources in flow paragraphs, especially the unreadable garbage hosts of Google (for Windows users).

Even Google agrees to this, so they do not even use their own web resources in Google Search or Google Plus when it comes to CONTENT. As much as imitators of typography like it, it is difficult to make mistakes with Arial; Therefore, why Google continues to use Arial as its first choice on its "public consumption" websites!

body – The only thing about this label. In this case, I set up the "grid design module" of CSS to create a system of full-screen rows. under "grid-template-rows" the first value of "auto" means that the element shrinks to fit the content, while the second "1fr" element uses all the remaining screen space.

The final result of this is that our first inner element. – the H1 – will be its normal size, but the second element – DIV # content – will expand to fill the screen if the content is shorter than the screen, but it will also increase when the content is too high for the screen.

Note that this is broken in IE and older browsers, WELL. This is something of luxury presentation. Do not waste time leaning backwards for older browsers. For now the result may not be beautiful, but it is USEFUL. that's the line to draw on the support efforts of your legacy browser. It should WORK, but do not jump through hoops of fire for people who refuse to pull their heads back a decade ago!

h1 – the header has a lower fill to make it nice, big text, color, nothing fancy … EVEN MORE.

h1: before – this generated content creates the red bar with the Canadian flag on it. It is taller than the image to give the top fill area you had, with the bottom placed in the bottom center and the size of a fraction of the page.

I did not do this in percentage like the one you had, since it became absurd on my 4k screen. MS is a much better measure and should be used as much as possible since it makes things scale automatically.

PX is inaccessible, EM means that users who know / need autoscalling do not have to dive for zoom. The WCAG says to use EM, so use them!

Again, all this is presentation, not content, so it really has nothing to do with marking. Generated content :)before ,: after) it often allows you to do all sorts of amazing things without peeing in the HTML in the process.

#content – Background, color, nothing too sophisticated, but note the size of the background: cover; This is a newer property that, in this case, causes the image to automatically expand to fill the available space, showing as much of itself as possible and only being cut to preserve its aspect ratio. Very practical and powerful.

.widthWrapper – I put a small maximum width since it seemed to be what you were doing. Under normal circumstances, it would have a wider maximum width, but it really did not have enough content in the design for that. The irregular filling allows us to use margins / fill in the content without worrying about the collapse of the margins. A long theme worthy of an entire article in itself.. Naturally, by now I suppose you know what automatic margins do.

.subsection – It's also padded, and I've hit the size of the font since you seemed to have it bigger. It should not be anything too familiar there, but I added more text shadows (in fact, several layers) to help improve readability. Text on images is always dangerous and compromises readability so far, too often! In the same way, the box's shadow box helps and so does a more beautiful hair.

.subsection p – Bottom filling instead of margin to avoid collapse of the margin again.

# what do we do – more padding on the right so we can put the image of the passport. Once again at the EM scale. I remastered the image to remove the remaining edge and have a cleaner alpha transparency instead of the palletized version I had.

.continue – Again just the simple style of a button. I really did not copy the 1: 1 appearance and more guessed the baseball stadium.

.continue: active,
.continue: focus,
.continue: float
– our scroll states to darken the background and & # 39; lower & # 39; the shadow to make it look like the button is depressed & # 39; When aiming: moving the mouse (at least on the button and the anchor) is a good idea to capture both: active and: focus as well. Technically: the approach is for keyboard navigation and other alternative methods to navigate the page, but some older browsers use it incorrectly: active (which is supposed to be the last item that was clicked on), so simply Take all three!

.continue: after – I used the generated content to add the ">>" to the page. With the width and the positioning tricks, I can slide without additional marks.

.continue: active: after,
.continue: focus: later,
.continue: hover: after
– Adjust the width and the left position to show it. Easy-peasy lemon-squeezy.

#footer – Alignment, and again a bit of text shadow to aid in readability.

# footer img – I set their height in EM to climb and I allow them self-width to preserve their aspect ratio … then a simple filling. How they behave by default as if they were block in line (although they are not, they are "special") We do not even need to do anything else.

# strong foot – we use the transformation in capital letters instead of bold to indicate our "greater emphasis".

# footer – I hit the space between letters since it looked better, and of course, fill the bottom to separate a little more things.

… and that in a few words is the design of the desktop. To be compatible with mobile devices, we only need a media query: we use a semiliquid design (it has a maximum width, not a fixed width) (based on em), and there are no real columns to eliminate, so it's quite simple .

@media (maximum width: 48em) – I just shrunk the fill / spacing H1 and the size of the flag, decreased the width of the wrapping of the wrapper and eliminated the image of the passport in #whatWeDo.

That is all.