protozaur 0.1.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1ac08c6a34b8d305c2af12c2bb62c4145f01d14e
-  data.tar.gz: e9e2836c34b935f29b0094d4490ffcb0f0a408bc
+  metadata.gz: 1c8ca6fb32f0ef1ceee87d56d00005531940015b
+  data.tar.gz: e7fc584b585a0a6d763e68d22c5fdc6c56af8669
 SHA512:
-  metadata.gz: 8454cc42a2ebc7460adbc4ea8ffc95bd619701661997b2425b098024346d63ef015854d55ff236fa62dfac82d5145fc2de439ea34c8961b95b8247cdff48a0c7
-  data.tar.gz: edb24b28c0111df2ecec6c88276cb45bd5aac93135de4be4175122b273d1e9059358d68f5304abd47e80d199f68cc658ec106db146403b344218588fcef63654
+  metadata.gz: c7ae592762521a99f5f9acb9b14c3c8f860d0dd7caab3c0304f4c14c4b9e8d05db5849159bae9573da6d5ce831b1ba7e5dfe1eb1322c5724240e7c683d37d1b6
+  data.tar.gz: e53b6d60ab5847b93582e86ab285eded5cf4e2ab452228d3deb13dd69434e0196f66d09de724c5225616849336f9a63576b94fd583b7b35682008a174eba8e09

data/.gitignore

@@ -10,4 +10,8 @@
 
 .DS_Store
 .AppleDouble
-.LSOverride
+.LSOverride
+*.gem
+
+node_modules
+gulp/css

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Ilya N. Zykin
+Copyright (c) 2015-2016 Ilya N. Zykin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -121,7 +121,7 @@ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid was
 
     <tr>
       <td width="400px" valign="top" style='vertical-align:top'>
-        pr0 ... pt100
+        pt0 ... pt100
       </td>
       <td width="400px" valign="top" style='vertical-align:top'>
         padding-top: <b>X</b>px !important;
@@ -224,6 +224,38 @@ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid was
       </td>
     </tr>
 
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
+      <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vat
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vertical-align: top !important
+      </td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vam
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vertical-align: middle !important
+      </td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vab
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        vertical-align: bottom !important
+      </td>
+    </tr>
+
     <tr>
       <td width="400px" valign="top" style='vertical-align:top'><b>Position</b></td>
       <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
@@ -248,7 +280,7 @@ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid was
     </tr>
 
     <tr>
-      <td width="400px" valign="top" style='vertical-align:top'><b>Font style</b></td>
+      <td width="400px" valign="top" style='vertical-align:top'><b>Common style</b></td>
       <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
     </tr>
 
@@ -316,38 +348,6 @@ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid was
       <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
     </tr>
 
-    <tr>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vat
-      </td>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vertical-align: top !important
-      </td>
-    </tr>
-
-    <tr>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vam
-      </td>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vertical-align: middle !important
-      </td>
-    </tr>
-
-    <tr>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vab
-      </td>
-      <td width="400px" valign="top" style='vertical-align:top'>
-        vertical-align: bottom !important
-      </td>
-    </tr>
-
-    <tr>
-      <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
-      <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
-    </tr>
-
     <tr>
       <td width="400px" valign="top" style='vertical-align:top'>
         b
@@ -567,11 +567,76 @@ Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid was
       </td>
     </tr>
 
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'><b>Floating</b></td>
+      <td width="400px" valign="top" style='vertical-align:top'>&nbsp;</td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        clearfix
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        no comments
+      </td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        pull-left
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        float: left
+      </td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        pull-right
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        float: right
+      </td>
+    </tr>
+
+    <tr>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        ofh
+      </td>
+      <td width="400px" valign="top" style='vertical-align:top'>
+        overflow: hidden !important
+      </td>
+    </tr>
+
   </tbody>
 </table>
 
 ### How Protozaur works?
 
+```html
+<html>
+  <head>...</head>
+  <body class='ptz--reset'>...</body>
+</html>
+```
+
+or
+
+```html
+<html>
+  <head>...</head>
+  <body>
+
+    ...
+
+    <div class='ptz--reset'> ... </div>
+
+    ...
+
+  </body>
+</html>
+```
+
 **Example 1**
 
 ```html
@@ -655,26 +720,72 @@ Protozaur:
 
 0. based on `box-sizing: border-box` property
 0. based on **px** and **%**
-0. based on BEM principals
 
-### The MIT License (MIT)
+### Protozaur [vs] or [with]  Bootstrap / Foundation / Any CSS framework
+
+Protozaur it's not a competitor to your CSS framework. Protozaur is assistant. It helps to reduce size of your CSS files and makes your HTML much easer to read and understand.
+
+Fell free to use Protozaur (or it's idea) with any CSS framework.
+
+### Customization
+
+As you see Protozaur based on very simple idea and implemented with really simple code.
+
+If you need something special you can copy/paste a part of Protozaur's code and modify it.
+
+## Installation
+
+### Direct download
+
+[Download Protozaur.css](https://raw.githubusercontent.com/the-teacher/protozaur/master/ptz/protozaur.min.css "Protozaur CSS framework")
+
+### Ruby on Rails
+
+`Gemfile`
+
+```
+gem 'protozaur'
+```
+
+```
+bundle
+```
+
+`app/assets/stylesheets/applicaition.css`
+
+```
+/*
+  #= require ptz/reset
+  #= require ptz/base
+  #= require ptz/framework
+
+  #= require ptz/inputs-buttons/base
+  #= require ptz/inputs-buttons/sizes
+*/
+```
+
+### Bower
+
+```
+bower install protozaur
+```
+
+in HTML
+
+```html
+<link rel="stylesheet" type="text/css" href="./bower_components/ptz/protozaur.min.css">
+```
+
+### NPM
+
+```
+npm install protozaur
+```
 
-Copyright (c) 2015 Ilya N. Zykin
+you can use following path
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+`node_modules/protozaur/ptz/protozaur.min.css`
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+## The MIT License (MIT)
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+See <a href='./LICENSE.txt'>LICENSE.txt</a>

data/app/assets/stylesheets/ptz/reset.css.sass

@@ -1,16 +1,17 @@
-// 29/10/15
-*
-  margin:  0
-  padding: 0
-  border:  0
-  outline: 0
-  box-sizing: border-box
+// 15/02/16
+.ptz--reset
+  *
+    margin:  0
+    padding: 0
+    border:  0
+    outline: 0
+    box-sizing: border-box
 
-*:hover, *:active, *:focus
-  outline: 0
+  *:hover, *:active, *:focus
+    outline: 0
 
-*::after, *::before
-  box-sizing: border-box
+  *::after, *::before
+    box-sizing: border-box
 
 body
   color: black

data/bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "protozaur",
+  "homepage": "https://github.com/the-teacher/protozaur",
+  "authors": [
+    "Ilya N. Zykin <zykin-ilya@ya.ru>"
+  ],
+  "description": "Protozaur CSS framework. Protozaur is semantic, mnemonic, declarative CSS framework, created to avoid wasting time and increase productivity",
+  "main": "",
+  "moduleType": [],
+  "keywords": [
+    "Protozaur",
+    "CSS",
+    "Framework"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

data/gulp/Gulpfile.coffee

@@ -0,0 +1,12 @@
+gulp = require 'gulp'
+
+require './gulp_tasks/livereload.coffee'
+
+require './gulp_tasks/sass.coffee'
+require './gulp_tasks/css.coffee'
+
+# Default task call every tasks created so far.
+gulp.task 'default', [
+  'watchSassScss'
+  'watchCSS'
+]

data/gulp/Gulpfile.js

@@ -0,0 +1,2 @@
+require('coffee-script/register');
+require('./Gulpfile.coffee');

data/gulp/README.md

@@ -0,0 +1,7 @@
+### Gulp
+
+```
+npm install
+
+./node_modules/gulp/bin/gulp.js
+```

data/gulp/gulp_tasks/_params.coffee

@@ -0,0 +1,25 @@
+path  = require 'path'
+__abs = (_path) -> path.resolve(_path) + '/'
+__gulp_root = "#{ __dirname }/.."
+
+config =
+  # Livereload
+  livereload:
+    port: 3030
+
+  # SASS
+  sass:
+    src:  __abs "#{ __gulp_root }/../app/assets/stylesheets/"
+    dest: __abs "#{ __gulp_root }/css/"
+
+    mask_sass: "**/*.sass"
+    mask_scss: "**/*.scss"
+
+  # CSS
+  css:
+    src:  __abs "#{ __gulp_root }/css/"
+    dest: __abs "#{ __gulp_root }/../"
+
+    mask: "**/*.css"
+
+module.exports = config

data/gulp/gulp_tasks/css.coffee

@@ -0,0 +1,96 @@
+tools = require './tools.coffee'
+
+fs   = tools.fs
+log  = tools.log
+
+gulp  = tools.gulp
+gutil = tools.gutil
+
+params = tools.params
+
+batch    = tools.batch
+plumber  = tools.plumber
+chokidar = tools.chokidar
+
+concat = tools.concat
+minCSS = tools.minCSS
+
+livereload = tools.livereload
+
+# Main Task
+gulp.task 'copyCSS', ['compressCss'], ->
+  css_files = params.css.src + params.css.mask
+
+  gulp.src([ params.css.src, css_files ])
+    .pipe plumber()
+    # .pipe minCSS( keepBreaks: false )
+    .pipe gulp.dest(params.css.dest)
+    .pipe livereload()
+    .on 'error', gutil.log
+
+gulp.task 'compressCss', ->
+  reset = params.css.dest  + 'ptz/reset.css.css'
+  base  = params.css.dest  + 'ptz/base.css.css'
+  fw    = params.css.dest  + 'ptz/framework.css.css'
+
+  ib_base  = params.css.dest + 'ptz/inputs-buttons/base.css.css'
+  ib_sizes = params.css.dest + 'ptz/inputs-buttons/sizes.css.css'
+
+  dest_path = params.css.dest + 'ptz'
+  min_file  = 'protozaur.min.css'
+
+  gulp.src([ reset, base, fw, ib_base, ib_sizes ])
+    .pipe plumber()
+    .pipe concat(min_file)
+    .pipe minCSS( keepBreaks: false )
+    .pipe gulp.dest(dest_path)
+    .on 'error', gutil.log
+
+# Watcher
+gulp.task 'watchCSS', ->
+  css_files = params.css.src + params.css.mask
+
+  chokidar.watch([ params.css.src, css_files ])
+    .on 'ready', ->
+      log 'copyCSS::ready'
+      gulp.start('copyCSS')
+
+    .on 'add', batch { timeout: 100 }, (events, cb) ->
+      log 'copyCSS::add'
+
+      gulp.start('copyCSS')
+      events.on('data', log).on('end', cb)
+
+    .on 'change', batch { timeout: 100 }, (events, cb) ->
+      log 'copyCSS::change'
+
+      gulp.start('copyCSS')
+
+      events.on('data', log).on('end', cb)
+
+    .on 'unlink', batch { timeout: 100 }, (events, cb) ->
+      log 'copyCSS::unlink'
+
+      events
+        .on('data', (filepath) ->
+          filename = filepath.split(params.css.src)[1]
+          filepath = params.css.dest + filename
+          fs.unlink filepath, (err) -> log "Deleted (File) => `#{ filepath }`"
+        )
+        .on('end', cb)
+
+    .on 'addDir', batch { timeout: 100 }, (events, cb) ->
+      log 'copyCSS::linkDirs'
+
+      gulp.start('copyCSS')
+      events.on('data', log).on('end', cb)
+
+    .on 'unlinkDir', batch { timeout: 100 }, (events, cb) ->
+      log 'copyCSS::unlinkDirs'
+
+      events.on('data', (dirpath) ->
+        dirpath = dirpath.split(params.css.src)[1]
+        dirpath = params.css.dest + dirpath
+
+        fs.rmdir dirpath, (err) -> log "Deleted (Directory) `#{ dirpath }`"
+      ).on('end', cb)