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>
<button title="Home Button" id="home_button"><i class="material-icons" >home</i></button>
<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.
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!
Related
This is the codepen for my HTML layout for a magazine - link here.
I have been experimenting with the CSS and trying to achieve a more blog-like design with my CSS, to emulate the effect seen at https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review
(well, the way the article and sidebar with other articles is; the article and Driven this week part)
Currently I have this CSS:
body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}
p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}
header {
background-color: #FFFFFF;
}
div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}
div.article img {
height: 340px;
}
but what sort of padding etc. could I use while keeping the div.article as white (FFFFFF) and get the header to work more effectively with the title?
if the header is in anything but h1, h2, h3 etc. it doesn't quite work - example at forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw
Although this uses Verdana here for ease of use, what's the best way of getting FontSquirrel fonts like OpenSans to work locally (i.e. not linking to online source, but the directory the fonts are in); I've often used .ttf when doing fonts other than Arial or Verdana.
I may be using Gotham font soon, but for now it's OpenSans and OpenSans Bold.
OpenSans Bold is for h1, h2 in the CSS soon.
This is only a testing page on localhost, but it maybe used as a template for a PHP site.
No Javascript is in use yet but if you have any good suggestions for ones that could work, I'd appreciate it. (I've kept the design simple for now).
The grey background will be kept, and div.article in white.
I would welcome any advice on how to turn this from looking rather staid into a more professional, blog-like design.
I think you should try to use a CSS framework, e.g. Bulma (which is lightweight and easy to use and based on CSS flexbox). See Bulma docs here: https://bulma.io/documentation/
As for the font implementation I think #font-face should do the trick - you just have to download the font to your server (or local device).
I was trying to add a custom font to my Neocities site, so I used the following css code in my style.css file:
body{
font-family: statusplz;
font-size: 10px;
}
p {
}
html {
background-color: #000100;
color: #999999;
font-size: 14px;
}
h1 {
color: #990033;
font-size: 28px;
}
hr {
color: #660033;
border-color: #660033;
background-color: #660033;
}
h2 {
}
#font-face {
font-family: 'statusplz';
src: url('https://vaguesoft.neocities.org/statusplz.ttf') format("truetype");
}
The custom font does not display in any browser other than Edge. I've used other sites with custom fonts on Firefox, and Chrome. I viewed the css files for those sites using the firefox dev tools, and they also used ttf files and #font-face, but actually worked. I don't know why the font isn't showing up in other browsers. I don't know if the problem is in the css file, the font file, or the html of the site. It was working at some point. It works on one of my computers, but that machine already has the font installed. Maybe I'm not handling frames properly (I do have a sidebar)? Any help would be greatly appreciated. Here's a link to the site: https://vaguesoft.neocities.org/
I have some images that are loaded with a cheap trick after the DOM is ready:
<img src="" data-src="/path/to/img" alt="">
I'm just putting the content of data-src into the src-attribute with JS. Nothing fancy.
But as there are a some hundred images to load this takes some time. So I was trying to use the unicode of a FontAwesome icon as alt-text to display a cogwheel as placeholder:
<img src="" data-src="/path/to/img" alt="">
Unfortunately this won't work because the whole FontAwesome-magic isn't clicking.
Has anyone ever tried the same? Is this possible after all?
I cannot claim credit for this solution, that belongs to #PeeHaa who wrote the comment that solved #Stephan_Weinhold's question.
I'm just trying to create clarity, as all of the official answers use JavaScript, and only if you read the comments will you find it's possible with simple HTML/CSS.
HTML
<img src="" data-src="/path/to/img" alt="" class="passphoto">
CSS
img.passphoto {
font-family: 'Font Awesome 5 Free';
/* customize the following as desired */
font-size: 9em;
display: inline-block;
width: 200px;
height: 234px;
border: 1px solid lightgray;
}
I'm afraid you can't. But I can offer you a trick.
The trick is that you can handle the image load error (that's why you want the alternative text, isn't?), then show the icon you want.
It's not good solution for SEO but you want to show an icon so I guess that this is not your goal.
Note If you can't see the effect in the snippet, watch it in the bin - I think it's because caching issue.
$('img').bind('error', function() {
console.log('error');
$(this).hide().after('<i class="fa fa-gear"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<img src="blablalba" />
http://jsbin.com/kahuxaqezu/1/edit?html,js,output
I'm having problems with this on iPhone now?
I used the ONERROR to inject the CLASS if the image is not found.
CSS
/* FONT AWESOME (support for all icons) */
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* FONT AWESOME (user icon) */
.fa_user:after {
font-family: 'Font Awesome 5 Free';
font-size: 9em !important; /* added !important, couldn't use 900, didn't work */
content: "\f2bd"; /* UNICODE (Font Awesome) <i class="far fa-user-circle"></i> */
line-height: 1.0; /* I had to add this because it was INHERITING 1.5 throwing off the spacing */
}
HTML
<img src="./images/.photo.jpg" onerror="this.classList.add('icon', 'fa_user');" alt=''>
Font Awesome documentation
User Icon
I have this really basic issue I am trying to solve for a while now. I am running out of all ideas.
I have a css pseudo-element before that I am styling like this.
#fPhone::before{
color: #78be20;
content: "\e622";
font-family: icons;
}
But on the browser it just prints out 622. When I inspect the pseudo tag, I see
content: "e622";
If I try adding "\" in the debugger it works but for some reason it doesn't pick it up from css.
I am running out of reasons that could be causing this.
Sure you imported the icon-font correctly and are using the proper hexcode? Below proof that it works as you may expect...
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#fPhone::before{
color: #78be20;
content: "\e0cd"; /* different code, but same effect */
font-family: 'Material Icons';
}
/* class is pre-defined in #import (default <parent>color, 24px)*/
.material-icons { color: #78be20; font-size: 16px; }
/*
find the codes and ligatures for Material Icons at:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
*/
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>
I have an HTML form with inputs and dropdowns. All have been styled using CSS. But for strange reason the dropdown is not responding to the CSS style that I set. If you look at the screenshot, you will see that the input fields appear correctly, but the dropdown seems to be using some OSX default look and feel which looks way off. The weird thing is that it appears correctly when I tested it on a windows Machine. Is there something I should be adding to make this appear correctly on OSX?
Thanks for the fiddle, I managed to reproduce your problem and also managed to find a fix.
I had to add rule appearance: none; to the select tag.
.form-field {
padding-bottom: 20px;
}
.form-label {
color: #6E6E6E;
padding-bottom: 4px;
font-size: 16px;
}
.input1 {
width: 90%;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #3E3E3E;
}
select {
-webkit-appearance: none; /* for webkit (safari, chrome) compatibility */
-moz-appearance: none; /* for firefox compatibility */
appearance: none;
}
<div class="form-field">
<div class="form-label">
<span>State *</span>
</div>
<div class="form-input">
<select id="state" class="input1">
<option value="FL" selected="selected">Florida</option>
</select>
</div>
</div>
Try using a CSS reset.
There are several ones out there. If you're using HTML5 you probably want Normalize.css: https://necolas.github.io/normalize.css/
If you're using traditional HTML, then the Meyer Reset 2.0 should do: http://meyerweb.com/eric/tools/css/reset/
Go to the links above and download the file. Link the file before your own styles.