Is it possible to create a HTML 5 tile with a contemporary Metro-style UI?

I am curious to know if it is possible to replicate the tile system found in the modern UI of Windows 8 on an HTML page.

I have already created a demo based on a website. You can view it here. Below is the code snippet:

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now, I am interested in adding the same slide movement effect seen in modern UI. I believe this requires JavaScript. I am also wondering if HTML5 or CSS may offer a similar feature. Do you know where I can find a sample to achieve this effect?

javascriptcsshtmlmodern-ui

Answer №1

If you're looking to create tiles using jQuery and JavaScript, you might want to check out the Metro JS plugin by Drew Greenwell.

Answer №2

For those currently viewing this content, I highly recommend checking out MetroUI. It operates on a similar methodology to Twitter Bootstrap, making it user-friendly and capable of producing impressive results.

Additionally, it was developed with guidance from Microsoft to ensure a top-notch user interface.

By using MetroUI, you can create designs that closely resemble the Windows 8 aesthetic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable users to choose multiple rows at once or alternatively choose by checking the checkboxes

When using Tabulator with the setting table.selectable = true, any cell click selects the row. However, I specifically want rows to be selected only via checkboxes, so I set selectable = false. The issue now is that the checkboxes behave like a radio butt ...

javascripthtmltabulator

The onChange event was not able to be activated within the material-ui radioGroup component

Utilizing the RadioButton component to showcase different options of a question within a custom-built component: import FormControl from "@material-ui/core/FormControl"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Grid from " ...

javascriptreactjsreduxmaterial-ui

What is the process for transforming OpenTopography point cloud color data from NSF into RGB values?

I'm currently working on a small project focused on visualizing NSF OpenTopography data in a point cloud using three js. While I've been able to plot the data points successfully, I'm struggling to understand the color values associated with ...

javascriptcolorsthree.jspoint-clouds

Ways to split a string using jQuery

I am working with a jQuery string array that contains the following elements: ["$1#Structure$2#Accounting$3Acc#$1Programming"] My task is to split the strings after the '#' symbol and provide the following result: ["Structure","Accounting","Ac ...

javascriptjquerystring

Having trouble displaying the image on the screen with Material UI and React while using Higher Order Components (HOC) for

I'm facing an issue with displaying an image on my Material UI Card. Despite checking the directory and ensuring it's correct, the image still doesn't show up. Additionally, I need assistance in modularizing my code to avoid repetition. I at ...

javascriptreactjsmaterial-ui

Stop the link height from changing when hovered over

Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering. However, for links ...

cssangularjsflexboxangular-materialangular-flex-layout

Dividing the webpage background into separate sections to showcase a variety of colors, patterns, and more

I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage. Figuring out how to achiev ...

htmlcss

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

javascriptjqueryhtmlcss

Utilizing jQuery to scrape HTML and dynamically manipulate elements

Is there a way to retrieve HTML content from a different subdomain and incorporate it into the current site? HTML snippet: <head> <body> <div id = "items"> <div id = "#one"> <ul> <li><a href = "#">C ...

javascriptjqueryhtmlajax

The solution for fixing contenteditable is as follows:

I am currently working on a script to clean up pasted text within a contenteditable div. While the script is functioning well for most part, I have noticed that in Firefox, line breaks get removed when the text is copied within or between the divs. Does ...

javascriptjqueryhtmlcss

The process of authenticating route parameters in Nuxt

I'm having trouble validating route parameters in my page component using the following code: async validate({ params, store }) { await store.dispatch(types.VALIDATE_PARAMS_ASYNC, params.id) } And here's the corresponding code in the store: ...

javascriptvue.jsasync-awaitnuxt.js

Delete the current row in the table before adding a new one with jquery

Having a HTML table and performing updates using Ajax. Everything is functioning properly so far. When clicking on the Edit button, the values are displayed in the textboxes correctly. However, when clicking on the Add button, the table is updated accordin ...

jqueryhtmlajax

What is the best way to locate the closest element using JavaScript?

Is there a way to locate the closest object to the mouse pointer on a webpage? I have a hypothesis that involves utilizing the array function, however, I am uncertain if that is the correct approach. Furthermore, I lack knowledge of which specific proper ...

javascript

Challenges with pointer-events and z-index

I have been struggling to understand why I am unable to click the links in my footer. Even though my CSS may not be perfect, it does serve its purpose. There must be a more efficient way to create a footer that sticks to the bottom of the page and appears ...

htmlgoogle-chromecss

use a jQuery function to submit a form

I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...

javascriptjqueryhtmlajaxdjango

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

Why does tsc produce a compiled file that throws an exception when executed, while ts-node successfully runs the TypeScript file without any issues?

I have written two ts files to test a decorator. Here is the content of index.ts: import { lockMethod } from './dec'; class Person { walk() { console.info(`I am walking`); } @lockMethod run() { console.info(`I am running`); } ...

javascripttypescripttypescript-decorator

Sending a string array to MVC controllers through ajax

I've been struggling to pass a list of strings from a multiple select to the controller. Despite seeming like a simple requirement, I've spent hours trying to figure it out without success. I've done some research on this but haven't be ...

javascriptc#jqueryajaxasp.net-mvc-4

Sending an Angular scope variable to JavaScript

I am working with an angular scope variable that is being used in ng-repeat. My goal is to create a chart that starts from a specific date, ends at another date, and includes a marker for the current day. I am utilizing loader.js for drawing the charts in ...

javascriptangularjschartsscope

Monitor the status of an AJAX request for fetching JSON data in a Rails application

My JS code fetches JSON data from a controller method in a Rails app: $.ajax({ xhr: function() { var xhr = $.ajaxSettings.xhr(); xhr.onprogress = function(e) { if (e.lengthComputable) { console.log(e.loaded ...

javascriptjqueryruby-on-railsjsonajax