diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..73b4ea6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,12 @@ +{ + "plugins": [ + "transform-runtime" + ], + "presets": [ + "es2015", + "stage-2" + ], + "ignore": [ + "node_modules" + ] +} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..e69de29 diff --git a/.eslintrc b/.eslintrc index c7a017f..24f1cc3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,6 +7,9 @@ "parserOptions": { "sourceType": "module" }, + "plugins": [ + "filenames" + ], "rules": { "comma-dangle": [1, "never"], "no-console": 1, @@ -36,7 +39,9 @@ "comma-spacing": 0, "prefer-const": 0, "no-undef": 0, - "curly": 0 + "curly": 0, + "filenames/match-regex": [2, "^[a-z\\-]+$"], + "filenames/match-exported": [2, "kebab"] }, "ecmaFeatures": { "arrowFunctions": true, diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000..1a03d9d --- /dev/null +++ b/.sass-lint.yml @@ -0,0 +1,147 @@ +# sass-lint config generated by make-sass-lint-config v0.0.3 +# +# The following scss-lint Linters are not yet supported by sass-lint: +# BemDepth, DisableLinterReason, ElsePlacement, PropertyCount +# PropertyUnits, SelectorDepth, SelectorFormat, SpaceAroundOperator +# TrailingWhitespace, UnnecessaryMantissa, UnnecessaryParentReference, Compass::* +# +# The following settings/values are unsupported by sass-lint: +# Linter Indentation, option "allow_non_nested_indentation" +# Linter Indentation, option "character" +# Linter NestingDepth, option "ignore_parent_selectors" +# Linter PropertySortOrder, option "ignore_unspecified" +# Linter PropertySortOrder, option "min_properties" +# Linter PropertySortOrder, option "separate_groups" +# Linter SpaceBeforeBrace, option "allow_single_line_padding" +# Linter VendorPrefix, option "identifier_list" + +files: + include: 'src/sass/**/*.scss' + ignore: + - 'src/sass/base/_mixin.scss' + - 'src/sass/base/_sanitize.scss' + - 'src/sass/lib/*.scss' + - 'src/sass/sprites/*.scss' +options: + formatter: stylish + merge-default-rules: false +rules: + border-zero: + - 0 + - convention: zero + brace-style: + - 1 + - allow-single-line: true + class-name-format: + - 2 + - allow-leading-underscore: true + convention: hyphenatedbem + clean-import-paths: + - 1 + - filename-extension: false + leading-underscore: false + empty-line-between-blocks: + - 0 + - ignore-single-line-rulesets: true + extends-before-declarations: 1 + extends-before-mixins: 1 + final-newline: + - 0 + - include: true + force-attribute-nesting: 1 + force-element-nesting: 1 + force-pseudo-nesting: 1 + function-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + hex-length: + - 0 + - style: short + hex-notation: + - 0 + - style: lowercase + indentation: + - 0 + - size: 2 + leading-zero: + - 0 + - include: false + mixin-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + mixins-before-declarations: 0 + nesting-depth: + - 2 + - max-depth: 1 + no-color-literals: 0 + no-css-comments: 0 + no-debug: 1 + no-duplicate-properties: 1 + no-empty-rulesets: 1 + no-extends: 0 + no-ids: 2 + no-important: 2 + no-invalid-hex: 1 + no-mergeable-selectors: 0 + no-misspelled-properties: + - 1 + - extra-properties: ['*zoom'] + no-qualifying-elements: + - 1 + - allow-element-with-attribute: false + allow-element-with-class: false + allow-element-with-id: false + no-trailing-zero: 0 + no-transition-all: 0 + no-url-protocols: 1 + no-vendor-prefixes: + - 0 + - additional-identifiers: [] + excluded-identifiers: [] + placeholder-in-extend: 1 + placeholder-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + property-sort-order: 0 + quotes: + - 0 + - style: double + shorthand-values: + - 1 + - allowed-shorthands: + - 1 + - 2 + - 3 + single-line-per-selector: 0 + space-after-bang: + - 1 + - include: false + space-after-colon: + - 0 + - include: true + space-after-comma: + - 0 + - include: true + space-before-bang: + - 1 + - include: true + space-before-brace: + - 1 + - include: true + space-before-colon: 1 + space-between-parens: + - 1 + - include: false + trailing-semicolon: 1 + url-quotes: 0 + variable-for-property: + - 0 + - properties: [] + variable-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + zero-unit: 0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 8bf7f67..d4d1494 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,54 @@ + +## [5.0.5](https://github.com/frontainer/frontplate/compare/v5.0.4...v5.0.5) (2017-10-03) + + +### fix + +* BEM記法が許容されないlintの設定だったので修正 ([bc87238eb5ee4cd061085b46becd31bf6be236b7](https://github.com/frontainer/frontplate/commit/bc87238eb5ee4cd061085b46becd31bf6be236b7)) + + + + +## [5.0.4](https://github.com/frontainer/frontplate/compare/v5.0.3...v5.0.4) (2017-09-30) + + +### update + +* autoprefixerの対象ブラウザがIE10 & Android4.4以降になるよう変更 ([12bfb254f38500e30a5b01b6b66d057701b425fe](https://github.com/frontainer/frontplate/commit/12bfb254f38500e30a5b01b6b66d057701b425fe)) + + + + +## [5.0.3](https://github.com/frontainer/frontplate/compare/v5.0.2...v5.0.3) (2017-09-17) + + +### add + +* 複数行を3点リーダで省略するmixinを追加 ([cc21be7a168201f07cfa3918cc090dc4d2921cee](https://github.com/frontainer/frontplate/commit/cc21be7a168201f07cfa3918cc090dc4d2921cee)) + +### fix + +* sass-lintの設定を少し厳しくした ([e9fe6eed87035e6ff624fae797c860c8523a4ab0](https://github.com/frontainer/frontplate/commit/e9fe6eed87035e6ff624fae797c860c8523a4ab0)) + + + + +## [5.0.2](https://github.com/frontainer/frontplate/compare/v5.0.1...v5.0.2) (2017-08-16) + + + + + +## [5.0.1](https://github.com/frontainer/frontplate/compare/v5.0.0...v5.0.1) (2017-07-26) + + +### add + +* babel-plugin-transform-runtimeを導入 ([16de698eda3b831ba1d624c26a6561df56aaeeb6](https://github.com/frontainer/frontplate/commit/16de698eda3b831ba1d624c26a6561df56aaeeb6)) +* eslintにeslint-plugin-filenamesプラグインを追加 ([16f142446eb7ca3d6690a841071d4106fa86c134](https://github.com/frontainer/frontplate/commit/16f142446eb7ca3d6690a841071d4106fa86c134)) + + + # [5.0.0](https://github.com/frontainer/frontplate/compare/v4.0.2...v5.0.0) (2016-12-10) diff --git a/README.md b/README.md index 6b6f9ba..239b7f1 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,29 @@ ## Usage +`$ frp create YOUR_PROJECT_NAME -g liginc/frontplate` + 詳しくは[wiki](https://github.com/frontainer/frontplate-cli/wiki)を参照ください https://github.com/frontainer/frontplate-cli/wiki + +## リリースについて + +js,cssの末尾に?ver=0.0.0 とリリースのタグのバージョンをつける仕様になってます。 +リリースの際に以下の手順でリリース対応お願いします。 + +1.package.jsonのバージョンを "version": "0.0.0"に変えてください。 + +2.npm run production で css,jsがproduction buildされた後に + npm versionが起動されjs,cssの末尾に?ver=0.0.0が付与されます。 + 同時に同じ文字列のgitタグも付与されコミットされます。 + +3.バージョンの上げ方は以下のとおりになります。 +npm run production patch … ?ver=0.0.1 +npm run production minor … ?ver=0.1.0 +npm run production major … ?ver=1.0.0 + +■問題点 +・開発中にnpm run productionを毎度してしまうとバージョンが上がり続けると同時にgitタグの方も上がり続けてしまうのが懸念です。 +・開発中には普通のfrp build -c frp.config.js -p を使っていただいてgitタグを使用する際にnpm run productionを使用する + diff --git a/config/style.config.js b/config/style.config.js new file mode 100644 index 0000000..305b81f --- /dev/null +++ b/config/style.config.js @@ -0,0 +1,24 @@ +'use strict'; +module.exports = { + src: `${FRP_SRC}/sass/**/*.scss`, // 読み込むscss + dest: `${FRP_DEST}/assets/css`, // 出力先 + outputStyle: 'compact', + sourceMap: true, + plugins: [ // postcssプラグイン + require('autoprefixer')({ //autoprefixer(https://github.com/postcss/autoprefixer) + browsers: [ + 'ie >= 10', + 'Android >= 4.4' + ] + }) + ], + noGuide: false, + styleguide: { + title: 'StyleGuide', + verbose: false, + clean: true, + params: {}, + css: `../${FRP_DEST}/assets/css/style.css`, + // script: '../public/assets/js/app.js', + } +}; diff --git a/config/style.config.production.js b/config/style.config.production.js new file mode 100644 index 0000000..5cd607a --- /dev/null +++ b/config/style.config.production.js @@ -0,0 +1,9 @@ +'use strict'; +const conf = require('./style.config'); +const merge = require('webpack-merge'); +module.exports = merge(conf, { + sourceMap: false, + plugins: [ // postcssプラグイン + require('postcss-csso')() + ] +}); diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..3c55ef2 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,319 @@ +# liginc/frontplate + +`liginc/frontplate` is [frontainer/frontplate](https://github.com/frontainer/frontplate)'s fork project. + + +## Create New Project + +`$ frp create {project name} -g liginc/frontplate` +`$ cd {project name}` +`$ npm i` + +--- + +## Commands for development + + +### watch task + +``` +$ frp serve +``` + + +### build task (for development) + +``` +$ frp build +``` + + +### build task (for production) + +The production build will compress the file + +``` +$ frp build -p +``` + +--- + +## Config File + +Build of frontplate-cli can be configured by [frp.config.js](https://github.com/liginc/frontplate/blob/master/frp.config.js). + +When customization is necessary, override the setting based on [the original file](https://github.com/frontainer/frontplate-cli/tree/master/config) and use it. + +As an example, `liginc/frontplate` overrides the style setting. + + +[https://github.com/liginc/frontplate/blob/master/frp.config.js](https://github.com/liginc/frontplate/blob/master/frp.config.js) +```js +module.exports = function(production) { + global.FRP_SRC = 'src'; + global.FRP_DEST = 'public'; + return { + clean: {}, + html: {}, + style: production ? require('./config/style.config.production') : require('./config/style.config'), + script: production ? {} : {}, + server: {}, + copy: {}, + sprite: [], + test: {} + } +}; +``` + +[https://github.com/liginc/frontplate/blob/master/config/style.config.js](https://github.com/liginc/frontplate/blob/master/config/style.config.js) +```js +module.exports = { + src: `${FRP_SRC}/sass/**/*.scss`, + dest: `${FRP_DEST}/assets/css`, + outputStyle: 'compact', + sourceMap: true, + plugins: [ + require('autoprefixer')({ + browsers: [ // Customized here + 'ie >= 10', + 'Android >= 4.4' + ] + }) + ], + noGuide: false, + styleguide: { + title: 'StyleGuide', + verbose: false, + clean: true, + params: {}, + css: `../${FRP_DEST}/assets/css/style.css`, + // script: '../public/assets/js/app.js', + } +}; +``` + +--- + +## Customized according to project + +Introduction of some frequently used customization examples. + +### Global variables passed to ejs + +Variables passed to ejs can be managed with external files. + +#### Step1 + +frp.config.js +```js +module.exports = function(production) { + global.FRP_SRC = 'src'; + global.FRP_DEST = 'public'; + return { + clean: {}, + html: { + params: { + person: require('./ejs-data/person/seito') // add + } + }, + style: production ? require('./config/style.config.production') : require('./config/style.config'), + script: production ? {} : {}, + server: {}, + copy: {}, + sprite: [], + test: {} + } +}; + +``` + +#### Step2 + +Create a json file. + +./ejs-data/person/seito.js + +```js +module.exports = { + name: '堀口 誠人', + name_en: 'Seito Horiguchi', + thumbnailURL: 'https://cdn.liginc.co.jp/wp-content/uploads/2014/10/profile_detail711.jpg', + job: 'フロントエンドエンジニア', + profile: `最近フロントエンドエンジニアになりました。 +第一回HTML5カルタ大会で優勝しました。 +休日の過ごし方は、"Jazz Barでスコッチを片手に『世界の終りとハードボイルド・ワンダーランド』を読む"です。`, + link: [ + { + title: 'こうして僕はLIGで最初のフロントエンドエンジニアになった/株式会社LIG 堀口誠人氏・林優一氏', + url: 'http://time.levtech.jp/article/a-lig-1/' + }, + { + title: 'SlideShare', + url: 'http://www.slideshare.net/horiguchiseito' + } + ] +}; +``` + +#### Step3 + +Mark up and build. + +index.ejs +```ejs +

<%- person.name %><%- person.name_en %>

+ + + +

<%- person.profile %>

+ + +``` + +### Generate a sprite image + +Customize automatic generation of sprite images. +An example of generating icon.png and ribbon.png. + +`Recently, there are many cases using SVG sprite, so it's not used much.` + +* [svg-sprite](https://github.com/jkphl/svg-sprite) +* [IcoMoon App - Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/) + +#### Step1 + +frp.config.js +```js +module.exports = function(production) { + global.FRP_SRC = 'src'; + global.FRP_DEST = 'public'; + return { + clean: {}, + html: { + params: { + person: require('./ejs-data/person/seito') + } + }, + style: production ? require('./config/style.config.production') : require('./config/style.config'), + script: production ? {} : {}, + server: {}, + copy: {}, + sprite: [ // add + { + src: `${FRP_SRC}/sprites/icon/*.{png,gif,jpg}`, + destImage: `${FRP_SRC}/images/icon.png`, + destCSS: `${FRP_SRC}/sass/sprites/_icon.scss`, + imgPath: '../images/icon.png', + padding: 2, + scale: 1.0, + mixin: true, + selector: true + }, + { + src: `${FRP_SRC}/sprites/ribbon/*.{png,gif,jpg}`, + destImage: `${FRP_SRC}/images/ribbon.png`, + destCSS: `${FRP_SRC}/sass/sprites/_ribbon.scss`, + imgPath: '../images/ribbon.png', + padding: 2, + scale: 1.0, + mixin: true, + selector: true + } + ], + test: {} + } +}; +``` + +#### Step2 + +Add images to `sprites/icon` directory and `sprites/ribbon` directory. +Execute the `$ frp build` command. + +### Specify the file to be copied + +By default, The files located under lib and images directory will be automatically copied to the destination. +So, generally you don't have to modify the config, unless you need to copy the files outside of those directories. + +```js +module.exports = { + // 'path/from': '/path/to' + [`${FRP_SRC}/lib/**/*`]: `${FRP_DEST}/assets/lib`, + [`${FRP_SRC}/images/**/*`]: `${FRP_DEST}/assets/images` +}; +``` + +### Multi Projects + +When desktop site and mobile site are independent. + + +#### Step1 + +Edit frp.config.js. + +```js +module.exports = function(production) { + global.FRP_SRC = 'src/pc'; + global.FRP_DEST = 'public/pc'; + return { + clean: {}, + html: {}, + style: production ? require('./config/style.config.production') : require('./config/style.config'), + script: production ? {} : {}, + server: {}, + copy: {}, + sprite: [], + test: {} + } +}; +``` + +Create frp.sp.config.js. + +```js +module.exports = function(production) { + global.FRP_SRC = 'src/sp'; + global.FRP_DEST = 'public/sp'; + return { + clean: {}, + html: {}, + style: production ? require('./config/style.config.production') : require('./config/style.config'), + script: production ? {} : {}, + server: {}, + copy: {}, + sprite: [], + test: {} + } +}; +``` + +#### Step2 + +Duplicate src directly under `src/pc` and `src/sp`. + +#### Step3 + +Build with frp.sp.config.js. + +`$ frp build -c frp.sp.config.js` + +Alternatively, you can execute commands interactively with the `frp` command. + + +```bash +$ frp +? choose execute command build +? choose config file (Use arrow keys) +❯ frp.config.js + frp.sp.config.js +``` + + diff --git a/frp.config.js b/frp.config.js index 93e53b2..4385dc4 100644 --- a/frp.config.js +++ b/frp.config.js @@ -1,12 +1,18 @@ 'use strict'; +const patch = require('./package.json'); // https://github.com/frontainer/frontplate-cli/wiki/6.%E8%A8%AD%E5%AE%9A +// https://github.com/frontainer/frontplate-cli/tree/master/config module.exports = function(production) { global.FRP_SRC = 'src'; global.FRP_DEST = 'public'; return { clean: {}, - html: {}, - style: production ? {} : {}, + html: { + params: { + patch : '?ver=' + patch.version + } + }, + style: production ? require('./config/style.config.production') : require('./config/style.config'), script: production ? {} : {}, server: {}, copy: {}, diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0beb19a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,495 @@ +{ + "name": "Frontplate", + "version": "5.0.6", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "babel-code-frame": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", + "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "dev": true, + "requires": { + "chalk": "^1.1.3", + "esutils": "^2.0.2", + "js-tokens": "^3.0.2" + } + }, + "babel-eslint": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz", + "integrity": "sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=", + "dev": true, + "requires": { + "babel-code-frame": "^6.22.0", + "babel-traverse": "^6.23.1", + "babel-types": "^6.23.0", + "babylon": "^6.17.0" + } + }, + "babel-helper-bindify-decorators": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz", + "integrity": "sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-helper-builder-binary-assignment-operator-visitor": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz", + "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=", + "dev": true, + "requires": { + "babel-helper-explode-assignable-expression": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" + } + }, + "babel-helper-explode-assignable-expression": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz", + "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-helper-explode-class": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz", + "integrity": "sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=", + "dev": true, + "requires": { + "babel-helper-bindify-decorators": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-helper-function-name": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz", + "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", + "dev": true, + "requires": { + "babel-helper-get-function-arity": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-helper-get-function-arity": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz", + "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" + } + }, + "babel-helper-remap-async-to-generator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz", + "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=", + "dev": true, + "requires": { + "babel-helper-function-name": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-messages": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", + "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0" + } + }, + "babel-plugin-syntax-async-functions": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", + "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", + "dev": true + }, + "babel-plugin-syntax-async-generators": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", + "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=", + "dev": true + }, + "babel-plugin-syntax-class-properties": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=", + "dev": true + }, + "babel-plugin-syntax-decorators": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", + "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=", + "dev": true + }, + "babel-plugin-syntax-dynamic-import": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=", + "dev": true + }, + "babel-plugin-syntax-exponentiation-operator": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", + "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=", + "dev": true + }, + "babel-plugin-syntax-object-rest-spread": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", + "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", + "dev": true + }, + "babel-plugin-syntax-trailing-function-commas": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz", + "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=", + "dev": true + }, + "babel-plugin-transform-async-generator-functions": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz", + "integrity": "sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=", + "dev": true, + "requires": { + "babel-helper-remap-async-to-generator": "^6.24.1", + "babel-plugin-syntax-async-generators": "^6.5.0", + "babel-runtime": "^6.22.0" + } + }, + "babel-plugin-transform-async-to-generator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz", + "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=", + "dev": true, + "requires": { + "babel-helper-remap-async-to-generator": "^6.24.1", + "babel-plugin-syntax-async-functions": "^6.8.0", + "babel-runtime": "^6.22.0" + } + }, + "babel-plugin-transform-class-properties": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", + "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=", + "dev": true, + "requires": { + "babel-helper-function-name": "^6.24.1", + "babel-plugin-syntax-class-properties": "^6.8.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" + } + }, + "babel-plugin-transform-decorators": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz", + "integrity": "sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=", + "dev": true, + "requires": { + "babel-helper-explode-class": "^6.24.1", + "babel-plugin-syntax-decorators": "^6.13.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-types": "^6.24.1" + } + }, + "babel-plugin-transform-exponentiation-operator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz", + "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=", + "dev": true, + "requires": { + "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1", + "babel-plugin-syntax-exponentiation-operator": "^6.8.0", + "babel-runtime": "^6.22.0" + } + }, + "babel-plugin-transform-object-rest-spread": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", + "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=", + "dev": true, + "requires": { + "babel-plugin-syntax-object-rest-spread": "^6.8.0", + "babel-runtime": "^6.26.0" + } + }, + "babel-plugin-transform-runtime": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz", + "integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0" + } + }, + "babel-preset-stage-2": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz", + "integrity": "sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=", + "dev": true, + "requires": { + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-decorators": "^6.24.1", + "babel-preset-stage-3": "^6.24.1" + } + }, + "babel-preset-stage-3": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz", + "integrity": "sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=", + "dev": true, + "requires": { + "babel-plugin-syntax-trailing-function-commas": "^6.22.0", + "babel-plugin-transform-async-generator-functions": "^6.24.1", + "babel-plugin-transform-async-to-generator": "^6.24.1", + "babel-plugin-transform-exponentiation-operator": "^6.24.1", + "babel-plugin-transform-object-rest-spread": "^6.22.0" + } + }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "dev": true, + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "babel-template": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", + "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", + "dev": true, + "requires": { + "babel-runtime": "^6.26.0", + "babel-traverse": "^6.26.0", + "babel-types": "^6.26.0", + "babylon": "^6.18.0", + "lodash": "^4.17.4" + } + }, + "babel-traverse": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz", + "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", + "dev": true, + "requires": { + "babel-code-frame": "^6.26.0", + "babel-messages": "^6.23.0", + "babel-runtime": "^6.26.0", + "babel-types": "^6.26.0", + "babylon": "^6.18.0", + "debug": "^2.6.8", + "globals": "^9.18.0", + "invariant": "^2.2.2", + "lodash": "^4.17.4" + } + }, + "babel-types": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", + "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", + "dev": true, + "requires": { + "babel-runtime": "^6.26.0", + "esutils": "^2.0.2", + "lodash": "^4.17.4", + "to-fast-properties": "^1.0.3" + } + }, + "babylon": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", + "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "core-js": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz", + "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=", + "dev": true + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "eslint-plugin-filenames": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-filenames/-/eslint-plugin-filenames-1.2.0.tgz", + "integrity": "sha1-runByQGJyV0uSZAsFg7O7+zZn1M=", + "dev": true, + "requires": { + "lodash.camelcase": "4.3.0", + "lodash.kebabcase": "4.1.1", + "lodash.snakecase": "4.1.1", + "lodash.upperfirst": "4.3.1" + } + }, + "esutils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", + "dev": true + }, + "globals": { + "version": "9.18.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", + "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=", + "dev": true + }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "invariant": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz", + "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", + "dev": true, + "requires": { + "loose-envify": "^1.0.0" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, + "lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, + "lodash.kebabcase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", + "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=", + "dev": true + }, + "lodash.snakecase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz", + "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=", + "dev": true + }, + "lodash.upperfirst": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz", + "integrity": "sha1-E2Xt9DFIBIHvDRxolXpe2Z1J984=", + "dev": true + }, + "loose-envify": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", + "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", + "dev": true, + "requires": { + "js-tokens": "^3.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "regenerator-runtime": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz", + "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + }, + "to-fast-properties": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", + "dev": true + } + } +} diff --git a/package.json b/package.json index 78134fb..6850a09 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,20 @@ { "name": "Frontplate", - "version": "5.0.0", + "version": "5.0.5", "description": "フロントエンド開発の効率をあげるフルスタックテンプレート", "dependencies": {}, - "devDependencies": {}, + "devDependencies": { + "babel-eslint": "^7.2.3", + "babel-plugin-transform-runtime": "^6.23.0", + "babel-preset-stage-2": "^6.24.1", + "eslint-plugin-filenames": "^1.2.0" + }, "scripts": { "start": "frp build && frp serve -t", "test": "frp task test", "build": "frp build", "serve": "frp serve", - "production": "frp build -p", + "production": "frp build -p && npm version ", "changelog": "conventional-changelog -p eslint -i CHANGELOG.md -w -s -r 0" }, "repository": { diff --git a/src/images/.keep b/src/images/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/index.ejs b/src/index.ejs index dcc0d66..e9b3a63 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -1,18 +1,12 @@ - - - - - + PAGE TITLE - <% include view/_header %> + <% include view/_head %> + <%- patch %> - + diff --git a/src/js/app.js b/src/js/app.js index 7d1b09c..9476dcb 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,13 +1,4 @@ -/** - * @constructor - */ -export class App { - constructor(val) { - this.val = val; - } -} -let m = new App('main'); if (process.env.NODE_ENV === 'development') { - console.debug('main value:', m.val); + console.debug('development'); } diff --git a/src/js/components/.keep b/src/js/components/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/js/constants/index.js b/src/js/constants/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/js/services/hoge-foo.js b/src/js/services/hoge-foo.js new file mode 100644 index 0000000..167cb28 --- /dev/null +++ b/src/js/services/hoge-foo.js @@ -0,0 +1,5 @@ +export default class HogeFoo { + constructor() { + + } +} diff --git a/src/js/app.spec.js b/src/js/services/hoge-foo.spec.js similarity index 57% rename from src/js/app.spec.js rename to src/js/services/hoge-foo.spec.js index abcd40b..8ab723f 100644 --- a/src/js/app.spec.js +++ b/src/js/services/hoge-foo.spec.js @@ -1,5 +1,5 @@ -import './app'; -describe('app', () => { +import HogeFoo from './hoge-foo'; +describe('hoge-foo', () => { beforeEach(() => { }); diff --git a/src/js/utils/.keep b/src/js/utils/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/_setting.scss b/src/sass/_setting.scss index b1daf93..6b31b1f 100644 --- a/src/sass/_setting.scss +++ b/src/sass/_setting.scss @@ -8,3 +8,9 @@ $base-font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "H $base-font-size: 14px; $base-font-color: #333; $base-background-color: #fff; + +//$color-primary +//$color-accent + +$breakpoint-tablet: 1279px; +$breakpoint-mobile: 759px; diff --git a/src/sass/base/_mixin.scss b/src/sass/base/_mixin.scss index a99d3ea..6fadf13 100644 --- a/src/sass/base/_mixin.scss +++ b/src/sass/base/_mixin.scss @@ -30,3 +30,32 @@ @include sprite-height($sprite, $scale); @include sprite-size($sprite, $scale); } + +@mixin line-clamp($line-height, $font-size, $lines, $color){ + line-height: $line-height; + height: $font-size * $line-height * $lines + px; + overflow: hidden; + position: relative; + word-break: break-all; + text-align: justify; + &:before, + &:after { + position: absolute; + } + &:before { + content: '...'; + background: $color; + right: 0; + text-align: center; + width: 1em; + top: $font-size * $line-height * ($lines - 1) + px; + } + &:after { + content: ''; + height: 100%; + width: 100%; + background: 0; + z-index: 2; + background: $color; + } +} diff --git a/src/sass/base/_placeholders.scss b/src/sass/base/_placeholders.scss new file mode 100644 index 0000000..b807590 --- /dev/null +++ b/src/sass/base/_placeholders.scss @@ -0,0 +1,26 @@ +%elps { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -ms-text-overflow: ellipsis; +} + +%image-replacement { + overflow: hidden; + text-indent: 100%; + white-space: nowrap; +} + +%youtube { + position: relative; + width: 100%; + padding-top: 56.25%; + + iframe { + position: absolute; + top: 0; + right: 0; + width: 100% !important; // sass-lint:disable-line no-important + height: 100% !important; // sass-lint:disable-line no-important + } +} diff --git a/src/sass/components/.keep b/src/sass/components/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/layout/_grid.scss b/src/sass/layout/_grid.scss new file mode 100644 index 0000000..fbefd37 --- /dev/null +++ b/src/sass/layout/_grid.scss @@ -0,0 +1,38 @@ +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +$col: 12; +@for $i from 1 through $col { + $width: (100% / ($col/$i)); + .col-lg-#{$i} { + box-sizing: border-box; + flex: 0 0 auto; + flex-basis: $width; + max-width: $width; + // word-wrap: break-word; + } + + .col-md-#{$i} { + @include max-screen($breakpoint-tablet) { + box-sizing: border-box; + flex: 0 0 auto; + flex-basis: $width; + max-width: $width; + } + } + + .col-sm-#{$i} { + @include max-screen($breakpoint-mobile) { + box-sizing: border-box; + flex: 0 0 auto; + flex-basis: $width; + max-width: $width; + } + } +} diff --git a/src/sass/layout/_layout.scss b/src/sass/layout/_layout.scss index 7e0110a..525eaec 100644 --- a/src/sass/layout/_layout.scss +++ b/src/sass/layout/_layout.scss @@ -1,10 +1,6 @@ -.clearfix { - zoom: 1; - &:before, &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} +//.l-container { +// +// @include max-screen($breakpoint-mobile) { +// +// } +//} diff --git a/src/sass/lib/_clearfix.scss b/src/sass/lib/_clearfix.scss new file mode 100644 index 0000000..42e71a5 --- /dev/null +++ b/src/sass/lib/_clearfix.scss @@ -0,0 +1,7 @@ +.clearfix { + &:after { + content: " "; + display: block; + clear: both; + } +} diff --git a/src/sass/lib/_flex.scss b/src/sass/lib/_flex.scss new file mode 100644 index 0000000..a27cfc7 --- /dev/null +++ b/src/sass/lib/_flex.scss @@ -0,0 +1,78 @@ +.flex { + box-sizing: border-box; + flex: 1; + display: flex; + &:before, &:after { + content: none; + } +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-fill { + width: 100%; + height: 100%; +} +.flex-horizontal { + box-orient: horizontal; + box-direction: normal; + flex-direction: row; +} +.flex-vertical { + box-orient: vertical; + box-direction: normal; + flex-direction: column; +} +.flex-space-between { + justify-content: space-between; + flex-pack: justify; + box-pack: justify; +} +.flex-space-around { + justify-content: space-around; + flex-pack: justify; + box-pack: justify; +} +.flex-start { + justify-content: flex-start; + flex-pack: start; + box-pack: start; +} +.flex-end { + justify-content: flex-end; + flex-pack: end; + box-pack: end; +} +.flex-center { + justify-content: center; + flex-pack: center; + box-pack: center; +} +.flex-align-start { + align-items: flex-start; + flex-align: start; + box-align: start; +} +.flex-align-end { + align-items: flex-end; + flex-align: end; + box-align: end; +} +.flex-align-center { + align-items: center; + flex-align: center; + box-align: center; +} +.flex-align-baseline { + align-items: baseline; + flex-align: baseline; + box-align: baseline; +} +.flex-align-stretch { + align-items: stretch; + flex-align: stretch; + box-align: stretch; +} +.flex-inline { + display: inline-flex; +} \ No newline at end of file diff --git a/src/sass/lib/_media-queries.scss b/src/sass/lib/_media-queries.scss new file mode 100755 index 0000000..d1ce246 --- /dev/null +++ b/src/sass/lib/_media-queries.scss @@ -0,0 +1,207 @@ +// --------------------------------------------------------------------------------------------------------------------- +// +// Author: Rafal Bromirski +// www: http://paranoida.com/ +// twitter: http://twitter.com/paranoida +// dribbble: http://dribbble.com/paranoida +// +// Licensed under a MIT License +// +// --------------------------------------------------------------------------------------------------------------------- +// +// Requirements: +// Sass 3.2.0+ +// +// Version: +// 1.3 // developed on 14/11/2013 +// +// Mixins: +// @ min-screen(width) // shortcut for @media screen and (min-width ...) +// @ max-screen(width) // shortcut for @media screen and (max-width ...) +// @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...) +// --- +// @ min-screen-height(height) // shortcut for @media screen and (min-height ...) +// @ max-screen-height(height) // shortcut for @media screen and (max-height ...) +// @ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...) +// --- +// @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait +// @ iphone3(landscape) // only iPhone (2, 3G, 3GS) only landscape +// @ iphone3(portrait) // only iPhone (2, 3G, 3GS) only portrait +// --- +// @ iphone4 // only iPhone (4, 4S) landscape & portrait +// @ iphone4(landscape) // only iPhone (4, 4S) only landscape +// @ iphone4(portrait) // only iPhone (4, 4S) only portrait +// --- +// @ iphone5 // only iPhone (5) landscape & portrait +// @ iphone5(landscape) // only iPhone (5) only landscape +// @ iphone5(portrait) // only iPhone (5) only portrait +// --- +// @ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait +// @ ipad(landscape) // all iPads (1, 2, 3, 4, Mini) only landscape +// @ ipad(portrait) // all iPads (1, 2, 3, 4, Mini) only portrait +// --- +// @ ipad-retina // only iPad (3, 4) landscape & portrait +// @ ipad-retina(landscape) // only iPad (3, 4) only landscape +// @ ipad-retina(portrait) // only iPad (3, 4) only portrait +// --- +// @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3) +// +// --------------------------------------------------------------------------------------------------------------------- + +// --------------------------------------------------------------------------------------------------------------------- +// --- screen ---------------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin screen($resMin, $resMax) { + @media screen and (min-width: $resMin) and (max-width: $resMax) { + @content; + } +} + +@mixin max-screen($res) { + @media screen and (max-width: $res) { + @content; + } +} + +@mixin min-screen($res) { + @media screen and (min-width: $res) { + @content; + } +} + +@mixin screen-height($resMin, $resMax) { + @media screen and (min-height: $resMin) and (max-height: $resMax) { + @content; + } +} + +@mixin max-screen-height($res) { + @media screen and (max-height: $res) { + @content; + } +} + +@mixin min-screen-height($res) { + @media screen and (min-height: $res) { + @content; + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- hdpi ------------------------------------------------------------------------------------------------------------ +// --------------------------------------------------------------------------------------------------------------------- + +// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss) +// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) + +@mixin hdpi($ratio: 1.3) { + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (min--moz-device-pixel-ratio: $ratio), + only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), + only screen and (min-resolution: #{round($ratio*96)}dpi), + only screen and (min-resolution: #{$ratio}dppx) { + @content; + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- iphone ---------------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin iphone3($orientation: all) { + $deviceMinWidth: 320px; + $deviceMaxWidth: 480px; + $devicePixelRatio: 1; + + @if $orientation == all { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { + @content; + } + } @else { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { + @content; + } + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- iphone-retina --------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin iphone4($orientation: all) { + $deviceMinWidth: 320px; + $deviceMaxWidth: 480px; + $devicePixelRatio: 2; + $deviceAspectRatio: '2/3'; + + @if $orientation == all { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) { + @content; + } + } @else { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation}) { + @content; + } + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- iphone-5 -------------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin iphone5($orientation: all) { + $deviceMinWidth: 320px; + $deviceMaxWidth: 568px; + $devicePixelRatio: 2; + $deviceAspectRatio: '40/71'; + + @if $orientation == all { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) { + @content; + } + } @else { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation}) { + @content; + } + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- ipads (all) ----------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin ipad($orientation: all) { + $deviceMinWidth: 768px; + $deviceMaxWidth: 1024px; + + @if $orientation == all { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) { + @content; + } + } @else { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (orientation: #{$orientation}) { + @content; + } + } +} + +// --------------------------------------------------------------------------------------------------------------------- +// --- ipad-retina ----------------------------------------------------------------------------------------------------- +// --------------------------------------------------------------------------------------------------------------------- + +@mixin ipad-retina($orientation: all) { + $deviceMinWidth: 768px; + $deviceMaxWidth: 1024px; + $devicePixelRatio: 2; + + @if $orientation == all { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { + @content; + } + } @else { + @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { + @content; + } + } +} diff --git a/src/sass/sprites/.keep b/src/sass/sprites/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/sass/sprites/_icon.scss b/src/sass/sprites/_icon.scss deleted file mode 100644 index f8b7d1c..0000000 --- a/src/sass/sprites/_icon.scss +++ /dev/null @@ -1,88 +0,0 @@ -$icon-web-navigation-line-craft-1-109681: ( - x: 0, - y: 0, - width: 512, - height: 512, - total_width: 1536, - total_height: 1024, - image: "../images/icon.png", - offset_x: 0, - offset_y: 0 -);$icon-web-navigation-line-craft-2-109682: ( - x: 512, - y: 0, - width: 512, - height: 512, - total_width: 1536, - total_height: 1024, - image: "../images/icon.png", - offset_x: -512, - offset_y: 0 -);$icon-web-navigation-line-craft-3-109688: ( - x: 0, - y: 512, - width: 512, - height: 512, - total_width: 1536, - total_height: 1024, - image: "../images/icon.png", - offset_x: 0, - offset_y: -512 -);$icon-web-navigation-line-craft-4-109689: ( - x: 512, - y: 512, - width: 512, - height: 512, - total_width: 1536, - total_height: 1024, - image: "../images/icon.png", - offset_x: -512, - offset_y: -512 -);$icon-web-navigation-line-craft-5-109690: ( - x: 1024, - y: 0, - width: 512, - height: 512, - total_width: 1536, - total_height: 1024, - image: "../images/icon.png", - offset_x: -1024, - offset_y: 0 -); - -@mixin sprite($variable,$scale:1) { - $image: map_get($variable,image); - $offset_x: map_get($variable,offset_x) * $scale; - $offset_y: map_get($variable,offset_y) * $scale; - $width: map_get($variable,width) * $scale; - $height: map_get($variable,height) * $scale; - $total_width: map_get($variable,total_width) * $scale; - $total_height: map_get($variable,total_height) * $scale; - background-image: url($image); - background-position: #{$offset_x}px #{$offset_y}px; - background-size: #{$total_width}px #{$total_height}px; - width: #{$width}px; - height: #{$height}px; -} - - -.icon { - display: inline-block; - background-repeat: no-repeat; - - &.icon-web-navigation-line-craft-1-109681{ - @include sprite($icon-web-navigation-line-craft-1-109681, 1); - } - &.icon-web-navigation-line-craft-2-109682{ - @include sprite($icon-web-navigation-line-craft-2-109682, 1); - } - &.icon-web-navigation-line-craft-3-109688{ - @include sprite($icon-web-navigation-line-craft-3-109688, 1); - } - &.icon-web-navigation-line-craft-4-109689{ - @include sprite($icon-web-navigation-line-craft-4-109689, 1); - } - &.icon-web-navigation-line-craft-5-109690{ - @include sprite($icon-web-navigation-line-craft-5-109690, 1); - } -} \ No newline at end of file diff --git a/src/sass/style.scss b/src/sass/style.scss index d339bd5..7c57ad5 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -1,11 +1,18 @@ @charset "utf-8"; @import 'setting'; -//@import 'base/sanitize'; -//@import 'base/reset'; -//@import 'base/normalize'; +@import 'base/sanitize'; @import 'base/mixin'; +@import "base/placeholders"; @import 'base/base'; -@import 'layout/layout'; -@import 'sprites/icon'; +@import "lib/media-queries"; +@import "lib/clearfix"; +@import 'lib/flex'; + +// @import 'sprites/icon'; + +// @import "components/header"; + +@import 'layout/grid'; +@import 'layout/layout'; diff --git a/src/sprites/icon/.keep b/src/sprites/icon/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/sprites/icon/web-navigation-line-craft-1-109681.png b/src/sprites/icon/web-navigation-line-craft-1-109681.png deleted file mode 100644 index 61040de..0000000 Binary files a/src/sprites/icon/web-navigation-line-craft-1-109681.png and /dev/null differ diff --git a/src/sprites/icon/web-navigation-line-craft-2-109682.png b/src/sprites/icon/web-navigation-line-craft-2-109682.png deleted file mode 100644 index e2b1aa9..0000000 Binary files a/src/sprites/icon/web-navigation-line-craft-2-109682.png and /dev/null differ diff --git a/src/sprites/icon/web-navigation-line-craft-3-109688.png b/src/sprites/icon/web-navigation-line-craft-3-109688.png deleted file mode 100644 index 9aaeb9f..0000000 Binary files a/src/sprites/icon/web-navigation-line-craft-3-109688.png and /dev/null differ diff --git a/src/sprites/icon/web-navigation-line-craft-4-109689.png b/src/sprites/icon/web-navigation-line-craft-4-109689.png deleted file mode 100644 index e41c186..0000000 Binary files a/src/sprites/icon/web-navigation-line-craft-4-109689.png and /dev/null differ diff --git a/src/sprites/icon/web-navigation-line-craft-5-109690.png b/src/sprites/icon/web-navigation-line-craft-5-109690.png deleted file mode 100644 index 9dbf322..0000000 Binary files a/src/sprites/icon/web-navigation-line-craft-5-109690.png and /dev/null differ diff --git a/src/view/_header.ejs b/src/view/_head.ejs similarity index 93% rename from src/view/_header.ejs rename to src/view/_head.ejs index c4b8715..affaa02 100644 --- a/src/view/_header.ejs +++ b/src/view/_head.ejs @@ -13,6 +13,6 @@ - +