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

Opera SOCKS Proxy Setup Issues

SOCKS error: Connection closed by remote server When setting up SOCKS only proxy in Opera web browser make sure to specify the IP address instead of your fully qualified domain name (FQDN). Using a host name will not work and Opera simply fails to connect to the proxy server. Sample working setup screen shot with a Dante proxy server , note that HTTP, HTTPS, FTP, SSH options are left blank. Bug DSK-364301 has been filled with Opera, if it has been a while since this post and the issue still not fixed feel free to add your word of encouragement by emailing DSK-364301@bugs.opera.com :)

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.

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…