+

Containers






Containers/wrappers are simply div blocks. They are very convenient to use in every website to build. This user interface component will help you to add div boxes or containers in your responsive websites. These containers are simple html div. PixelzUI provides centered div containers for your entire web page management, media and flow of content. Even these div wrappers facilitates you to add different layouts and other user interface components in your websites. All these containers are fully responsive. Containers will keep your content in legible and reasonable region in the center of web page. If you have a fixed navigation bar at the top of your website, you can resize it with the help of containers classes of PixelzUI. Containers help to automatically resize, hide, shrink, or enlarge your content. These div wrappers are used for easier control of HTML elements inside. Containers act as rows while grids act as columns in your websites. PixelzUI containers/wrappers are specifically designed for this purpose. PixelzUI facilitates for width-sizers or width-boxes in your web-page(s), web-app(s), template(s) & websites. Containers provides fifteen classes. These containers will further help to add different colors' schemes in other components, modules as well as pages. All containers of PixelzUI are nestable. Even you can add container(s) inside container(s) like .cntrC as child container inside .cntrA as parent container.

Types

As we know, responsive web design is extremely important now a days and in fact mostly people use website on their mobile phones. That's why, we have set web page's containers for responsive design. PixelzUI provides flexible classes to design a responsive website templates. We have container/wrapper of every size according to device screen. Full width container as .cntr and .cntrN as very small. UI elements can be aded or edited in these containers. Now a days, web designers use responsive layouts and for that purpose, we will provide you responsive containers. For clean structuring of your website, followings are the fifteen types of containers.

  1. Main Container (width : 100%)
  2. Container-A (width : 95%)
  3. Container-B (width : 90%)
  4. Container-C (width : 85%)
  5. Container-D (width : 80%)
  6. Container-E (width : 75%)
  7. Container-F (width : 70%)
  8. Container-G (width : 65%)
  9. Container-H (width : 60%)
  10. Container-I (width : 55%)
  11. Container-J (width : 50%)
  12. Container-K (width : 45%)
  13. Container-L (width : 40%)
  14. Container-M (width : 35%)
  15. Container-N (width : 33.3%)
=>Other types are based on color class(es).

Classes

PixelzUI gives you very flexible class names for containers/wrappers. You will learn how and why containers are used in the website designing. You can simply change the last alphabet of class attribute in your markup for new container/wrapper. For full width container, you will use .cntr as class. Followings are the classes to use containers in your scripts.

  1. .cntr
  2. .cntrA
  3. .cntrB
  4. .cntrC
  5. .cntrD
  6. .cntrE
  7. .cntrF
  8. .cntrG
  9. .cntrH
  10. .cntrI
  11. .cntrJ
  12. .cntrK
  13. .cntrL
  14. .cntrM
  15. .cntrN
.
=>Other classes are based on color class(es).

How to use

Now a days, web designers and even begginers don't want to build their niche website from stratch. They sue wordpress or other content management system. But PixelzUI facilitates you to build your website quickly using simple classes. So, choosing a good container is very simple. PixelzUI will help you in this way. Just add/edit class attribute of div tag. Here are steps that will help you how to use container in your web page.
  1. Add .cntr as main container (full-width div wrapper) in the class attribute of <div>.
  2. <div class="cntr"></div>
  3. Add .cntr* in the class attribute of <div>.
  4. <div class="cntr*"></div>
=>* means (A to N).

Demo

Mostly, every web page inlcudes navigation bar, side menu, footer and content and you know content is the main part of it. Content is a king in web search. But if content have no attractive layout, people even don't read your post. PixelzUI wil do it for you in the form of responsive containers. Here are the live examples of containers/wrappers, you can choose container of your own choice according to your website layout. To add colors in container, use color classes. PixelzUI helps you to design your website responsive in easy to understand steps.

Main Container .cntr
Container-A .cntrA
Container-B .cntrB
Container-C .cntrC
Container-D .cntrD
Container-E .cntrE
Container-F .cntrF
Container-G .cntrG
Container-H .cntrH
Container-I .cntrI
Container-J .cntrJ
Container-K .cntrK
Container-L .cntrL
Container-M .cntrM
Container-N .cntrN

Editing

It is very necessary to structure HTML for an actual website. Now, you will learn how to create/design containers. PixelzUI gives you editor for it with its HTML code. You can edit container or wrapper of your own choice by using this editor.

  1. Select container size from range slider.
  2. See the effect in dummy panel and HTML code.
  3. Copy that HTML code and place it in your script.

Container Size

HTML




Container

Leave a Reply

Your email address will not be published. Required fields are marked.