Menu

#97 HTML5/CSS3 + Responsive Templates

open
chatelao
1
2024-12-27
2015-11-08
Anonymous
No

Hello, I would be happy to update the code to make the PHP Address Book HTML5/CSS3 compliant plus have responsive templates where users can choose from.

  • I will switch <div> tags for <header>, <nav>, <section>, <footer>, etc. as needed to have semantic pages plus update the <meta> tags.
  • I will use CSS3 standards to create "Responsive Templates" so users will have different colors to choose from.

In order to achive that, I just need:

  1. To know if I change the html tags will create problems on the php, js "functionality"? (I will keep the "id" and "class" attributes).
  2. To modify the "Skins" feature. I will modify the php $skin_color function in order to call a color.css file instead of "include" some CSS code on the pages.

Example of format.inc.php:

<!DOCTYPE html>
<html lang="en-US" <?php if(is_right_to_left($lang)) echo "dir='rtl'"; ?>>
<head>
    <meta charset="utf-8">
    <meta name="Description" content="PHP-Addressbook">
    <meta name="Keywords" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/skin_<?php echo $skin_color; ?>.css">

    <link rel="icon" type="image/png" href="<?php echo $url_images; ?>icons/font.png" />
    <?php if(is_right_to_left($lang)) { ?>
    <style type="text/css">
        <!--
        /* CSS for right to left */
        label {margin-left:0.5em;float:right;text-align:right;}
        #content,#right,.right {float:left;}
        #nav,#left,.left {float:right;}
        -->
    </style>
    <?php } else {} ?>

The templates will be based on the W3.CSS framework

Please do let me know if you are agree, just reply to this post and I will check it later on. Thanks.

2 Attachments

Discussion

  • Anonymous

    Anonymous - 2015-11-14
    Post awaiting moderation.
  • Ivan Petrov

    Ivan Petrov - 2015-11-24
     
  • Anonymous

    Anonymous - 2017-05-22
    Post awaiting moderation.

Anonymous
Anonymous

Add attachments
Cancel