Web programming with style guide


Feb Dao


In the previous post, I introduced you to the basic concepts of Style Guide, in this article I will analyze in more detail and details on completing a complete website with Style Guide.

Starting with the design drawing

As always, the design drawing is an important part of the website design process, the Designer will provide the programming team with a completed drawing that has been accepted by the client.

Next is Front-end developer

This is the difference of applying the Style Guide to web programming compared to the usual approach, as mentioned in the previous post, the design drawing will be taken to a Front-end dev to create the Style. Guide with full ingredients is shown as:

  • List of color variations
  • Font-family list
  • Global element tags: p, a, h1, h2, h3, h4, h5, h6, button, input, image, video….
  • Components
  • Sidewide: header, footer
  • Layouts
  • Pages

To do that, the front-end developer initially needs to analyze the design to determine which styles are global for each component, which styles will be customized according to each component; which elements belong to the header, footer; break down the blueprint into different components; What types of layouts are used: full width or container? No sidebar or sidebar, if yes, 1 or 2…?

Once you have components and layout, creating demo pages is also quite simple by integrating the necessary components into the appropriate layout based on the design. The data used are usually sample data taken from json files, this is convenient for future integrate from real data from the database.

Part of Back-end Developer

After the front-end has finished defining the components and the layout, at this point the back-end is quite simple, they just need to rely on the demo pages that the front-end has built before and transmit the actual data - instead of using sample data from the Json file like the front-end did. Now the Back-end dev has been put in place and it is their responsibility to build the database, focus on logic and problem solving, functionality, rather than taking care of whether this place should be used. What HTML tag, the markup I gave out like this was suitable for the front-end to syle or not….

The advantages of style-guide

As I mentioned above, the use of style-guides in web programming has many advantages, it helps the Front-end and Back-end work be clearly defined and not subordinated. depend on each other.

  • Front-end devs can feel free to define and provide suitable markups to style according to the drawings
  • Back-end devs can focus on the core of their value, not distracted by other issues, as the endpoint they need to bring out is data.
  • Checking the website's interface is also easier, moreover, if there are any design problems that need to be updated, the back-end developer doesn't need to know this, it can be easily updated. by designer and front-end dev

Hopefully, after this article, you will have a little more feel about the Style Guide, next article, I will introduce a very useful tool for web programmers to use style-guide, which is Pattern -lab. Please leave your comment or question if there is something you do not know after reading this article!

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.


  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word