Content Section Starts
Content or Main Navigation Section Starts Below
Definition of Style Guide
A style guide is the same as design patterns. The guide is designed to document repeated elements in design, so that they can be used consistently, especially by a group of designers. One of the reasons why I have created this is to show other people how to achieve the same effects I use on my websites. The other major reason is to document my design ideas, so that it will help potential future maintainers of my website. Some of these I have come up with all by myself, some I found somewhere else, and others I got the idea somewhere else, but adapted it for my use.
Not as Complicated as it Looks
The code in here looks long and complicated, but as you get used to it, it becomes much simpler, than it appears at first. First of all, this is not computer programming - you are not telling the computer how to work. Essentially, you are doing desktop publishing or word processing, but with code, instead of visually doing it. Most of the long numbers represent colors. Also, if you look closely, you will see the really long stuff is repeated several times over, which is only necessary, to include, to support older versions of web browsers.
Why Code Rather than Photoshop?
Most of these graphical effects can be done in Photoshop, but it is actually faster and easier for me to implement as code, so I don't have to remember the whole set of menus and graphic interface elements to draw out the effect. One of the beauties of doing this via code is that you can simply copy and paste the code, and then make minor changes, without having to figure out how to recreate it yourself.
Another good point about not using Photoshop is that there are no extras graphics files to download and manage. Another great thing about doing effects via code is that the code will expand and contract, with any length of text, or change in formatting, so that you don't need to adjust it, every time you change surrounding formatting. The final major advantage of coding is that the effects are always, at the highest resolution, that the device supports, automatically.
Most of these designs elements require a newer browser, to see the effects. To see the effects, in action, on my websites, you need to use a desktop computer, that is at least 768 px wide or an iPad, iPad Mini, iPad Air, or iPad Pro (everything but the first generation iPad). The browser requirements are Google Chrome, (Mac) Safari 7, Internet Explorer 10, or iOS 7 or higher.
Most my design elements use gradients extensively. Any other browser should work, that can handle linear, radial, and repeating gradients. I also heavily use CSS Counters (auto-numbering and auto-lettering with custom parameters), CSS Generated Content with CSS Pseudo Elements Selectors (inserting arbitrary text, with "before" and "after"), and various other CSS Selectors (including CSS Pseudo Class Selectors, like "odd" and "even," and CSS Attribute Selectors, like "ends with").
Generic Android devices (any device the announces itself as Android) and all phone or handheld devices (including iPhones) will automatically not load the advanced effects, so as not to overpower these lowest end devices and not to add effects to devices too small to see the effects. For tablets, this affects mostly Chinese off-brands and does not affect tablets sold by major Android manufacturer brands, as they report themselves erroneously as Apple iPads.
Internet Explorer Situation
Internet Explorer 8 and 9 fall into an entirely different and much worse category, as most of the even basic formatting of my webpages will not show up on these older browser versions. This is mainly due to Microsoft actively sabotaging web development, because the web allowed other companies to effectively compete with Microsoft, like Apple, Google, Facebook, and Amazon.com.
I have done my best to support Internet Explorer over the years, for those who cannot get out of their clutches, but there are now so many things that every other browser supports that Microsoft doesn't, that it is very difficult to even perform basic formatting for both Internet Explorer 8-9 and modern devices, like Apple and Google devices. Designing for modern devices and for Windows is like going in two opposite directions at once.
As I have to choose between supporting Windows or losing the users who cannot or will not upgrade, I am not willing to stress myself out enough to get it to work. I would have to at the very least sabotage Android users and I choose the future over the past. Google devices are underpowered and not very high quality, but they will get the basic formatting correct and turn out to be much easier to support.
I no longer support Internet Explorer versions 8-9. Internet Explorer 10 is a free upgrade, available for Windows 7 and higher. Windows 8 comes with Internet Explorer 10 pre-installed. The lowest version I still support is Internet Explorer 10 (on Windows 7). Most websites, especially the big name ones, are making very similar decisions for very similar reasons.
It is Time to Move On
The big outlier has been China, but they have now moved on, as well. Businesses may still use older versions of Internet Explorer, until the end of time, but you probably shouldn't be viewing my website at work, if you have an employer that forces you to use only old versions of Internet Explorer (and that is usually exactly the reason why they have that policy).
I provide everything for free and spend a huge amount of time and a significant amount of money on my websites and I have never and never will make any money off of any of it. My time is worth something, to me, though, so I am not going to spend time going down that rabbit hole anymore. It is a direct threat to my mental health to be under stress and this stresses me out. I enjoy creating things, not fixing them, so I will concentrate on that.
All computers and software have a limited amount of useful life and Windows is coming to the end of its life, for most home users. If you have a computer that is not made by Apple, or can't run a Google web browser (like Android), than now would be a good time to upgrade. Keeping with old versions of Windows is just going to keep getting more painful, over time.
And older versions of Apple devices will perform much better, than brand new Android/Google devices. As with any other electronic device, you get what you pay for. Everything electronic is considered obsolete within 3 years and I will never support anything older than 5 years. If you can't afford that, then you cannot afford a computer or the Internet.
Content Section Stops
Content or Main Navigation Section Stops Here