FreshBoot / LyokoBoot 2013.2 Development Thread

[TheAppleFreak]

One of the things that I regret doing back when I was developing the first iteration of Lyoko Freak 2013 was that I did not communicate effectively with the community about the changes to our website. While I wanted to surprise the community with a fresh coat of paint for the forum's eighth birthday, I realized that there were a number of usability issues with my implementation. At times, I've felt that a lot of my changes were arbitrarily made, and I'm not happy about that. So, I've made LyokoBoot open source and accessible to everyone, but unless you have access to a phpBB installation, it doesn't do much good for you.

Each week, sometime on Friday, I'm going to upload a screenshot of my week's progress, up until I actually push all of the changes to Gold Master. It's going to look broken, the appearance will change dramatically as I rewrite the logic of the program, but it's going to happen. Each week, feel free to prod at what I'm doing. Tell me where I'm going wrong. Tell me what features you'd like to see. When 2013.2 launches, your feedback will make the entire site better for all of us.

At first, I'm going to work on another project called FreshBoot. FreshBoot is a Bootstrap 3.0 forum skin, replete with "Yet Another Bootstrap Site" styling. FreshBoot is not just for Lyoko Freak; when I finish it, it's going to be open source, made for developers of phpBB styles who want a solid foundation to base their code on. From there, I'm going to theme FreshBoot into LyokoBoot, which will then become the public face of our website. This process will take some time, as I do not have many opportunities to work on it, but it will be completed eventually.

Resources:
FreshBoot GitHub Repository - Actively maintained, look in the "dev" branch

Updates:
7.12.13 - Header, week 1
7.19.13 - FreshBoot announcement, week 2
7.25.13 - FreshBoot thread view mockups, week 3
8.2.13 - More rambling about mockups
8.9.13 - Getting started with Bootstrap 3 (finally)
9.24.13 - what am i doing up at 3 am edition
9.26.13 - Styling the post view
10.4.13 - Finished the post view, first pass
10.11.13 - Working on the post editor

instacodes: instagram for people like me

[TheAppleFreak]

Week One: Focusing on the header

The header is one of the first things you see on a website. It guides you, it takes up space at the top, and it sometimes even tells you useful stuff. Some of the feedback on LyokoBoot 2013.1 was that the header was too big. With the image banner alone clocking in at 300 pixels tall, I can see why. On my laptop's 1920x1080 screen (where most of the development is progressing), it looks quite nice, but usability is severely impacted on smaller resolution displays, like 1366x768 screens (a common resolution for many laptops nowadays).



As you can see, one of the most noticeable changes is that the header is no longer gigantic. The image banner is a measly 100px tall, and the navbar and the padding underneath it is an extra 50px. Once I strip out unneeded elements from the navigation underneath the navbar, I hope to reduce the navbar space budget to about 200 px. For reference, that's two thirds the height of just the image banner. And, if you're fans of the navbar that's always at the top of the screen, don't fret: once you scroll far enough to hit the image banner, it affixes itself to the top of your screen, similar to how the current navbar works.

(I changed the image banner itself to more easily distinguish my test install with the live website, and as a temporary measure I've removed the banner text. That will be reintroduced when I get to styling the header properly).



The navbar has some new stuff going on. If you take a look at the "Forum" tab here on Lyoko Freak right now, you'd notice that there are a few user functions there as well as a quick index of the different categories. I'm delegating the functionality of that tab to two separate menu, in an easier to understand format that will look better on the eyes (to further that goal, I also made the text a shade of grey instead of pure white, since the contrast between the colors was too harsh).

The Forum menu deals with functionality related to navigating forums and viewing posts. You can use it to see new and unread posts, or to navigate the various categories or top level forums on the site (the second bit of that is currently broken on every page except the site index). A new feature is that this is dynamic; it will automatically generate that list of forums, rather than having them all hard coded into the HTML. It makes it easier on me further down the road, and you guys should see no difference in usage.

The User menu is more focused on your profile and settings here at LF. You have quick and easy access to your user profile, your User Control Panel, your Private Message inbox (and it'll update to tell you if you have new messages!), the Compose button, the Moderator and Administrator Control Panels (only for mods and admins, obviously), and a logout button. Something that took me a fair amount of work to figure out was seeing your avatar in the menu. Since there was no function to get the URL to your profile, I had to write one ({S_USER_AVATAR}, which you might have seen in the minor patch notes thread). The pictures right now do nothing except look nice. I'm still figuring out the styling. Logging out replaces this menu with a "Login/Register" option.

Well, that's my progress for this week! I don't work on this every day, so progress might go a little slowly. It will get done, though!

[TheLQ offline]

Looking great! I assume the header and the nav bar stay at the top of the page (not the current sticky nav bar)?

[TheAppleFreak]

Looking great! I assume the header and the nav bar stay at the top of the page (not the current sticky nav bar)?

The header will scroll with the rest of the page as usual, but the navbar will affix itself to the top of the browser viewport when you scroll past it. After you scroll past that, it'll behave like the current navbar.

[TheLQ offline]

Minor feature request: Make embedded youtube videos go behind the nav bar (I actually didn't know this was possible)

http://stackoverflow.com/questions/5323 ... -behvaiour
http://manisheriar.com/blog/flash_objects_and_z_index

[TheAppleFreak]

Minor feature request: Make embedded youtube videos go behind the nav bar (I actually didn't know this was possible)

http://stackoverflow.com/questions/5323 ... -behvaiour
http://manisheriar.com/blog/flash_objects_and_z_index

I didn't even know that was a problem. It looks like it's working just fine on the current live version of Lyoko Freak.


I'll implement those changes, though.

[TheLQ offline]

Weird, maybe its because flash is more integrated in Chrome?

Firefox:

[LyokoMan95 offline]

That's a known bug with Flash and some browsers. There's an easy fix for it let me see if I can find it...

nvm...

Also reposting from other related thread

My quickly hacked up edit with fancy new fonts:

I replaced the logo image with pure FF Cocon Web Pro and the essentially all other text is in Museo Sans (both found at typekit.com)

[TheAppleFreak]

Week 2: FreshBoot announcement

Update for this week: there are no updates. I know, heresy, but between work, classes, and some doctors appointments I haven't had time to properly work on it. Additionally, I've been thinking of the theme optimization, and I've come to realize that the theme that LyokoBoot is primarily based off of is a kludge of CSS and functions that would take a bit of effort to clean up manually (LyokoBoot is based on a theme called skyBoot, itself based on another theme called proBoot). I don't like the idea of having to skim through all of that code and breaking stuff until it's fixed, so I'm going to start work on my own fresh take on a Bootstrap theme, which I'm aptly calling FreshBoot.

FreshBoot will be a basic, unstyled Bootstrap theme. Once FreshBoot meets my quality expectations and feature requirements (it doesn't look like crap, responsive design works, the necessary CSS and JavaScript is toned down to only what's needed on page load, it registers as valid HTML5, etc), I'll style it as LyokoBoot, specifically for our own forum.

I've created the repo for it on GitHub, but right now it's just stock proSilver.

[TheLQ offline]

Update for this week: there are no updates. I know, heresy, but between work, classes, and some doctors appointments I haven't had time to properly work on it. Additionally, I've been thinking of the theme optimization, and I've come to realize that the theme that LyokoBoot is primarily based off of is a kludge of CSS and functions that would take a bit of effort to clean up manually (LyokoBoot is based on a theme called skyBoot, itself based on another theme called proBoot). I don't like the idea of having to skim through all of that code and breaking stuff until it's fixed, so I'm going to start work on my own fresh take on a Bootstrap theme, which I'm aptly calling FreshBoot.

FreshBoot will be a basic, unstyled Bootstrap theme. Once FreshBoot meets my quality expectations and feature requirements (it doesn't look like crap, responsive design works, the necessary CSS and JavaScript is toned down to only what's needed on page load, it registers as valid HTML5, etc), I'll style it as LyokoBoot, specifically for our own forum.

I've created the repo for it on GitHub, but right now it's just stock proSilver.

Have you considered using a different CSS library? Bootstrap is used everywhere and while you've done a great job customizing phpBB with it and making a really awesome home page, lyokofreak still looks like YABS (yet another bootstrap site)

I know its kinda late in the process for this, but just a thought.

[TheAppleFreak]

Update for this week: there are no updates. I know, heresy, but between work, classes, and some doctors appointments I haven't had time to properly work on it. Additionally, I've been thinking of the theme optimization, and I've come to realize that the theme that LyokoBoot is primarily based off of is a kludge of CSS and functions that would take a bit of effort to clean up manually (LyokoBoot is based on a theme called skyBoot, itself based on another theme called proBoot). I don't like the idea of having to skim through all of that code and breaking stuff until it's fixed, so I'm going to start work on my own fresh take on a Bootstrap theme, which I'm aptly calling FreshBoot.

FreshBoot will be a basic, unstyled Bootstrap theme. Once FreshBoot meets my quality expectations and feature requirements (it doesn't look like crap, responsive design works, the necessary CSS and JavaScript is toned down to only what's needed on page load, it registers as valid HTML5, etc), I'll style it as LyokoBoot, specifically for our own forum.

I've created the repo for it on GitHub, but right now it's just stock proSilver.

Have you considered using a different CSS library? Bootstrap is used everywhere and while you've done a great job customizing phpBB with it and making a really awesome home page, lyokofreak still looks like YABS (yet another bootstrap site)

I know its kinda late in the process for this, but just a thought.

That's actually one of my design goals for LB 2013.2 (removing the YABS look, not switching libraries). I've been spending a lot of time as of late looking through the unofficial Bootstrap examples Tumblr page, and while most of those sites are clear cases of YABS, there are some really knockout sites where you can't tell that it even uses Bootstrap at all (until you look at the source and see the standard Bootstrap.js and various CSS files that form the base of most Bootstrap sites). By the end of 2013.2's dev cycle, I want Lyoko Freak to be one of those knockout examples. For what it's worth, Bootstrap is one of the easiest libraries that allows me to quickly prototype and implement new designs and functionality.

The reason that I'm making FreshBoot is because the inherited CSS from skyBoot and proBoot is causing unintentional glitches in the rendering. For example, I haven't taken a good look at it yet but the navbar from the beta repo shouldn't be shifted to the right be however many pixels that is. Unless I don goofed in the CSS there (knowing me, that's entirely possible), the offset is a result of some older code interfering with the standard rendering that was not present in the live version of the site.

[TheAppleFreak]

Week 3: FreshBoot thread view mockups

And now for this week's update! For the immediate future, I'm not going to be directly working on FreshBoot code, but rather on design mockups for FreshBoot. One of the things that I love about Bootstrap is how easy it is to quickly design and prototype code, but the other thing I love is how an entire community has formed around the framework, with tools, plugins, and documentation galore. For design mockups, I'm using the tool Jetstrap, which I have nothing but praise for. It's almost like Adobe Dreamweaver, but with two major differences:

1) It updates the display in real time using my browser's rendering engine (with all of its bells and whistles, meaning what I see is what I can reasonably expect to work when I plug it in to phpBB)
2) It has a menu to simulate different viewport widths, meaning I don't have to have my browser window at an uncomfortably small size to work on the code. Incredibly, incredibly useful.

But enough about that, have some screenshots! These are a few builds old; I didn't have time to snap fresh screenies. These focus mostly on the thread view, where you're going to spend 95% of your time here on LF.

Spoiler: show

Desktop view

Mostly working as expected. No immediately unforseen problems.

Tablet view

Obviously I have an issue with word wrap and long-ish usernames, like my own. I'm still trying to figure that out.

Mobile view

While it's not yet complete, I think the mobile view is coming along fairly nicely. In the current build, I have a menu that appears to the right of the username, allowing access to forum functions like viewing the user's profile, sending them PMs, et cetera. I'm also trying to figure out how to integrate posting functions, like editing, quoting, reporting, and whatnot.

I'm primarily focusing on the desktop and mobile views, since those will be the most used. I'm trying to draw inspiration from Tapatalk and mobile Tumblr's interfaces for the mobile; I hope I can get these looking nicely.

EDIT: So you know, these mockups are real code. Here's the latest build on my iPhone:

Spoiler: show

im not a serious designer

[TheAppleFreak]

Huh, apparently Bootstrap got updated to version 3.0 RC1. As I move away from design mockups to actually implementing code within the repo, I'm going to use Bootstrap 3 as my development target. Based on my (incomplete) glance at the new documentation, it looks like a lot of the CSS classes have changed, but not the process behind it. It's gonna take me a little time to learn the new methods.

There's so much black and flatness....

[LyokoMan95 offline]

Check out bootply

[TheAppleFreak]

Check out bootply

Took a look at it. The layout of its viewports annoys me a lot. From what I see, they tried to stuff as much information on the screen as possible without considering usability. My laptop (my primary dev machine) has a 1080p screen, and I figure I only get about 400px of screen real estate to see what my code does. IMO, Jetstrap has a much better layout, even if it's not yet Bootstrap 3 compatible.

[TheAppleFreak]

Week 4: FreshBoot thread view and forum view mockups

After news broke that Bootstrap 3 was on the fast track to release, I had a debate with myself to determine if I'd stop working on mockups and begin using BS3 code in the actual skin, or continue working with BS2 on mockups. In the end, I decided on the mockups, at least until Jetstrap supports BS3.

Since last week's update, I've polished the code behind the thread view and added in a few more buttons. Drawing inspiration from the mobile Facebook and Tumblr apps, any applicable post actions are now kept in a small button toolbar attached to the bottom of each post. Because I have no idea what I'm doing, the button code actually renders twice in two different places, then shows or hides the top or bottom post interface depending on the viewport width. Additionally, some image signatures may be larger than the space allocated for a post. Since I absolutely hate it when I accidentally scroll right on a mobile page when I shouldn't be scrolling in that direction at all, I wrapped the sig in its own div and set the overflow to always break into scrollbars when need be (100% width, and a Javascript function that gets the height of the inner elements and sets that as the pixel height of the signature). I'm leaving that alone for now so I can clear my head. I'll return to it when I do another polish pass over the mockups before moving to actually work on code implementation.

One of the most important elements in a phpBB based forum is navigation through the various areas of the site. While phpBB Core handles making the links actually work, it's up to the style to make it look and feel pretty. One of the things that I've prioritized is to not only make it look fantastic, but also to make it feel great depending on what device you're using. One of the things that LyokoBoot 2013.1 suffers from (among many issues) is there's too much information being displayed on screen instead of too little. From my own experience using forums, I can care less about how many posts or topics an individual forum have. The only things I use are the link to the subforum index and the link to the last posted in thread. I think I can safely say that this is how most people use that information too.

Resolved to make this feel fantastic on mobile devices, I stripped down the forum index to its barest essential: the forum link. I increased the padding on the top and the bottom of the link (about 10px in both directions) and added a light gray highlight to the div of every odd link (done by overlaying a black overlay across the entire div, below the link and images on the z-index, and setting the alpha transparency to about .1 or .2). Forum image support was gained by simply moving the link margin over by about 50px or so and stuffing the image in there (there was a little bit of negative margin trickery to make it line up with the image, and some overflow truncating to make long forum names fit on one line). I added a small Glyphicon to the end (a > within a circle) to signify this was a link, and I added a quick CSS class that would change the div fill with a light blue color to signify a new post being made. This goes underneath the overlay, so the highlights should stack. On LyokoBoot, I may use light and slightly darker blue for the primary color scheme, and have new posts be light orange instead.

All this being said and done, it did a great job of doing a single task, which was leading you to the forum. One can argue that you really don't need much more than that for a mobile interface, but that leaves the "last active topic" link out in the cold and the other information dead in the water. I haven't had the time to actually figure out the rest of the interface yet; that'll be my challenge for this weekend as I recover from having my wisdom teeth removed.

Unfortunately I have no screenshots for this week, since I have been AFK all of today and haven't prepped anything new. I'll try uploading some when I remember to.

[TheAppleFreak]

Week 5: Getting started with Bootstrap 3 (finally)

I haven't done much in terms of drafting or development this week. It's really just been figuring out how Bootstrap 3 works (protip: I don't know how it works still) and doing actual work (ha). That being said, I have been reading up on HTML5 and good programming habits, and I've learned some good stuff about HTML5, Javascript and jQuery. To prevent this from being another copout week, I did download the Bootstrap 3 dev resources and tossed it into proSilver. I'm working on the thread view, using what I have on Jetstrap as inspiration. I still have a lot more work to do.

Spoiler: show

Just to aid in the process of ensuring that I didn't forget everything, I still have all of the original code loaded up. The red button is tied to a jQuery script that hides all elements with the "post" class (which is stock prosilver); all of my code has the bs_ prefix.

prosilver is messing with a lot of the Bootstrap CSS, but because I'm working on structuring the HTML first, I'm not concerned about code conflicts right now. One of the things that I learned about was semantic web design and the bad habits that Bootstrap unintentionally propagates within the webdev community, so as I begin stripping out the old prosilver code, I'm going to be making my CSS a lot cleaner and more semantic.

yay buzzwords

[TheAppleFreak]

screw my life i stayed up until 3 am juggling between this and schoolwork

Morning edit: Well, the project isn't 100% dead yet. I've been mulling over a number of design changes and functionality considerations from the previous mockups that I've done, but it wasn't until fairly recently that I actually began to write code for the project. What you see there is the current build of the theme, in all of its very unfinished glory. When I should have been doing schoolwork, I've instead been probing around the Bootstrap documents and the mockups of the project that I did over my vacation to Europe this past August and attempting to construct them into something dynamic. And well, I'm working on it.

So far I've more or less completed the header, footer, and some of the button code. It's a lot of small things here and there that I've been jumping around, and it's slowly coalescing into something that almost sort of works.

I also love LESS, but I haven't used it nearly as much as you'd expect so far. Bootstrap is good about its built in classes.

Spoiler: show

[TheAppleFreak]

Two days later, and I've made some progress in the thread view. It's amazing how some simple HTML and CSS can really make something much more usable, no? Better yet for developers who may fork my code in the future: a lot of the colors and margin sizes that I'm working with are variables, making it easy for others to customize my code.

I'm considering jumping ship from LESS to SASS; while LESS is cool and all, I've compiled a few of my stylesheets and some of the code in it is horrifying. Apparently, when you use a mixin, it copies the entire base class to your custom class. When I'm including some of Bootstrap's built-in classes in my own custom classes, the size of my classes becomes excessively large. Meanwhile in SASS, it defines your custom class along with the base class and then adds any other styles that you defined. It's a better system, IMO. Only issue is that there's no client side compilation via JavaScript, which I like about LESS for development purposes.

According to Sublime, I only have about 80 lines of custom CSS, which means that making the transition shouldn't be too painful if I start now.

Spoiler: show

Also, I've recreated the Github repo, so if you want to see how my work is progressing on your own phpBB install, feel free to clone the repo (my work is in the "dev" branch for now). Just be aware that Chrome (maybe Firefox and IE9+, I'm not sure) likes to cache LESS files, which certainly caused me some grief while working on stylesheets. To force it to not cache my LESS, open the Developer Console (F12, or Ctrl-Shift-I), click on the gear in the lower right hand corner, and select "Disable Cache while Dev Tools is Open."

[TheAppleFreak]

Just a small, inconsequential update: I've migrated FreshBoot from LESS to SASS, and am continuing work on the HTML now. I have some mockups from over the summer that I'm trying to recreate in the style.

[TheAppleFreak]

10.4.13 - Finished initial post coding pass

Just to make it clear, I'm still trying to figure out what looks best for FreshBoot. I'm not the best at CSS, so this is an experiment in trial and error. That being said, I think for my initial coding pass, this looks halfway decent. I'm planning a second pass where I'm going to critically reexamine how everything looks and comes together, and do a little bit of restyling before I publicly release FreshBoot r1.

Spoiler: show

Post view (long post)


Short post + quick reply

Also, if there are any webdevs among us who want to contribute, the GitHub repo is public. I would appreciate some help with all of the styling on this.

[nodsviper offline]

I would certainly help out if I had the knowledge.

[TheAppleFreak]

10.11.13 - Post Editor

Okay, so update time: Things are coming along rather nicely. I went against my word and put a few more polish changes into the thread view (viewtopic_body.html); not only are the margins and spacing more consistent with standard Bootstrap elements, but for developers looking to fork FreshBoot, it also has support for a SCSS variable that allows you to flip what side the profile is on (when $profileside is set to left, it behaves like LyokoBoot and most of the skins that are installed on the forum, but when it's set to right, it looks more like proSilver). I'm still not happy about the signatures, and I'm going to take a look at that later. Additionally, responsiveness is broken, so that's gonna be resolved in the polish pass.

Spoiler: show

$profileside: left;


$profileside: right;

Now, for the object of my attention: the posting interface. As you can see, it makes use of the powerful Bootstrap grid, with different element sizes based on whether it's in a desktop sized viewport (.col-md-10) or a tablet sized viewport (.col-sm-9). Also new to this build is the inclusion of Font Awesome, which I kinda wanted to avoid with FreshBoot but then realized that Glyphicons was too restricted for what I had in mind. I don't know what the dropdown menu is inheriting its properties from, but it's clearly not Arial/Helvetica. Additionally, I have preliminary support for $profileside, but I'm not sure whether I should fully implement it or keep it as it is right now.

Now, thanks to the grid, the design is already more or less fully responsive with minimal effort involved. I'm not 100% sure how it behaves on phones, since I haven't yet tested it on one, but it looks good on my desktop. Speaking of looking good, I'm already liking this interface much, much better than the current LyokoBoot interface. I can't wait until it's ready to deploy.

Spoiler: show

Desktop sized viewport


Tablet sized viewport


Phone sized viewport


$profileside: right; (work in progress)


Comparison image between FreshBoot phone interface (left) and LyokoBoot 2013.1 phone interface (right)

lyokoboot... kill me now

Also, for those of you who like the light grey styling on the post screen, I'm tying that into a SCSS variable that will allow you to change the background color of it. By default, it'll be an alias to $well-bg, allowing you to keep the color as-is, or you can change it to whatever you want (like #FFF in viewtopic_body.html).

For next week, I'm going to continue focusing on improving the post editor, and then working on the forum/thread indexes (currently unstyled).

[nodsviper offline]

Good work!

I also like how the new phone view is a lot less cluttered.

[TheAppleFreak]

Sorry, no progress to report this week Between school, the new Pokemon game, the new Stanley Parable remake, and my own laziness, I haven't worked on FreshBoot at all. My dev goals from last week are still planned for next week, though.