html.css - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

dist/html.css

@@ -109,6 +109,2 @@ /**
 body > * {
-  -ms-flex: 1 1 70%;
-      flex: 1 1 70%;
-  max-width: 100%;
-  padding: 0 0.5rem;
   -ms-flex-positive: 1;
@@ -120,8 +116,7 @@ flex-grow: 1;
       flex-basis: calc(70% - 1rem);
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  max-width: 100%;
 }
 body > aside {
-  -ms-flex: 1 1 30%;
-      flex: 1 1 30%;
-  max-width: 100%;
-  min-width: 220px;
   -ms-flex-positive: 1;
@@ -133,2 +128,3 @@ flex-grow: 1;
       flex-basis: calc(30% - 1rem);
+  min-width: calc(260.4px - 5%);
 }
@@ -268,2 +264,3 @@ table {
   font-family: monospace;
+  font-size: 1rem;
   text-align: left;
@@ -270,0 +267,0 @@ border-radius: 3px;

dist/html.min.css

@@ -7,2 +7,2 @@ /**
  */
-*,::after,::before{box-sizing:inherit}body>*,body>aside,iframe,table{max-width:100%}address :last-child,article :last-child,aside :last-child,blockquote p:last-child,figcaption :last-child,figure :last-child,footer :last-child,header :last-child,main :last-child,nav :last-child,section :last-child{margin-bottom:0}a,abbr[title],ins,u{text-decoration:none}ol,p,pre,ul{margin-top:0}html,mark,pre,pre code{color:#50525e}a,blockquote cite,code,kbd,samp{color:#0275d8}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form label,form select,form select[multiple],form textarea{display:block;width:100%}blockquote,del,figcaption{color:#676a7a}html{box-sizing:border-box;margin:0;padding:0}*{min-width:0}body{margin:0 auto;padding:2rem 1rem;max-width:900px;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center}ol,ul{margin-bottom:1rem;padding-left:1.1rem}ol li>ol,ol li>ul,ul li>ol,ul li>ul{padding-left:1rem;margin-bottom:0}h1,h2,h3,h4,h5,h6,hr,iframe,p,pre,table{margin-bottom:1rem}dd{margin-left:1rem}address,article,aside,figcaption,figure,footer,header,main,nav,section{display:block;width:100%;margin-bottom:1rem}blockquote,fieldset,figure{margin:0 0 1rem}audio,canvas,embed,img,object,svg,video{display:inline-block;height:auto;max-width:100%}figure{text-align:center}figcaption{font-family:serif}iframe{max-height:75vw;border:0}body>*{-ms-flex:1 1 70%;flex:1 1 70%;padding:0 .5rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(70% - 1rem);flex-basis:calc(70% - 1rem)}body>aside{-ms-flex:1 1 30%;flex:1 1 30%;min-width:220px;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(30% - 1rem);flex-basis:calc(30% - 1rem)}table{display:block;overflow-x:auto;white-space:nowrap;border-collapse:collapse;border-spacing:0}table caption,td,th{padding:.5rem 1rem;text-align:left}thead{border-bottom:2px solid #0275d8}tbody tr{border-bottom:1px solid #d4d4d4}html{font-size:16px;font-family:sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{margin-top:0;color:#42444e}h1{font-size:2rem}h2{font-size:1.8rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5{font-size:1.2rem}h6{font-size:1rem}p b:only-child{font-weight:300;font-size:1.4rem;line-height:1.4}blockquote{padding:.5rem 1.5rem;border-left:2px solid #0275d8}address,blockquote,cite,var{font-family:Georgia,serif}code,kbd,pre,samp{font-family:monospace}abbr[title]{border-bottom:1px dotted}mark{background-color:#fde965;padding:1px 4px}ins,u{border-bottom:2px solid}del{text-decoration:line-through}dt{font-weight:700}hr{margin-top:1rem;border-top:1px solid #d4d4d4}a{border-bottom:2px solid #bdc3c7;transition:all .1s}a:active,a:focus,a:hover{border-bottom-color:#0275d8}pre{padding:1rem 1.5rem;overflow-x:scroll;-moz-tab-size:2;tab-size:2;text-align:left;border-radius:3px;background-color:#eeeeef}fieldset{padding:1rem;border:1px solid #d4d4d4;border-radius:3px}input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=url],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=date],input[type=month],input[type=week],select,select[multiple],textarea{font-size:1rem;border:1px solid #d4d4d4;border-radius:3px;padding:.5rem 1rem;outline:0}input[type=text]:focus,input[type=password]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=url]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=search]:focus,input[type=number]:focus,input[type=date]:focus,input[type=month]:focus,input[type=week]:focus,select:focus,select[multiple]:focus,textarea:focus{border-color:#0275d8}input[type=color],select:not([multiple]){height:2.2rem}input[type=range]{margin:0;height:2rem}select[multiple] optgroup option{padding:5px}textarea{padding:1rem;height:auto}form label{padding-top:5px;padding-right:.5rem;padding-bottom:.5rem;vertical-align:top}form label:hover{cursor:pointer}@media (min-width:768px){form label{display:inline-block;width:auto;min-width:22%}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form select,form select[multiple],form textarea{display:inline-block;width:calc(77%)}}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:.5rem 1rem;vertical-align:middle;font-size:.8rem;line-height:1.5;cursor:pointer;border-radius:3px;border:1px solid #d4d4d4;background-color:#ebebeb;background-image:linear-gradient(#f4f4f4,#ebebeb)}button:active:not([disabled]),button:focus:not([disabled]),button:hover:not([disabled]),input[type=button]:active:not([disabled]),input[type=button]:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=reset]:active:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=submit]:active:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit]:hover:not([disabled]){border-color:#0267bf;text-shadow:-1px -1px 0 rgba(0,0,0,.3);color:#fff;background-color:#0275d8;background-image:linear-gradient(#108ffd,#0275d8)}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#676a7a;cursor:not-allowed;opacity:.7}
+*,::after,::before{box-sizing:inherit}body>*,iframe,table{max-width:100%}address :last-child,article :last-child,aside :last-child,blockquote p:last-child,figcaption :last-child,figure :last-child,footer :last-child,header :last-child,main :last-child,nav :last-child,section :last-child{margin-bottom:0}a,abbr[title],ins,u{text-decoration:none}ol,p,pre,ul{margin-top:0}html,mark,pre,pre code{color:#50525e}a,blockquote cite,code,kbd,samp{color:#0275d8}body>*,form label{padding-right:.5rem}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form label,form select,form select[multiple],form textarea{display:block;width:100%}blockquote,del,figcaption{color:#676a7a}html{box-sizing:border-box;margin:0;padding:0}*{min-width:0}body{margin:0 auto;padding:2rem 1rem;max-width:900px;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center}ol,ul{margin-bottom:1rem;padding-left:1.1rem}ol li>ol,ol li>ul,ul li>ol,ul li>ul{padding-left:1rem;margin-bottom:0}h1,h2,h3,h4,h5,h6,hr,iframe,p,pre,table{margin-bottom:1rem}dd{margin-left:1rem}address,article,aside,figcaption,figure,footer,header,main,nav,section{display:block;width:100%;margin-bottom:1rem}blockquote,fieldset,figure{margin:0 0 1rem}audio,canvas,embed,img,object,svg,video{display:inline-block;height:auto;max-width:100%}figure{text-align:center}figcaption{font-family:serif}iframe{max-height:75vw;border:0}body>*{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(70% - 1rem);flex-basis:calc(70% - 1rem);padding-left:.5rem}body>aside{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(30% - 1rem);flex-basis:calc(30% - 1rem);min-width:calc(260.4px - 5%)}table{display:block;overflow-x:auto;white-space:nowrap;border-collapse:collapse;border-spacing:0}table caption,td,th{padding:.5rem 1rem;text-align:left}thead{border-bottom:2px solid #0275d8}tbody tr{border-bottom:1px solid #d4d4d4}html{font-size:16px;font-family:sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{margin-top:0;color:#42444e}h1{font-size:2rem}h2{font-size:1.8rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5{font-size:1.2rem}h6{font-size:1rem}p b:only-child{font-weight:300;font-size:1.4rem;line-height:1.4}blockquote{padding:.5rem 1.5rem;border-left:2px solid #0275d8}address,blockquote,cite,var{font-family:Georgia,serif}code,kbd,pre,samp{font-family:monospace}abbr[title]{border-bottom:1px dotted}mark{background-color:#fde965;padding:1px 4px}ins,u{border-bottom:2px solid}del{text-decoration:line-through}dt{font-weight:700}hr{margin-top:1rem;border-top:1px solid #d4d4d4}a{border-bottom:2px solid #bdc3c7;transition:all .1s}a:active,a:focus,a:hover{border-bottom-color:#0275d8}pre{padding:1rem 1.5rem;overflow-x:scroll;-moz-tab-size:2;tab-size:2;font-size:1rem;text-align:left;border-radius:3px;background-color:#eeeeef}fieldset{padding:1rem;border:1px solid #d4d4d4;border-radius:3px}input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=url],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=date],input[type=month],input[type=week],select,select[multiple],textarea{font-size:1rem;border:1px solid #d4d4d4;border-radius:3px;padding:.5rem 1rem;outline:0}input[type=text]:focus,input[type=password]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=url]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=search]:focus,input[type=number]:focus,input[type=date]:focus,input[type=month]:focus,input[type=week]:focus,select:focus,select[multiple]:focus,textarea:focus{border-color:#0275d8}input[type=color],select:not([multiple]){height:2.2rem}input[type=range]{margin:0;height:2rem}select[multiple] optgroup option{padding:5px}textarea{padding:1rem;height:auto}form label{padding-top:5px;padding-bottom:.5rem;vertical-align:top}form label:hover{cursor:pointer}@media (min-width:768px){form label{display:inline-block;width:auto;min-width:22%}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form select,form select[multiple],form textarea{display:inline-block;width:calc(77%)}}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:.5rem 1rem;vertical-align:middle;font-size:.8rem;line-height:1.5;cursor:pointer;border-radius:3px;border:1px solid #d4d4d4;background-color:#ebebeb;background-image:linear-gradient(#f4f4f4,#ebebeb)}button:active:not([disabled]),button:focus:not([disabled]),button:hover:not([disabled]),input[type=button]:active:not([disabled]),input[type=button]:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=reset]:active:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=submit]:active:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit]:hover:not([disabled]){border-color:#0267bf;text-shadow:-1px -1px 0 rgba(0,0,0,.3);color:#fff;background-color:#0275d8;background-image:linear-gradient(#108ffd,#0275d8)}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#676a7a;cursor:not-allowed;opacity:.7}

package.json

 {
   "name": "html.css",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "CSS library without classes",
@@ -11,6 +11,8 @@ "repository": {
     "html",
-    "css"
+    "css",
+    "markdown"
   ],
   "author": {
     "name": "Allan Moreno",
+    "username": "heyallan",
     "email": "[e-mail]",
@@ -17,0 +19,0 @@ "url": "http://heyallan.com",

README.md

 # html.css
 
-Visit the link above to read the introduction.
+Visit the project website to read the introduction and documentation.
 
-## Installation:
-
-**Download files:**
-
-Download and extract files from `/dist` folder:
-
-**Or use CDN:**
-
-Add a CDN link to the `<head>` of your document:
-
-```html
-<!-- development: -->
-<link rel="stylesheet" href="https://unpkg.com/html.css/dist/html.min.css"/>
-```
-
-```html
-<!-- production: -->
-<link rel="stylesheet" href="https://unpkg.com/html.css@<RELEASE_VERSION_HERE>/dist/html.min.css"/>
-```
-
-## Using with markdown parser
-
-Markdown parsers can inject CSS if you add a CSS link at the top of the markdown file. Important: The closing tag `</link>` is not standard, but it will be parsed correctly.
-
-```html
-<link rel="stylesheet" href="path/to/file"/></style>
-```
-
-The resulting HTML file should have the CSS link attached to the HTML and styles should govern the page.
-
-## Browser support
-
-It works on my machine!!! Just kidding, it should have same support as CSS [Flexbox](http://caniuse.com/#feat=flexbox) module.
-
 ## Contributing
 
-Some ways to contribute:
+Be my guest:
 
@@ -43,0 +9,0 @@ - 😱 Open issue, describe bug, suggest solution

src/less/code.less

@@ -8,2 +8,3 @@ pre {
   font-family: @font-family-mono-space;
+  font-size: 1rem;
   text-align: left;
@@ -10,0 +11,0 @@ border-radius: @radius-default;

src/less/layout.less

@@ -6,4 +6,4 @@ body {
 body {
-  display: flex; // <-- this is the flexbox container
-  flex-flow: row wrap; // make children wrap
+  display: flex; // flexbox container
+  flex-flow: row wrap; // make children wrap when shrinked to min-width
   align-items: stretch; // make children full height
@@ -14,32 +14,21 @@ justify-content: center; // make children center horizontally
   > * {
-    flex: 1 1 @column-left-base-width; // <-- default column
-    max-width: @column-max-width;
-
-    // $fix bug: use pseudo-elements instead of padding
-    // because IE11 does not respect boxsizing:borderbox
-    // and counts padding as width
-    // &::before {
-    //   content: "";
-    //   width: 1rem;
-    //   height: 100%;
-    //   float: left;
-    // }
-    // margin-left: -1rem;
-
-    // $fix bug: substract the width of padding to the column width
-    padding: 0 0.5rem;
     flex-grow: 1;
     flex-shrink: 1;
-    flex-basis: calc(@column-left-base-width ~"- 1rem"); // <-- substract padding for IE10+
+    flex-basis: calc(@column-basis-width ~"-" (@column-padding * 2)); // $fix: substract padding width for IE11
+    padding-right: @column-padding;
+    padding-left: @column-padding;
+    max-width: 100%;
   }
+
   // sidebar
   > aside {
-    flex: 1 1 @column-right-base-width; // <-- optional second column
-    max-width: @column-max-width;
-    min-width: @column-min-breakpoint; // break point
-
     flex-grow: 1;
     flex-shrink: 1;
-    flex-basis: calc(@column-right-base-width ~"- 1rem"); // <-- substract padding for IE10+
+    flex-basis: calc(@sidebar-basis-width ~"-" (@column-padding * 2)); // $fix: substract padding width for IE11
+    min-width: calc(@sidebar-basis-width-px ~"-" 5%); // wrap column if it shrinks more than 5%
   }
 }
+
+// $fix: substract the width of column padding
+// because IE11 counts padding as part of the width
+// leading to misscalculation of total width

src/less/typography.less

 html {
-  font-size: @font-size-p;
+  font-size: @rem-base;
   font-family: @font-family-sans-serif;
@@ -4,0 +4,0 @@ color: @color-paragraph;

src/less/variables.less

@@ -1,12 +0,3 @@
-// #8e44ad
-// #0275d8
-// #ed365b
-// #fce897
-// #fde965
-// #ffe256
-// #42444e
-// #50525e
-// #66cc33
-// #77cc55
-
+// variables
+// --------------------
 @color-primary:   #0275d8;
@@ -20,11 +11,6 @@ @color-gray:      #d4d4d4;
 @radius-default: 3px;
+@rem-base: 16px;
 
-@container-width:         900px;
-@column-left-base-width:  70%;
-@column-right-base-width: 30%;
-@column-max-width:        100%;
-@column-min-breakpoint:   220px;
-
-@breakpoint-sm: 768px;
-
+// typography
+// --------------------
 @font-size-h1: 2rem;
@@ -36,3 +22,3 @@ @font-size-h2: 1.8rem;
 @font-size-h6: 1rem;
-@font-size-p:  16px;
+@font-size-p:  1rem;
 @font-size-lead: @font-size-h4;
@@ -45,1 +31,17 @@
 @font-family-mono-space: monospace;
+
+// layout
+// --------------------
+@container-width: 900px;
+@container-padding: 1rem;
+@container-padding-px: unit(@container-padding) * @rem-base;
+
+@column-basis-width: 70%;
+@column-padding: 0.5rem;
+
+@sidebar-basis-width: 30%;
+@sidebar-basis-width-px: ((@container-width - (@container-padding-px * 2)) / 100) * unit(@sidebar-basis-width);
+
+// screen size breakpoint: // used by forms, to break lines
+// --------------------
+@breakpoint-sm: 768px;

No alert changes

Worsened metrics

Total package byte prevSize

26326

-3.42%

Lines of code

480

-0.62%

Number of lines in readme file

16

-68%

No dependency changes