How I made a google clone in 2 hours
I learned a CSS framework called bulma last week. It provides css classes that one can easily use in html (without writing any css). I learned it because I don’t like writing the same boilerplate css for every project that I do.
I know, it is not exact, but the purpose of this mini-project was to learn rapid prototyping without being a perfectionist. Since we’ve already talked about the what and the why, I’ll write about how I made this in the next section.
The whole page is a full-height hero component. This is used to add a banner to a webpage, but I thought it would be appropriate for a non-scrollable site like the google front page. The hero component provides three sub-components: hero-head, hero-body and hero-footer. These will be positioned relative to the hero component and will adapt responsively.
The hero-head component (magenta border) is also a navbar. The navbar component provides a sub component called navbar-menu, which is supposed to house navbar-start and navbar-end. Navbar also has navbar-brand subcomponent, but it’s not necessary here because it is used for a large logo in the navbar (which we don’t need).
All of the links are navbar-item’s which are used as a subcomponent of navbar-start and navbar-end.
For the hero-body section I used a columns component. This provides the common 12-column layout. This layout is used by the material design spec, which is an industry standard and is useful for having order and cohesion in a website design.
Columns provides many subclasses, most useful of which are is-n and is-offset-n, where n is the number of columns.
I first used a centered 12 column layout to get half of the available space, centered this using is-centered and then used a 6 column image component for the google logo, then a 10 column component for the search box and a 6 col comp. again for the two little buttons. As you see, the buttons are in a level component. This is used for having horizontally expanding containers and has a subclass called level-item.
Last but not least we got the hero-foot.
This is the component that houses the blue links that say “privacy” and “business.” To achieve a similar look I used the footer component, which only adds some humongous padding that I had to change by writing css 😐. I used levels to have the two lines of links.
