DragonPrime - LoGD Resource Community

Modules, Themes and other customizations for your game => Themes => Topic started by: Annunakitty on January 22, 2019, 02:55:59 PM



Title: Template: Hypertext - A basic foundation for building more modern templates
Post by: Annunakitty on January 22, 2019, 02:55:59 PM
Hi all!  I just spent a day pulling apart the Jade template and studying some of the other stock templates that Blarg hammered out, in attempt to lay the groundwork for a more modern template design.  The idea is simple: hypertext.htm contains page structure only and hypertext.css controls everything else from the layout, images, etc.  Long past are the days that websites are constructed from a mosaic of nested tables with hard coded design elements: say hello to the future with Web2.0!  Or, well, at least something closer since the game code itself still spits out a lot of unnecessary tables and whatnot.

Currently is useable on mobile but I haven't nailed down the scaling, this project has sort of been to get back on the HTML/CSS bike so there are probably bugs, I only barely know what I'm doing lol.

Screenshot:
(https://i.imgur.com/GAoJczpl.png)

Give it a spin if you like, and let me know what you think!


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: artti on January 22, 2019, 09:50:22 PM
Looks good, I like colours and such. If that blue link colour would be something more eye friendly, then it would be perfect template because of modern web standards.


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: TGTarheel on January 22, 2019, 10:36:33 PM
OK, so I downloaded it and uploaded it.  Guess I need to try looking t the code, I never have been good at templates.


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: Annunakitty on January 23, 2019, 11:31:25 AM
Thank you for the responses!  I'm still futzing with it, certainly not ready for a full release; the link colors are just plain ol default html colors so yea I'll fix that for sure.

Last night I spent a little while trying to css up some columns so nav is on the left and stats are on the right but this layout was being fickle so I may not end up actually using this specifically as a starting point for anything, BUT I will polish this up more to be released, perhaps as a potential replacement for the Console template.  Stay tuned!


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: Annunakitty on January 25, 2019, 11:21:55 PM
So, I've spent a good chunk of the last couple days diving into Bootstrap, a VERY comprehensive CSS framework for making responsive pages.  I've completely redone the previous attempt and put a good amount of work into making a very basic console-style responsive template.

Full screen on desktop nets you a modest 3 column layout you will probably find familiar:
(https://i.imgur.com/yAqlCLdl.png)

Smaller screens or resizing a desktop window will rearrange the Nav-Links below the page content, followed by the charinfo table:
(https://i.imgur.com/PMZLJsLl.png)

It's not perfect, but shouldn't take too much more work to be able to officially submit to the download archive! Attached is the current build if you'd like to give it a try!  Let me know what you think?


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: Sunday on January 26, 2019, 11:46:47 AM
Good to see another template not follow the '90s design pattern of organizing with tables.


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: pharis on February 08, 2019, 05:25:00 AM
i miss the graphics there ( i know that there are of course accessability concerns with graphics , but i still miss them thou )  ... looks a bit too dark. Do you have any others ?


Title: Re: Template: Hypertext - A basic foundation for building more modern templates
Post by: Annunakitty on April 19, 2019, 03:50:37 PM
I finally got back around to putting some finishing touches on the template, and I think it's basically ready for submitting to the downloads archive!  It still has some small hiccups but a lot of those elements I can't do a lot about as they are hard coded by the game.  If you try it out, please let me know if you notice any other bugs or quirks I should mess around with!

Full resolution on Desktop:
(https://i.imgur.com/prLsCfKl.png)

Mobile resolutions:
(https://i.imgur.com/4xouT1i.png)

Notable Changes:
  • Title and Subtitle scale according to viewport size, with min and max caps
  • Cleaned up and rearranged the footer elements
  • Added styling for Popup windows
  • Fixed how the User Editor/Petitions element is displayed (only visible with superuser privs)

i miss the graphics there ( i know that there are of course accessability concerns with graphics , but i still miss them thou )  ... looks a bit too dark. Do you have any others ?

Accessibility isn't actually that much of a concern in this case, although it should work pretty well with a screenreader as-is; this template is meant to be like the barest of bones basic reactive template.  It can easily be modified with images, and with proper accessibility considerations still be perfectly disability friendly.  It's dark because it's much easier on the eyes with the default "colours," honestly; I could make a light version but I'd have to finagle with the "colours" to prevent eye strain on a light background and tbh that's beyond the scope of what I want to do for this template >.>;;

© 2019 DragonPrime - LoGD Resource Community
Email Talisman: talisman -at- gmail.com
&oeXs)2U7=V BmܲV.U e=;p\}eG )Jj} C5EH7ˤH=j } mo|*Ŋw{drV_@IV>/- TFQJ׀̀Ve}l1,V O iNYx͘$e$;
Forums: Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines