Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/max-im/senior-citizen-landing

Senior Citizen Page
https://github.com/max-im/senior-citizen-landing
pattern-lab
Last synced: 4 days ago
JSON representation
Senior Citizen Page
Host: GitHub
URL: https://github.com/max-im/senior-citizen-landing
Owner: Max-im
License: apache-2.0
Created: 2017-12-12T18:04:03.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2022-06-22T09:55:31.000Z (over 2 years ago)
Last Synced: 2023-02-27T10:33:06.419Z (almost 2 years ago)
Topics: pattern-lab
Language: CSS
Homepage: https://max-im.github.io/senior-citizen-landing
Size: 818 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

README

        # __SENIOR-CITIZEN-Page__

## __App info:__

| Name        | SENIOR-CITIZEN-Page |

| ----------------- | ----------------- |

| Description   | landing page using patternLab   |

| Start date    | 14.12.2017  |

| Version     | 0.0.1       |

## __SetUp the app__

 - Download this repo:

  `git clone https://github.com/Max-im/senior-citizen-landing`

 - Go to the project directory:

  `cd senior-citizen-landing`

 - Install all App dependencies:

  `npm i`

 

## __Run the App__

 - for start the project in develop mode:   

  `npm run patternlab:serve`

 - for building the project:

  `npm run patternlab:build`

  

 

## __Technologies:__

- webpack ![webpack][webpackImg] / patternLab ![pattern][patternImg];

 - ES6 ![ES6][ES6Img];

 - jQuery ![jQuery][jQueryImg] / slick-carousel / magnific-popup;

 - Mustashe ![mustache][mustacheImg] ;

 - HTML5 ![HTML][HTMLImg] / BEM ![bem][bemImg] / OpenGraph ![openGraph][openGraphImg];

 - Sass (Scss) ![sass][sassImg] / CSS3 ![CSS3][cssImg] / mobile-first ![mobile][mobileImg];

## __Schedule:__

| Num   | Action                                                    | Hours |

| ----: | --------------------------------------------------------  | ----: |

| 1.    | Consider the project, create repo                         | 2     |

| 1.    | Environment init, structure the project                   | 4     |

| 1.    | Prepare assets for the projects                           | 2     |

| 1.    | Create Header organism                                   | 4     |

| 1.    | Create About organism                                    | 5     |

| 1.    | Create Photos organism                                | 1     |

| 1.    | Create Moments organism                                | 2     |

| 1.    | Create Flowers organism                                | 3     |

| 1.    | Create Mail organism                                | 1     |

| 1.    | Create Footer organism                                   | 3     |

| 1.    | Create Popup organism                                   | 3     |

| 1.    | Code review, refactoring                                  | 4     |

| 1.    | Add microdata, correct readme                             | 1     |

| 1.    | Deploy                                                    | 1     |

|       | TOTAL                                                     | 36  |

## __About Author__

 - author:  Maxim Pozhidaev 

 - [AuthorPage]

 - phone: __+38 (050) 77-23-169__

 - skype: __Pogidaev_mo__

 - social: [![facebook][fbImg]][myFb] [![linkedIn][inImg]][myIn] [![vk][vkImg]][myVk]

[AuthorPage]: https://max-im.github.io/

[Portfolio]: https://max-im.github.io/portfolio/

[myFB]: https://facebook.com/max.pozhidaev.7

[myIn]: https://www.linkedin.com/in/maxim-pozhidaev-16726811a

[myVk]: https://m.vk.com/id8889814

[fbImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/facebook.png?raw=true

[inImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/linkedin.png?raw=true

[vkImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/vk.png?raw=true

[cliImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/cli.png?raw=true

[webpackImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/webpack.png?raw=true

[gulpImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/gulp.png?raw=true

[routerImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/router.png?raw=true

[angularImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/angular.png?raw=true

[reactImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/react.png?raw=true

[reduxImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/redux.png?raw=true

[vueImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/vue.png?raw=true

[ES6Img]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/js.png?raw=true

[patternImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/patternLab.png?raw=true

[jQueryImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/jquery.png?raw=true

[rxImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/rxjs.png?raw=true

[lodashImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/lodash.png?raw=true

[momentImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/moment.png?raw=true

[mustacheImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/mustache.png?raw=true

[handlebarsImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/handlebars.png?raw=true

[HTMLImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/html.png?raw=true

[bemImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/bem.png?raw=true

[openGraphImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/openGraph.png?raw=true

[schemaImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/schema.png?raw=true

[bootstrapImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/bootstrap.png?raw=true

[foundationImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/foundation.png?raw=true

[materialiseImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/materialize.png?raw=true

[semanticImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/semantic.png?raw=true

[stylusImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/stylus.png?raw=true

[sassImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/sass.png?raw=true

[cssImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/css.png?raw=true

[mobileImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/mobile.png?raw=true

[canvasImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/canvas.png?raw=true

[d3Img]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/d3.png?raw=true

[nodeImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/node.png?raw=true

[PHPImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/php.png?raw=true

[BaaSImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/baas.png?raw=true

[firebaseImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/firebase.png?raw=true

[mongoDBImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/mongoDB.png?raw=true

[SQLImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/sql.png?raw=true

[karmaImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/karma.png?raw=true

[mochaImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/mocha.png?raw=true

[jasmineImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/jasmine.png?raw=true

[phantomImg]: https://github.com/Max-im/webpack-start-tmpl/blob/master/icons/phantom.png?raw=true

[![Apache V2 License](http://img.shields.io/badge/license-Apache%20V2-blue.svg)](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/LICENSE)

# Pattern Lab Node - Webpack Edition

The webpack wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) providing tasks to interact with the core library and move supporting frontend assets.

## Installation and Starting

1. `npm install`

2. `npm run patternlab:serve`

## Packaged Components

The webpack edition comes with the following components:

* `patternlab-node`: [GitHub](https://github.com/pattern-lab/patternlab-node), [npm](https://www.npmjs.com/package/patternlab-node)

* `patternengine-node-mustache`: [GitHub](https://github.com/pattern-lab/patternengine-node-mustache), [npm](https://www.npmjs.com/package/patternengine-node-mustache)

* `pattern-lab/styleguidekit-assets-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-assets-default)

* `pattern-lab/styleguidekit-mustache-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-mustache-default)

## Prerequisites

The Pattern Lab Node - webpack edition uses [Node](https://nodejs.org/en/) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [webpack.io](https://webpack.github.io/) to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation of Node will include npm.

## Installing

`npm install`

### What's Included

 The pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default.

**Please note:** Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm.

### Use npm

`npm` is a dependency management and package system which can pull in all of the webpack editions's dependencies for you. To accomplish this:

* download or `git clone` this repository to an install location.

* run the following

    ```

    cd install/location

    npm install

    ```

Running `npm install` from a directory containing a `package.json` file will download all dependencies defined within. The `package-lock.json` file is automatically managaged everytime you add/remove/upgrade a dependency. 

#### Install the Webpack Edition of Pattern Lab Node as a Dependency

Most people want to run Pattern Lab Node standalone and not as a dependency. If you wish to install as a dependency you can do the following:

Use npm's `install` command with an argument to install the Webpack Edition into a location of your choosing. In Terminal type:

    cd install/location/

    npm install edition-node-webpack

This will install the Webpack Edition into a directory called `node_modules` in `install/location/`.

## Getting Started

The Pattern Lab Node - Webpack Edition ships with a [base experience](https://github.com/pattern-lab/starterkit-mustache-base) which serves as clean place to start from scratch with Pattern Lab. But if you want to get rolling with a starterkit of your own, or use the [demo starterkit](https://github.com/pattern-lab/starterkit-mustache-demo) like the one on [demo.patternlab.io](http://demo.patternlab.io), you can do so automatically at time of `npm install` by adding your starterkit to the `package.json` file.

You can also [work with starterkits using the command line](https://github.com/pattern-lab/patternlab-node/wiki/Importing-Starterkits).

## Updating Pattern Lab

To update Pattern Lab please refer to each component's GitHub repository, and the [master instructions for core](https://github.com/pattern-lab/patternlab-node/wiki/Upgrading). The components are listed at the top of the README.

### List all of the available commands

To list all available commands type:

    npm run patternlab:help

### Generate Pattern Lab

To generate the front-end for Pattern Lab type:

    npm run patternlab:build

### Watch for changes and re-generate Pattern Lab

To watch for changes, re-generate the front-end, and server it via a BrowserSync server,  type:

    npm run patternlab:serve

Webpack dev server should open [http://localhost:3000](http://localhost:3000) in your browser, both host and port are configurable in the `patternlab-config.json` file.

### Install a StarterKit

To install a specific StarterKit from GitHub type:

    npm run add [starterkit-vendor/starterkit-name]

    npm run patternlab:loadstarterkit --kit=[starterkit-name]

### Pattern Lab - Configuration

Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.

#### Setting Dev Server Settings

You can set the url and port number in the configuration for 

    "server": {

        "url": "http://localhost",

        "port": 3000

    },

#### Setting the Webpack Merge Options

In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md)

You can change how it merges by changing this object in `patternlab-config.json`:

    

    "webpackMerge": {

        "entry":"replace"

    },

By default merge does a `append` if that option works for you only set which webpack configuration you want to change. The merge setting is: `smartStrategy` which is documented over on this [page.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration)

### Licenses

* [babel-core](https://github.com/babel/babel/blob/master/LICENSE) - MIT

* [babel-loader](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT,

* [babel-preset-es2015](https://github.com/babel/babel/blob/master/LICENSE) - MIT

* [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/LICENSE) - MIT

* [event-hooks-webpack-plugin](https://github.com/cascornelissen/event-hooks-webpack-plugin/blob/master/LICENSE.md) - MIT

* [globby](https://github.com/sindresorhus/globby/blob/master/license) - MIT

* [patternlab-node](https://github.com/pattern-lab/patternlab-node/blob/master/LICENSE) - MIT

* [styleguidekit-assets-default](https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/LICENSE) - MIT

* [styleguidekit-mustache-default](https://github.com/pattern-lab/styleguidekit-mustache-default/blob/master/LICENSE) - MIT

* [webpack](https://github.com/webpack/webpack/blob/master/LICENSE) - MIT

* [webpack-config-utils](https://github.com/kentcdodds/webpack-config-utils/blob/master/LICENSE) - MIT

* [webpack-dev-server](https://github.com/webpack/webpack-dev-server/blob/master/LICENSE) - MIT

* [webpack-merge](https://github.com/survivejs/webpack-merge/blob/master/LICENSE) - MIT

### Contributions

Contributor | Message / How to Reach  

----------- | --------------

 ![@paintedbicycle](https://avatars3.githubusercontent.com/u/371114?s=75&v=4)[@paintedbicycle](https://github.com/paintedbicycle) | **Paul Wright** - [https://paintedbicycle.com](https://paintedbicycle.com)

 ![@rgualberto](https://avatars3.githubusercontent.com/u/5126167?v=4&s=75)[@rgualberto](https://github.com/rgualberto) | "A huge thank you to a incredible developer [Rodrigo Gualberto](https://github.com/rgualberto) for all of his hard work, dedication, and support from the start of project."