Skip to main content

Light Straightforward CSS Grid

Skeleton vanilla CSS grid

When you have been at it for a while you realize most of the time less is more, and so in that spirit below is a skeleton grid. It was created without any pre-processor in vanilla CSS, and has been field tested on enterprise level projects.

Source code here: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system

If this has helped you, be legendary and do social share this and do follow me on twitter @danielsokolows.

/*
Light Column Grid v2018-Dev-05
##############################

See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system

TODO,Jun-13: possibly rather then negative margins use calc and space-between to avoid issues with horizontal scroll on small devices, see: https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items

Example:

```
<div class="columnWrapper">
   <div class="column width-4/12">
      ...
   </div>
   <div class="column width-8/12">
      <!-- assuming `display: inline-block` for img-->
      <p>
         <img class="width-4/12" ... >Lorem lipsum</p>
      </p>
   </div>
</div>
```
*/


/*
Make padding grow in-ward
=========================

Apply a natural box layout model to all elements, but allowing components to change, which is
required for our column (`width-*`) classes to ensure padding does not effect their total width.

If below `html` conflicts with your exisiting layout comment it out and uncomment `box-sizing: border-box` in the `.cloumn` definition. 
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/*
* The 12 column based grid
*
* Class names leverage ability to escape characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
*/
.columnWrapper {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1em;
    margin-right: -1em;
}


.column {
    padding-left: 1em;
    padding-right: 1em;
    /*box-sizing: border-box;*/
}

.column.equalHeights  {
    display: flex;
}

.width-1\/12 {
    width: calc(100% / 12)
}

.width-2\/12 {
    width: calc(200% / 12)
}

.width-3\/12 {
    width: calc(300% / 12)
}

.width-4\/12 {
    width: calc(400% / 12);
}

.width-5\/12 {
    width: calc(500% / 12)
}

.width-6\/12 {
    width: calc(600% / 12)
}

.width-7\/12 {
    width: calc(700% / 12)
}

.width-8\/12 {
    width: calc(800% / 12)
}

.width-9\/12 {
    width: calc(900% / 12)
}

.width-10\/12 {
    width: calc(1000% / 12)
}

.width-11\/12 {
    width: calc(1100% / 12)
}

.width-12\/12 {
    width: 100%
}

/* on mobile devices go full width for all columns sizes */
@media only screen and (max-width: 750px) {
    .column {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

Comments

Popular posts from this blog

Softeher 'Error occurred. (Error code: 2)' sollution

Protocol error occurred. Error was returned from the destination server.The Softether server by default to run on port 443, if you server also hosts normal https then 443 is already taken and so Softether can't bind to it. When you run `vpncmd` it attempts to connect, find an active port, but of course fails with 'Protocol error occurred. Error was returned from the destination server.' because it's not actually connecting to the vpn server. By default Softether also listens on 992, 1194, and 5555 so the sollution is to modify specify `localhost:5555` when executing the `vpncmnd`. If this has helped you feel free to comment or follow me on twitter @danielsokolows.

Duplicate value found: duplicates value on record with id: <unknown>.

System.DmlException: Insert failed. First exception on row 0; first error: DUPLICATE_VALUE, duplicate value found: <unknown> duplicates value on record with id: <unknown>.The above error is triggered in the database layer and caused by a trigger or workflow outside of your main code of block that is bubbling this exception. This is rather difficult to track down especially if you are unfamiliar with the code, I am sharing my procedure in the hopes this saves you time - if you find this helpful drop me a line or follow me on twitter @danielsokolows. This error is caused by unique field constraint on the object, so the first step is to examine the object and locate the API names of all unique fieds. You can do this through SF direclty 'Setup < Customize &lt <object being inserted> &lt Fields' or by downloading the `src/objects` metadata information and searching for <unique>; I preffer the latter and actually download ALL matadata information f…

Storing passwords in PuTTY

How to save SSH username/password for auto login in PuTTy The answer is you can't do it...at least in plain PuTTy. However there is an awesome fork with that let's you store the username and password and other additional features called KiTTy.



So grab yourself a copy and +1 this if you do, thanks.