Bonsoir je suis matthieu.

Web designer Développeur front-end Formateur front

Rendez-vous en terre inconnue

1 sortir de sa zone de confort

« On a besoin d’aide. »

No content

« Ok, j’arrive ! »

frustration confort danger savoir-faire demande

La stack. Ruby on Rails Angular CoffeeScript Slim Sass Bootstrap

HIPSTER ALERT!

No content

No content

No content

No content

Plonger dans le code…

…sans se noyer.

No content

No content

No content

Bootstrap

Au fond du seau.

2 pendre le taureau par les c…

No content

No content

S'occuper d’un scope précis…

No content

item menu item item item item item

…puis remonter progressivement au scope principal.

La structure générale.

No content

No content

« Angular, bro ! »

No content

#top-panel #top-nav … #top-container #sub-panel #sub-aside … #sub-container …

[id='top-panel'] [id='top-nav'] … [id='top-container'] [id='sub-panel'] [id='sub-aside'] … [id='sub-container'] …

[id='top-panel']{display: flex;} [id='top-nav']{flex: 0 0 auto;} … [id='top-container']{flex: 1 1 auto;} [id='sub-panel']{display: flex;} [id='sub-aside']{ flex: 0 0 _%; min-width: _em; } … [id='sub-container']{flex: 1 1 auto;} …

3 ne pas foncer tête baissée

Penser à la maintenabilité.

Organiser ses fichiers.

No content

@import 'scss-config'; @import 'scss-mixins'; @import 'vendor-normalize'; @import 'base-init'; @import 'base-typo'; @import 'layout-layout'; @import 'layout-navigation'; @import 'helpers'; application.scss

Écrire un code propre.

.btn { position: absolute; top: 0; right: 0; display: flex; width: 1em; margin: 0; padding: 1em; justify-content: center; align-items: center; border: none; border-bottom: 3px solid #0da; outline: none; background: #0eb; line-height: 1em; color: #fff; text-decoration: none; text-shadow: 0 -2px #eee; transition: all 100ms ease-out; } // 1. positionnement // 2. boîte // 3. flex ou grid // 4. transformation // 5. bordure // 6. arrière-plan // 7. texte // 8. autres styles // 9. transition et animation

Tout variabiliser (ou presque).

// Fonts $font-weight-light : 300; $font-weight-normal : 400; $font-weight-bold : 700; $default-font-family : "Roboto", arial, sans-serif; $default-font-weight : $font-weight-normal; $default-font-style : normal; $title-font-family : "Roboto", arial, sans-serif; $title-font-weight : $font-weight-normal; $title-font-style : normal; $button-font-family : "Roboto", arial, sans-serif; $button-font-weight : $font-weight-normal; $button-font-style : normal; $font-sizes : (( 'class' : 'lg', 'size' : 1.5em ),( 'class' : 'sm', 'size' : .875em ),( 'class' : 'xs', 'size' : .75em )); // Navigation $nav-sm-width : 3em; $nav-lg-width : 15em; $nav-item-font-size : 1.25em; $nav-label-font-size : 1em; $nav-label-timing-function: cubic-bezier(unquote($easeOutBack)); $nav-item-margin : .25em; $nav-duration : .3s; $nav-timing-function : cubic-bezier(unquote($easeOutQuint)); // Aside bars $sub-aside-width : 20%; $sub-aside-min-width : 15em; $sub-aside-padding : 1em; $sub-aside-title-font-size : .75em; $sub-aside-title-margin : 2em 0 0; $sub-aside-item-font-size : 1em; $sub-aside-item-padding : .5em 1em; $sub-aside-sub-item-padding : .25em .5em; // Forms $form-x-padding : 1em; $form-y-padding : 1.25em; $form-border-width : 1px; $label-required-star-margin : .15em; $label-required-star-font-size : 1.25em; $label-required-star-font-weight : $font-weight-bold;

Désolidariser modules et contextes.

No content

No content

[id='top-panel'] [id='top-nav'] .nav-container … [id='top-container'] [id='sub-panel'] [id='sub-aside'] .sub-aside-container … [id='sub-container'] .content-container …

Du code intelligible.

4 assumer ses choix

Bootstrap

@import 'scss-config'; @import 'scss-mixins'; @import 'vendor-normalize'; @import 'base-init'; @import 'base-typo'; @import 'layout-layout'; @import 'layout-navigation'; @import 'helpers'; application.scss @import 'vendor-ceaser'; @import 'scss-abstracts'; @import 'base-forms'; @import 'layout-sub-aside'; @import 'ui-accordions'; @import 'ui-pagination'; @import 'base-grid';

@import 'vendor-ceaser'; @import 'scss-config'; @import 'scss-mixins'; @import 'scss-abstracts'; @import 'vendor-normalize'; @import 'base-init'; @import 'vendor-selectize'; @import 'vendor-glyphicons'; @import 'base-animations'; @import 'vendor-grillade'; @import 'base-grid'; @import 'base-typo'; @import 'base-form'; @import 'base-buttons'; application.scss @import 'layout-layout'; @import 'layout-navigation'; @import 'layout-sub-aside'; @import 'ui-accordions'; @import 'ui-pagination'; @import 'ui-tabs'; @import 'ui-tooltips'; @import 'helpers';

No content

5 faire vivre son code

Ne pas hésiter à renommer variables/classes/ID.

No content

No content

No content

[id='top-panel'] [id='top-nav'] .nav-container … [id='top-container'] [id='sub-panel'] [id='sub-aside'] .sub-aside-container … [id='sub-container'] .content-container …

[id='sup-panel'] [id='sup-nav'] .nav-container … [id='sup-container'] [id='mid-panel'] [id='mid-aside'] .mid-aside-container … [id='mid-container'] [id='sub-panel'] [id='sub-header'] .sub-header-container … [id='sub-container'] .table-list-container … SUP MID SUB

@import 'vendor-ceaser'; @import 'scss-config'; @import 'scss-mixins'; @import 'scss-abstracts'; @import 'vendor-normalize'; @import 'base-init'; @import 'vendor-selectize'; @import 'vendor-glyphicons'; @import 'vendor-glyphicons-filetypes'; @import 'vendor-glyphicons-halflings'; @import 'vendor-glyphicons-social'; @import 'vendor-glyphicons-overwrite'; @import 'base-animations'; @import 'vendor-grillade'; @import 'base-grid'; @import 'base-typo'; application.scss @import 'base-form'; @import 'base-buttons'; @import 'layout-layout'; @import 'layout-navigation'; @import 'layout-mid-aside'; @import 'layout-sub-header'; @import 'ui-accordions'; @import 'ui-pagination'; @import 'ui-tabs'; @import 'ui-tooltips'; @import 'ui-dropdown'; @import 'ui-core-user-avatar'; @import 'ui-modals'; @import 'ui-notifications'; @import 'ui-table-list'; @import 'helpers';

Ne pas hésiter à changer d’arborescence.

@import 'vendor/ceaser/ceaser'; @import 'scss/config'; @import 'scss/mixins'; @import 'scss/abstracts'; @import 'vendor/normalize/normalize'; @import 'base/init'; @import 'vendor/selectize/selectize'; @import 'vendor/glyphicons/glyphicons'; @import 'vendor/glyphicons/glyphicons-filetypes'; @import 'vendor/glyphicons/glyphicons-halflings'; @import 'vendor/glyphicons/glyphicons-social'; @import 'vendor/glyphicons/glyphicons-overwrite'; @import 'base/animations'; @import 'vendor/grillade/grillade'; @import 'base/grid'; @import 'base/typo'; application.scss @import 'base/form'; @import 'base/buttons'; @import 'layout/layout'; @import 'layout/navigation'; @import 'layout/mid-aside'; @import 'layout/sub-header'; @import 'ui/accordions'; @import 'ui/pagination'; @import 'ui/tabs'; @import 'ui/tooltips'; @import 'ui/dropdown'; @import 'ui/core-user-avatar'; @import 'ui/modals'; @import 'ui/notifications'; @import 'ui/table-list'; @import 'helpers/helpers';

No content

No content

No content

[id='sup-panel'] [id='sup-nav'] .nav-container [id='sup-container'] [id='mid-panel'] [id='mid-aside'] .mid-aside-container [id='mid-container'] [id='sub-panel'] [id='sub-header'] .sub-header-container [id='sub-container'] .table-list-container [id='sup-aside'] .sup-aside-container

No content

No content

No content

[id='sup-panel'] [id='sup-nav'] .nav-container [id='sup-container'] [id='mid-panel'] [id='mid-aside'] .mid-aside-container [id='mid-container'] [id='sub-panel'] [id='sub-header'] .sub-header-container [id='sub-container'] .content-container [id='sub-aside'] .sub-aside-container [id='sup-aside'] .sup-aside-container

No content

No content

No content

No content

No content

$default-font-size: 1.4em; $ui-sizes : (( 'class' : 'xl', 'base' : 1.8em ),( 'class' : 'lg', 'base' : 1.6em ),( 'class' : 'md', 'base' : 1.4em ),( 'class' : 'sm', 'base' : 1.2em ),( 'class' : 'xs', 'base' : 1em )); html { font-size: .625em; /* fallback IE8+ */ font-size: calc(1em * .625); /* IE9-IE11 math fixing */ } body { font-size: $default-font-size; @each $size in $ui-sizes { $class: map-get($size, 'class'); $base: map-get($size, 'base'); &.ui-#{$class} { font-size: $base; } } } scss/_config.scss base/_typo.scss

No content

@import "skins/default/default"; @import "skins/darkblue/darkblue"; // Base @import "skin-componants/forms"; @import "skin-componants/buttons"; // Layout @import "skin-componants/layout"; @import "skin-componants/navigation"; @import "skin-componants/sup-aside"; @import "skin-componants/mid-aside"; @import "skin-componants/sub-header"; @import "skin-componants/sub-aside"; // User interface componants (alpha order) @import "skin-componants/accordions"; @import "skin-componants/core-user-avatar"; @import "skin-componants/dropdown"; @import "skin-componants/job-status"; @import "skin-componants/misc-item-list"; @import "skin-componants/modals"; @import "skin-componants/notifications"; @import "skin-componants/pagination"; @import "skin-componants/progress"; @import "skin-componants/table-list"; @import "skin-componants/tabs"; @import "skin-componants/tooltips"; … } application.scss skins/_skin.scss skins/darkblue/_darkblue.scss @import "../config-default"; @import "config-overwrite"; @import "../skin"; body.#{$theme-name} { // Reset @import "skin-componants/init"; // Vendors @import "skin-componants/selectize"; @import "skin-componants/loading-bar";

No content

6 prendre du recul

Prendre du recul, ce n’est pas que pour préparer des confs.

1. sortir de sa zone de confort 2. prendre le taureau par les cornes 3. ne pas foncer tête baissée 4. assumer ses choix 5. faire vivre son code 6. prendre du recul

SORTEZ - de votre - zone de CONFORT SORTEZ - de votre - zone de CONFORT

Merci. Matthieu Bué . UX developer . @twikito