raphaelgoetter

{
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.fontSize": 17,
    "editor.fontFamily": "fira mono, inconsolata, consolas, Menlo, Monaco, 'Courier New', monospace",
    "editor.lineHeight": 24,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "vscode-icons",

raphaelgoetter

// Warning : you should use your own values, regardless of the devices
// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
$tiny: 543px !default; // or 'em' if you prefer, of course
$small: 767px !default;
$medium: 991px !default;
$large: 1199px !default;
$extra-large: 1439px !default;

@mixin grid($number, $gutter) {
  display: flex;

raphaelgoetter

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#

raphaelgoetter

(function() {

// old browser or not ?
if ( !('querySelector' in document && 'addEventListener' in window) ) {
return;
}
window.document.documentElement.className += ' js-enabled';

function toggleNav() {

raphaelgoetter

Flexbox CSS Frameworks :

• Bootstrap 4+ : http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
• pureCSS : http://purecss.io/
• Foundation 6+ : http://foundation.zurb.com/
• Flexboxgrid : http://flexboxgrid.com/
• Ionic Framework : http://ionicframework.com
• Scriptura : http://scriptura.github.io/Pages/GridLayout.html
• Juiced : http://juicedcss.com/
• KNACSS 4+ : http://knacss.com

raphaelgoetter

// @NOTE Chrome version may vary (was chosen arbitrarily between "recent" versions)
// @NOTE Fx42 is also current ESR version
// @NOTE Android version may be 4.4.4 instead of 4.4
var browsersList = ['IE >= 10', 'Edge >= 12', 'Chrome >= 42', 'Firefox >= 42', 'Firefox ESR', 'Safari >= 8', 'ios_saf >= 8', 'Android >= 4.4'];

raphaelgoetter

/* source : http://jsbin.com/lenise/edit?css,output */
/* author : tzi.fr */

.grid {
  --grid-column: 2;
  --grid-gutter: 5px;
  
  margin: 0;
  padding: 0;
  overflow: hidden;

raphaelgoetter

// the loop
.grid(@name; @columns; @index: 1) when (@index =< @columns) {
  .grid(@name; @columns; (@index + 1));
   
  .@{name}-@{index} {
    width: ( percentage(@index / @columns) );
    & when ( @index < @columns ) {
      &:extend(.column);
    }
  }

raphaelgoetter

//{
//  "name": "demo",
//  "version": "0.0.0",
//  "devDependencies": {
//    "gulp": "latest",
//    "gulp-autoprefixer": "latest",
//    "gulp-cssbeautify": "latest",
//    "gulp-csscomb": "latest",
//    "gulp-load-plugins": "latest",
//    "gulp-less": "latest",

raphaelgoetter

                 break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;