[CSS] Build web application CSS layouts with the YAML framework

Web design with CSS, HTML, and JavaScript has evolved to the point where web application interfaces often rival their desktop counterparts. However, there are still caveats and workarounds that can make creating a design from the ground up a daunting task.
Getting your design to work in every operating system and browser combination is time consuming and, quite frankly, a pain. This has all been done before, so why reinvent the wheel with every design? CSS frameworks like YAML (Yet Another Multicolumn Layout) provide a base so you can worry about overall site design instead of the many quirks of web design.

Building blocks

The YAML site describes it as “A modular framework for truly flexible, accessible and responsive websites.” As the documentation states, YAML provides a cross-browser compatible, functional, modular skeleton layout, which contains all of the most often used page elements. It utilizes column-based and grid-based CSS layouts. This allows you to quickly build interfaces with one to three columns. The grids come into play when laying out the individual columns–YAML utilizes its own feature called subtemplates for building flexible grid-based designs. At this point, you take the skeleton and modify the layout (if necessary) to fit your needs.

Drag and drop

While YAML is not a prepackaged layout, it does provide a tool called YAML Builder to quickly build a layout based on YAML features (Figure A). It provides a visual layout tool that utilizes the YAML CSS framework. You choose features in the Options dialog (on the left in Figure A), and it is laid out in the browser window.
Figure A

Design YAML layouts with YAML Builder (Click the image to enlarge.)
Figure B shows a two-column layout with teaser area near the top. The layout dialog in Figure B has been docked in the left area of the browser window (by clicking the icon in the upper right of the dialog), whereas it was floating in Figure A. The Toggle View button at the bottom left of Figure B allows you to view the design loaded in the browser as displayed in Figure C.
Figure B

A two-column layout with teaser area with YAML Builder (Click the image to enlarge.)
Figure C

The two-column design previewed in the browser. (Click the image to enlarge.)
Once you settle on a design, the code for your layout may be retrieved via the Get Code button. It opens the modal window displayed in Figure D, where it provides the web page code as well as the necessary CSS files. The design utilizes YAML, so it assumes you will have YAML files installed in your environment.
Figure D

Retrieving the source code for YUI Builder design. (Click the image to enlarge.)

Take it for a ride

YAML is freely available for download in a zip file (the current version is 4.01). The folder structure can be a bit confusing, and it takes a while to get accustomed to it. The installation includes four main folders:
  • demos: Pages and code that give you an idea of how the framework can be used.
  • docs: This includes basic YAML documentation with plenty more available online.
  • lib: Code components utilized by YAML. This includes the jQuery JavaScript library (minimum size).
  • yaml: The heart of the YAML framework contains all of the necessary code files; it contains subdirectories: add-ons, core, forms, navigation, print and screen. The core directory contains the main YAML building blocks.
The YAML source files contain import directives that reference other files within the framework, so you should be careful about changing the directory structure. The introduction page provides information on the various files in the framework with more details in the documentation.

Drawbacks

YAML may not be for everyone, and it certainly has drawbacks. For starters, it has a steep learning curve; after all, there is a lot in the YAML source files, and it takes a while to figure out how it works. The site provides excellent documentation and tutorials, so there is help on mastering it. In addition, there seems to be some code bloat in it–just a lot of code to load, though I am not the one to point out specific instances. When using YAML, you rely upon its developer and the community to keep it up-to-date and this type of crutch makes many developers cringe, but that is a drawback with any framework.

Why use it?

All the technologies (CSS, HTML, JavaScript, etc.) are there for you to use, so why utilize something you did not create? The web community helped hone YAML so it is battle tested. This means you can worry about designing a site and not the many quirks of web development. While I prefer YAML due to my experience with it, there are a number of such frameworks available and many do a great job, including YUI, 960 Grid System, and Blueprint. Like many development tasks, it comes down to personal preference.
There are many web designers and developers who turn their noses up at frameworks because they believe you should create your own code; this is debatable because most developers reuse designs over and over, which is along the lines of what frameworks do. Even if you do not utilize these frameworks, you can learn a lot by taking them for a test drive and looking at their code to see how they tackle various situations.
What is your preferred approach to web design? Do you use a framework or roll your own? Share your thoughts with the community.

Comments

Post a Comment

Popular posts from this blog

[SVN] Simple way to do code review

Image
Simple way to do code review Table of Contents A code review (also known as code inspection or walkthrough ) is often considered to be a complex, time consuming and highly regulated process. In reality it’s just another form of communication between team members and a great way to ensure code quality and stay up to date with changes. In this guide we will show a simple and effortless way to do it on a daily basis. Use version control We hope you are already doing this! Version control systems make any work inside your team much easier, and this includes code reviews. Check out our guide “Introduction to version control” if you are still managing code the old-fashion way, or are interested in learning some best practices. Stay up to date Email and RSS are common ways to be notified about new things and code changes are not exceptions. Depending on the project scope and team size you can choose between checking every commit or just doing review o
Read more

How to Choose a Technology Stack for Web Application Development

Image
What’s the most important thing to consider when you’re developing a top-notch web application? No doubt it’s the technology stack your app will be based upon.  The choice of a relevant tech stack is particularly challenging for small businesses and startups, since they usually have limited budgets and, thus, need a technology stack that provides the most bang for the buck to get their projects off the ground. The right tech stack is, to a great extent, the key to your project’s success, while the wrong choice of web development technologies may be a reason for failure. We’ve decided to give you a helping hand and reveal the criteria for choosing the most appropriate tech stack for your web application. WHAT IS A TECHNOLOGY STACK FOR WEB DEVELOPMENT Before moving on to the criteria for choosing a modern web technology stack, you should clearly understand what comprises the process of web development. Without going too deep into details, there are two sides to web de
Read more

Setting ESLint on a React Typescript project

Image
  Introduction After struggling a lot trying to install and understand ESLint on my React Typescript project, I decided to create a definitive guide to setting ESLint to a React Typescript project. The main goal of this tutorial is to set up step-by-step and explain every line added or executed, instead of just giving you a bunch of files with a lot of configurations and expecting that you will be able to understand what and how things are happening. So, let’s start! Prerequisites Note: You need Node version >= 10 installed. So, if you don’t have it, please go to the NodeJS website, and download and install it on your local machine. ( https://nodejs.org/en/ ) Step 1: Create a React Project with Typescript The following command will create a project inside a folder  my-app . On the terminal, run: npx create-react-app my-app --template typescript Step 2: Removing the pre-set ESLint configuration from React project React comes with an eslint configuration pre-setted. Let’s remove this
Read more