Skip to content
Responsive CSS-Grid for Website-Developers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
less
LICENSE.txt
README.md
bower.json
package.json

README.md

hlgrid

Responsive CSS-Grid for Website-Developers

Installation

Using Bower

bower i hlgrid

Using npm

npm i hlgrid --save-dev

Meta-Viewport

To ensure correct function on mobile devices, add the viewport meta tag to the head area of your HTML document.

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    ...

</head>

Include CSS

Now include the extracted CSS file that meets your requirements in the head area as well.

hlgrid-standalone.css Uncompressed CSS grid incl. border box handling to avoid display problems in different browsers.

hlgrid-standalone.min.css (Empfehlung) Compressed CSS grid incl. border box handling to avoid display problems in different browsers.

hlgrid.css Uncompressed CSS grid. Useful for use with other frame works for later compression.

hlgrid.min.css Compressed CSS grid.

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    ...

    <link rel="stylesheet" href="css/hlgrid-standalone.min.css">

</head>

Grid structure

The hlGrid consists of three different elements.

  1. The container .hl-wrapper or .hl-wrapper-fluid
  2. The grid series .hl-grid
  3. The grid columns .hl-col-(1-12)[-(s,m,l,xl)]

The values 1-12 of the grid columns indicate how wide a column should be displayed. You can use the optional additions s, m, l, or xl to control how wide a column is to be displayed with different resolutions.

xl: 1200px and wider

l: 992px - 1199px

m: 768px - 991px

s: 576px - 767px

<body>

   <div class="hl-wrapper">
       <div class="hl-grid">
           <div class="hl-col-4-xl hl-col-8-m">...</div>
           <div class="hl-col-4-m">...</div>
           <div class="hl-col-4-xl hl-col-12">...</div>
       </div>
   </div>

</body>

You can find the complete documentation here.

You can’t perform that action at this time.