jednano

Process

Prerequisites

1. Requirements.
   • Break it down into bite-sized pieces (bulletted lists are ideal).
   • Single source of truth (e.g., JIRA).
   • If not JIRA, add a link to the requirements in JIRA.
   • What device targets? (desktop, mobile/web, mobile app, etc.)
2. Assets (i.e., images, fonts).

jednano

if has('gui_running')
 set guifont=Fira\ Code:h14:cANSI:qDRAFT
endif

colors slate
set number

jednano

Writing CSS

This project uses cssnext, which allows us to use emerging CSS features at design time and transpile into currently-supported, browser-compatible CSS at runtime.

Styles can be found in app/styles. Inside this folder, you should familiarize yourself with the following structure:

styles
├── config
│ ├── fonts.json

jednano

import * as React from 'react';

interface Props {
	bar: string | number;
}

const Foo: React.FC<Props> = (props) => (
	<div>{props.bar}</div>
)

jednano

import { noop } from 'lodash';
import { join } from 'path';
import postcssNested from 'postcss-nested';
import postcssNestedProps from 'postcss-nested-props';
import postcssPropertyLookup from 'postcss-property-lookup';

import variables from './vars.json';
import fonts from './fonts.json';

const browsers = [

jednano

import { noop } from 'lodash';
import webpack from 'webpack';
import Dashboard from 'webpack-dashboard';
import DashboardPlugin from 'webpack-dashboard/plugin';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

import config from '../webpack.config.dev';

export default function loadDevMiddlewares({ app }) {

jednano

$font-adjustments: (
    arial-bold: (
         ascender:  0.056,
              cap: -0.130,
         baseline: -0.154,
        descender:  0.056
    ),
    georgia-regular: (
         ascender:  0.064,
              cap: -0.157,

jednano

import {
    Component,
    EventHandler,
    FormEvent
} from 'react';

import { ElementProps, resolveClassNames } from '../../../helpers/bem';
import { Label } from '../../Form';

export default class InputPassword extends Component<

jednano

// ----
// libsass (v3.2.5)
// ----

.catalog-search {
  .lines-on-sides {
    &:before, &:after {
      .catalog-search__grid-title--inline-image & {
        top: center;
      }

jednano

const checkers = {
	isSize(value) {
		throw new Error('Not implemented');
	},
	isStyle(value) {
		throw new Error('Not implemented');
	},
	isVariant(value) {
		throw new Error('Not implemented');
	},