Grids

Stop using bootstrap

just for its grid system

Bootstrap vs Yours

0.5kb

86.3kb

32 LoC.

8309 LoC

1.2s

0.007s

  $columns: 4; // Amount of columns per row

Define the amount of columns

your grid will have

  %grid {
    display: flex;
    flex-flow: row wrap;
 
    > * {
      min-width: 100% / $columns;
      transition: all ease-out .75s;
    }
  }

Grid container styles

  @mixin col($cols, $padding-v:false, $padding-h:false) {
    $offset: 0%;
 
    @if $padding-v {
      padding-bottom: #{$padding-v};
      padding-top: #{$padding-v};
    }
 
    @if $padding-h {
      $offset: #{$padding-h * 2};
  
      padding-left: #{$padding-h};
      padding-right: #{$padding-h};
    }
 
    @if $cols {
      width: calc(#{100 / $cols}% - #{$offset});
    } @else {
      width: calc(#{100 / $columns}% - #{$offset});
    }
  }

Define the columns mixin

  .target {
    @extend %grid;
 
    > li {
      @include col(null, 10px, 10px);
    }
 
    > li:nth-child(3) {
      @include col(2);
    }
 
    > li:nth-child(4) {
      @include col(1);
    }
  }

Using the grid

Example available on codepen.

objective-ng

Stop using functions

just because you can

Function vs Classes

Namespacing by default

?

More structure

?

?

Nogara said it was good (?)

  angular
    .module('sl.module', [
      'ui.router', 
      'something'
    ])
    .config(['$stateProvider', '$interpolateProvider', 
        function($stateProvider, $interpolateProvider) {
          $stateProvider.state('login', {
            templateUrl: 'login.html'
          });
        }
    ]);

Modules (Angular)

Modules (objective-ng)

  class SomeModule extends $ng.Module {
    static moduleName = 'sl.module';
    static dependencies = [
      'ui.router',
      'something'
    ];

    config($stateProvider, $interpolateProvider) {
      $stateProvider.state('login', {
        templateUrl: 'login.html'
      });
    }
  }

Controllers (Angular)

  angular
    .module('sl.module')
    .controller('LoginCtrl', [
      '$scope', 
      'AuthService', 
      function($scope, AuthService) {
        $scope.credentials = {
          email: '',
          password: ''
        };

        $scope.login = function() {
          AuthService.login($scope.credentials);
        };

        $scope.logout = function() {
          AuthService.logout();
        };
      }
    ]);

Controllers (objective-ng)

  let AuthService;
  
  class LoginCtrl extends $ng.Controller {
    static moduleName = 'sl.module';
  
    init($inject) {
      AuthService = $inject('AuthService');
      this.credentials = {
        email: '',
        password: ''
      };
    }

    login() {
      AuthService.login(this.credentials);
    }

    logout() {
      AuthService.logout(this.credentials);
    }
  }

Directive (Angular)

  angular
    .module('sl.module')
    .directive('socialPost', function() {
      return {
        restrict: E,
        transclude: true,
        templateUrl: 'cards/social-post.html',
        scope: {
          'hidden': '@'
        },
        link: function(scope, elt) {
          if (scope.hidden) {
            elt.css({ display: 'hidden' });
          }
        }
      };
    });

Directive (objective-ng)

  class SocialPostDirective extends $ng.Directive {
    static module = 'sl.module';
    static tagName = 'socialPost';

    restrict = 'E';
    transclude = true;
    templateUrl = 'cards/social-post.html';
    scope = {
      'hidden': '@'
    };

    link(scope, elt) {
      if (scope.hidden) {
        elt.css({ display: 'hidden' });
      }
    }
  }

Grid component

    <grid>
        <grid-box>1st box</grid-box>
        <grid-box span="2">2rd box</grid-box>
        <grid-box>3nd box</grid-box>
        <grid-box>4th box</grid-box>
        <grid-box>5nd box</grid-box>
    </grid>

What's the idea?

  class GridModule extends $ng.Module {
    static moduleName = 'sl.grid';
  }

Create directive module

  class GridDirective extends $ng.Directive {
    static module = 'sl.grid';
    static tagName = 'grid';

    restrict = 'E';
    transclude = true;
    templateUrl = 'templates/grid.html';
  }

Grid container

  <section
      class="grid"
      ng-transclude>
  </section>

  class GridBoxDirective extends $ng.Directive {
    static module = 'sl.grid';
    static tagName = 'gridBox';

    restrict = 'E';
    transclude = true;
    templateUrl = 'templates/grid-box.html';
    scope = {
      span: '='
    };
  }

Grid box directive

  <div
      class="grid-box-{{span}}x"
      ng-transclude>
  </div>