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.
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
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.
=> Other types are based on color class(es)
- Main Container (width : 100%)
- Container-A (width : 95%)
- Container-B (width : 90%)
- Container-C (width : 85%)
- Container-D (width : 80%)
- Container-E (width : 75%)
- Container-F (width : 70%)
- Container-G (width : 65%)
- Container-H (width : 60%)
- Container-I (width : 55%)
- Container-J (width : 50%)
- Container-K (width : 45%)
- Container-L (width : 40%)
- Container-M (width : 35%)
- Container-N (width : 33.3%)
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
Followings are the classes to use containers in your scripts.
=> Other classes are based on color class(es)
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.
=> * means (A to N).
- Add .cntr as main container (full-width div wrapper) in the class attribute of <div>.
- Add .cntr* in the class attribute of <div>.
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
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.
- Select container size from range slider.
- See the effect in dummy panel and HTML code.
- Copy that HTML code and place it in your script.