We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
mini.css
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Documented icons

Angelos Chalaris 7 years ago
parent
072eb7ae0d
commit
f7ce971bf7
8 changed files with 200 additions and 3 deletions
Split View Show Diff Stats
  1. 3 0
      docs/build-docs.js
  2. 3 1
      docs/doc-fragments/docFragments.js
  3. 73 0
      docs/doc-fragments/icons.js
  4. 5 0
      docs/v3/DEVLOG.md
  5. 78 2
      docs/v3/docs.html
  6. 0 0
      docs/v3/style.min.css
  7. 26 0
      src/flavors/mini-doc.scss
  8. 12 0
      src/mini/_icon.scss

+ 3 - 0
docs/build-docs.js
View File 

@@ -79,6 +79,8 @@ fs.writeFile(indexOutputPath,
 
 var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
 
 var docOutputPath = './docs/v3/docs.html';                  // This path is relative to package.json.
 
 
+const FEATHER_BANNER = `<a href="https://feathericons.com/" class="section double-padded" id="feather-banner" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg>&nbsp;Powered by Feather</a>`;
 
+
 
 var documentStart = `<!DOCTYPE html><html lang="en"><head>
 
 <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
 
 <link rel="stylesheet" href="./style.min.css">
 
@@ -156,6 +158,7 @@ var documentationSearch = `<script>
 
 function buildFragment(fragment){
 
   var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
 
   <h2 class="section double-padded">${fragment.title}</h2>
 
+  ${fragment.id === 'icons'?FEATHER_BANNER:''}
 
   <div class="section">${fragment.description}</div>
 
   ${fragment.example?`<div class="section"><h3>Example</h3>${fragment.example}</div>`:''}
 
   ${fragment.samples.length?`<div class="section double-padded prefiller-example"><h3>Sample code</h3>${fragment.samples.join('')}</div>`:''}

+ 3 - 1
docs/doc-fragments/docFragments.js
View File 

@@ -22,6 +22,7 @@ var modalDialogs = require('./modalDialogs');
 
 var spoilersAndAccordions = require('./spoilersAndAccordions');
 
 var progressBars = require('./progressBars');
 
 var donutSpinners = require('./donutSpinners');
 
+var icons = require('./icons');
 
 
 module.exports = [
 
   gettingStarted,
 
@@ -31,5 +32,6 @@ module.exports = [
 
   header, navigationBar, footer, drawer,
 
   tables,
 
   textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
 
-  progressBars, donutSpinners
 
+  progressBars, donutSpinners,
 
+  icons
 
 ]

+ 73 - 0
docs/doc-fragments/icons.js
View File 

@@ -0,0 +1,73 @@
 
+module.exports = {
 
+  id: 'icons',
 
+  title: 'Icons',
 
+  keywords: [`icon`, `svg`, `feather`, `icons`],
 
+  description: `<p><strong>mini.css</strong> comes with a set of 20 commonly-used icons (courtesy of <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a>) that you can use anywhere in your web apps, utilizing the appropriate class for each icon.</p>`,
 
+  example: `<div class="row icon-row">
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-alert"></span>&nbsp;.icon-alert</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-bookmark"></span>&nbsp;.icon-bookmark</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-calendar"></span>&nbsp;.icon-calendar</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-cart"></span>&nbsp;.icon-cart</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-credit"></span>&nbsp;.icon-credit</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-edit"></span>&nbsp;.icon-edit</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-help"></span>&nbsp;.icon-help</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-home"></span>&nbsp;.icon-home</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-info"></span>&nbsp;.icon-info</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-link"></span>&nbsp;.icon-link</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-location"></span>&nbsp;.icon-location</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-lock"></span>&nbsp;.icon-lock</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-mail"></span>&nbsp;.icon-mail</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-phone"></span>&nbsp;.icon-phone</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-rss"></span>&nbsp;.icon-rss</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-search"></span>&nbsp;.icon-search</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-settings"></span>&nbsp;.icon-settings</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-share"></span>&nbsp;.icon-share</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-upload"></span>&nbsp;.icon-upload</p></div>
 
+  <div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-user"></span>&nbsp;.icon-user</p></div>
 
+  </div>`,
 
+  samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-alert&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-bookmark&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-calendar&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-cart&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-credit&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-edit&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-help&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-home&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-info&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-link&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-location&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-lock&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-mail&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-phone&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-rss&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-search&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-settings&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-share&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-upload&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-user&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span></pre>`],
 
+  notes: [`You can only use a <code>&lt;span&gt;</code> element to create an icon.`,
 
+  `You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.`],
 
+  customization: [
 
+    `Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`
 
+  ],
 
+  modifiers: [
 
+    {
 
+      title : 'Color variants',
 
+      description: `<p>You can create secondary or inverse (<code>.secondary</code>, <code>.inverse</code>) icons, simply by adding the appropriate color modifier.</p>`,
 
+      example: `<p style="padding: 0.5rem;" class="doc">This is a <span class="icon-home secondary"></span> secondary icon, which has a lighter color.</p><p style="background: #111; color: #f8f8f8; padding: 0.5rem;" class="doc">This is an <span class="icon-home inverse"></span> inverse icon.</p>`,
 
+      samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-alert secondary&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span>
 
+<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-alert inverse&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span></pre>`]
 
+    }
 
+  ],
 
+  dos: [],
 
+  donts: [
 
+    {
 
+      description: `Avoid inserting text inside icon elements.`,
 
+      sample: `<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-alert&quot;</span><span class="highlight-a">&gt;</span>Don't place text here.<span class="highlight-a">&lt;/span&gt;</span></span></pre>`
 
+    },
 
+    {
 
+      description: `Avoid applying two color modifiers on the same icon.`,
 
+      sample: `<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;icon-alert inverse secondary&quot;</span><span class="highlight-a">&gt;&lt;/span&gt;</span></span></pre>`
 
+    }
 
+  ]
 
+}

+ 5 - 0
docs/v3/DEVLOG.md
View File 

@@ -292,3 +292,8 @@
 
 - Added all icons.
 
 - Added `.inverse` and `.secondary` filters for icons.
 
 - Total size with icons is `8.17KB` gzipped.
 
+
 
+## 20180123
 
+
 
+- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
 
+- Documented `icon` module in its entirety and retested everything. It's all good.

File diff suppressed because it is too large
+ 78 - 2
docs/v3/docs.html


File diff suppressed because it is too large
+ 0 - 0
docs/v3/style.min.css


+ 26 - 0
src/flavors/mini-doc.scss
View File 

@@ -127,6 +127,7 @@ $spinner-donut-tertiary-name:       'tertiary';   // Class name for tertiary spi
 
 $spinner-donut-tertiary-fore-color:   #308732;    // Foreground color for tertiary spinner donut color variant.
 
 @include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
 
 
+@import '../mini/icon';
 
 @import '../mini/utility';
 
 
 // Custom elements for his flavor.
 
@@ -677,3 +678,28 @@ table.doc.cardized {
 
     font-weight: $table-mobile-label-font-weight;
 
   }
 
 }
 
+
 
+a#feather-banner {
 
+  background: #1976d2;
 
+  color: #f8f8f8;
 
+  font-size: 1.25rem;
 
+  text-align:center;
 
+  transition: background 0.3s;
 
+  &:hover, &:focus {
 
+    text-decoration: none;
 
+    background: #1565c0;
 
+  }
 
+  svg {
 
+    vertical-align: -0.25rem;
 
+    margin-right: 0.5rem;
 
+  }
 
+}
 
+
 
+.row.icon-row {
 
+  padding: 0.25rem;
 
+  p {
 
+    margin: 0.125rem;
 
+    padding: 0.25rem;
 
+    text-align: center;
 
+  }
 
+}

+ 12 - 0
src/mini/_icon.scss
View File 

@@ -37,6 +37,18 @@ $icon-inverse-color-name: 'inverse' !default;    // Class name for inverse color
 
   }
 
   @return $string;
 
 }
 
+// == Uncomment below code if this module is used on its own ==
 
+//
 
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
 
+// $fore-color:              #111 !default;        // Text & foreground color
 
+// $universal-margin-var:          '--universal-margin' !default;
 
+// $fore-color-var:                '--fore-color' !default;
 
+// :root {
 
+//  #{$universal-margin-var}: $universal-margin;
 
+//  #{$fore-color-var}: $fore-color;
 
+// }
 
+//
 
+// ============================================================
 
 // Base styling for icons.
 
 span[class^='#{$icon-prefix}-'] {
 
   display: inline-block;

Some files were not shown because too many files changed in this diff

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5