Ingredients

This site is 95% coded with pure CSS and that's exactly the goal I wanted to achieve. Namely, to perform a lightweight portfolio site, without CSS frameworks, Javascript or JS libraries. I 've used JQuery code in two cases. Firstly to prevent the default behavior of a hyperlink. For example in the "Links as Buttons" part, I didn't want to click the styled button and return to the very start of the page. After that, I used JQuery UI and AJAX method (json or post) in my demo forms for a better UX. Finally, I used the <?php include('something.php');?> function just to make my life easier with the repetitive HTML parts, such as header, sidebar, footer etc.


flexicus-basicus

As I mentioned in the previous paragraph, no framework is being used for the creation of the present site. The main reason is that I wanted to code with flexbox tactics even more, to discover all its ups and downs in the web design life. Using float-based layouts, tables, cleafix hack was never my piece of cake and I cannot longer code (totally) with these methods to structure a site's layout. Flexbox is all I ever wanted to align vertically or horizontally an item or build a grid system from scratch, with the dimensions I prefer. Browser support nowadays is (almost) perfect, so there is no reason for coders to avoid flexbox.

Using the flexbox properties, again and again, in the .css files was tiring, so I decided to concentrate all of them in a separate .css file called flexicus-basicus. It includes the properties for the parent (container) and the children (items) as they are all explained in Chris Coyier's excellent article titled "A Complete Guide to Flexbox" . So, all I have to do from that point on, is to call the flexicus-basicus classes in my HTML code. So simple. Personally, this situation helps me gain control over the site's construction and come into a clearer view of its wholeness. A point worth mentioning, is the long names of the classes, e.g. .justify-content-space-between, but the purpose of this tactic, is to create memorable and descriptive class names, close enough to the real flexbox properties. Last but not least, flexicus-basicus classes are vendor-prefixed according to pleeease.io/play/.

You can check the flexicus-basicus .css file.


Images

One of my priorities is the reduction of website's bandwidth. It's well known that images make the site heavier and heavier. I used them only in cases I couldn't avoid. That means in parts as "Hover Captions"*, "ebooks","Blogs & Sites", "Youtube Channels".
In any case, the pictures are edited in Photoshop_7 and compressed in tinypng.com.
All the icons are result of Font Awesome .css file (THANKS).
* One site I recommend for free high-resolution photos is Unsplash.


Fonts & Colors

Apart from the Web Browser Safe (default) Fonts as Georgia, Verdana, Helvetica, "Palatino Linotype" and monospace, I used three more google-fonts.

  1. Roboto - for long text pages (like this one)
  2. Pacifico - only my name (title) in the header is written in that font
  3. Modern Antiqua - for menu items (header and sidebar) and headlines


I have to admit that choosing color for every element is not my best part. For example, too many link-buttons to colorize.

    The solution came from these sites:
  1. colorhunt.co - Curated collection of beautiful colors, updated daily.
  2. colorhexa.com - Color hex encyclopedia providing information about any color.
  3. W3Schools Colorpicker - Color picking for every taste.


Responsive Web Design

Due to the flexbox properties, the site is flexible itself. During the browser resizing, the fix-width (or flexible) items won't collapse but will wrap if necessary. Site's min-width / max-width is 580px / 1200px respectively. I added three breakpoints (at 810px, 880px, 1100px) using css media queries, so I have four different phases. An any case, every item has been built relative to its font, using the powerful em units. Lower em means smaller item, higher em means a bigger one. It's worth mentioning the use of viewport units (vh/vw) and the calc() CSS function to calculate a value dynamically.
Also, the viewport meta tag is necessary to control layout on mobile browsers <meta name="viewport" content="width=device-width, initial-scale=1.0">.
You can test the site in the Responsive Mode (Ctrl + Shift + M for Mozilla Firefox and Google Chrome) or at the following sites: responsivetest.net and designmodo.com/responsive-test


Cross Browsing and Validation

Getting into the Standards mode is necessary in order to prevent cross-browser compatibility problems. HTML5 features operation and latest browsers support can be achieved with the right DOCTYPE. That means I must use the following one <!DOCTYPE html> as the first element in my site.

Afterwards, I want a <meta> tag that tells the Internet Expolorer to render with the most current engine version available on the local machine. <meta http-equiv="X-UA-Compatible" content="IE=edge"> makes that possible.

Another problem is that every browser comes with a different build-in default CSS styling. The best way to resolve this issue is to apply a CSS reset that sets universal default values for all elements. Eric Meyer's CSS reset file is the answer! I also use the box-sizing: border-box; property to style everything, since I don’t have to do maths all the time.

Browser-specific prefixes are necessary but difficult to remember.
These tools do that for us : Autoprefixer and pleeease.io/play/.


    Some Cross-Browsing testing sites :
  1. caniuse.com - Support tables for HTML5, CSS3, etc.
  2. html5test.com - How well your browser supports the upcoming HTML5 standard and related specifications.
  3. css3test.com - This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
  4. browsershots.org - Check Browser Compatibility, a free Cross Platform Browser Test

When it comes to HTML or CSS validation, errors and warnings will always exist. The purpose is to eliminate them, or if it's possible ground them to zero. These online tools helped a lot.

  1. HTML Validator
  2. CSS Validator
  3. CSS Lint for better code
  4. Dirty MarkUp A web-based interface for cleaning the code
  5. HTML beautify HTML formatter and beautifier to make it easier to read by creating proper indentation. Also validates your HTML code