Material design on Nginx

Question

I'm trying to apply material design UI to working web application. Application uses Nginx, PHP, PostgreSQL. I have experience with PHP and PostgreSQL so the application works (code written in notepad++), but it is ugly as I have NO experience with web pages design, java(script) so using only basic html forms, input, button...

I would like to improve the UI so I started learn CSS. I downloaded material icons font and created several buttons, this works great and the buttons also scale to screen size.

h1 {
/* color: #999999; */
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
text-align: center;
}

@font-face {
  /* Material Icons big thanks to: https://google.github.io/material-design-icons/ */
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: clamp(12px,4vmin,30px); 
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons:hover {
  color: e3000f;
/*  background-color: #555; /* Add a dark-grey background on hover */
}

#home_button {
  display: block;
  position: fixed; /* Fixed/sticky position */
  top: 1%; 
  left: 1%; 
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/
  background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  text-align: center;
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 4px;
  padding-bottom: 0px;
  border-radius: 5px; /* Rounded corners */
}

#home_button:hover {
  /*background-color: #555; /* Add a dark-grey background on hover */
  filter: drop-shadow(2px 2px 2px #555);
  color: #e3000f; /* Add a dark-grey background on hover */
  background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/
}

<!DOCTYPE html>
<head>
<!-- This line is normally NOT included as font is locally loaded in CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- This line is normally NOT included as font is locally loaded in CSS -->
</head>
<body>
<a href="/index.php"><button title="Home Button" id="home_button"><i class="material-icons" >home</i></button></a>
<body>

Now I would like to include forms, textboxes, checkboxes, buttons... In guide(s) they always rely on node.js. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with proxyPass, but I can not use node.js on server so this is not solution.

What is the correct way to style the pages into material design and being able to keep all the PHP code and existing functionality?

To specify example what I'm trying to accomplish is to move FROM this simple HTML form (simplified here, in reality generated by PHP):

<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
  <label for="sample_input">Sample:</label><br>
  <input type="text" id="sample_input" name="sample_input" value="Empty">
  <input type="submit" value="Submit">
</form> 
</body>
</html>

TO material design form with outlined text fields and outlined button. In below sample there is material design html syntax, but missing correct css and javascript so it is not looking as on above links. Where/how to get it and make it run on Nginx without node.js?

<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label class="mdc-text-field mdc-text-field--outlined">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="sample_input">Sample:</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
  <input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input">
</label>
<button class="mdc-button mdc-button--outlined">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Submit</span>
</button>
</form> 
</body>
</html>

All the tutorials are heavily depending on node.js. Is it really possible to use material design only on node.js? If yes can the node.js code (locally developed) be exported and used on Nginx WITHOUT node.js?

Apologize in advance if my questions are newbie ones, but I read all the available manuals and was not able to find solution.

You seem to be confusing frontend with backend. Node.js and nginx are backend technologies and has nothing to do with material design. — Achtung

Atheesh Thirumalairajan Atheesh Thirumalairajan · Accepted Answer · 2021-01-04T02:06:37

NodeJS and Nginx are Back-end technologies.

Material UI is designed for a NodeJS Templating engine called React.

In PHP, in case I want to populate something from a database, I would write something like <p><?php echo("Value1"); ?></p>. I may be wrong as I do not use PHP.

In the NodeJS Family, the language does not have an inbuilt <?php ?> tag. So templating engines like EJS and React need to be used which help integrating this functionality of PHP.

Now, React is such a framework which is used to integrate support for the template tag (i.e., the <?php ?> tag) in NodeJS. and Material-UI is a theme for React.

So, finally, Material-UI is a theme for React and, React is a framework for NodeJS so, Material-UI will work only with NodeJS and Not Nginx, Apache, etc. which run PHP, etc.

You can use Bootstrap 4 as the CSS framework and https://daemonite.github.io/material or https://djibe.github.io/material as the theme in case of PHP (i.e., Nginx, Apache, etc.).

Most of the tutorials of Material-UI is based on NodeJS as it is made for Node. You will find tutorials where they demonstrate the use of Material-UI by porting its CSS as you mentioned for Nginx but, they do not work up-to the mark and Material-UI does not recommend it.

Even I had this question when I was in Grade 9. Hope this answers your question!

Material design on Nginx

1 Answers