mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity

Fixed core documentation

Browse Source 
Removed extra tabs, which made the preformatted code look weird.
This commit is contained in:
Angelos Chalaris
2017-04-28 09:49:26 +03:00
parent f337f190cb
commit fdbcb9218f
2 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
docs/core.html
View File

@@ -99,7 +99,7 @@
<p>For the basic typography rules we did the following, along with other things presented below:</p>
<ul>
<li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
<li>We set the colors to <code>background: #f5f5f5;</code> and <code>color: #212121;</code>.</li>
<li>We set the colors to <code>background: #f8f8f8;</code> and <code>color: #212121;</code>.</li>
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
</ul>
@@ -125,11 +125,11 @@
<p>All six of the HTML headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>) are styled with simple rules, providing a clean base for your pages' headings. Apart from the headings themselves, complementary rules are provided for <code>&lt;small&gt;</code> elements inside headings, allowing you to define subheadings or explanatory text for those headings. These subheadings are stylized to display below the headings in smaller, lighter type.</p>
<h3>Sample code</h3>
<pre>&lt;h1&gt;Heading 1&lt;small&gt;Subheading&lt;/small&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;small&gt;Subheading&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;small&gt;Subheading&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;small&gt;Subheading&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;small&gt;Subheading&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;small&gt;Subheading&lt;/small&gt;&lt;/h6&gt;</pre><br>
&lt;h2&gt;Heading 2&lt;small&gt;Subheading&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;small&gt;Subheading&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;small&gt;Subheading&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;small&gt;Subheading&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;small&gt;Subheading&lt;/small&gt;&lt;/h6&gt;</pre><br>
</div>
</div>
</div>
@@ -143,9 +143,9 @@
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p><hr>
<pre>function sum(num1, num2) {
var num3 = num1 + num2;
console.log('Result: ' + num3);
}</pre>
var num3 = num1 + num2;
console.log('Result: ' + num3);
}</pre>
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><br>
</div>
</div>
@@ -153,17 +153,17 @@
<p>The most common HTML5 elements must be things like <code>&lt;p&gt;</code>aragraphs, bold (<code>&lt;strong&gt;</code>) &amp; italics (<code>&lt;em&gt;</code>) text, links (<code>&lt;a&gt;</code>), horizontal rules (<code>&lt;hr&gt;</code>) and <code>&lt;small&gt;</code> text. These, along with a few others, are styled by default using clean, modern design to make your pages look cool and stand out from the rest of the internet.</p>
<h3>Sample code</h3>
<pre>&lt;p&gt;This is a paragraph with some &lt;strong&gt;bold text&lt;/strong&gt; and some &lt;em&gt;italics text&lt;/em&gt;.&lt;/p&gt;
&lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
&lt;small&gt;This is some small text.&lt;/small&gt;
&lt;sub&gt;Subscript&lt;/sub&gt;
&lt;sup&gt;Superscript&lt;/sup&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre><br>
&lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
&lt;small&gt;This is some small text.&lt;/small&gt;
&lt;sub&gt;Subscript&lt;/sub&gt;
&lt;sup&gt;Superscript&lt;/sup&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre><br>
</div>
</div>
</div>
@@ -192,16 +192,16 @@
<p>Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code>&lt;ul&gt;</code>) and ordered lists (<code>&lt;ol&gt;</code>) are minimally pre-styled to make things a little bit easier for you.</p>
<h3>Sample code</h3>
<pre>&lt;ul&gt;
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Strawberry&lt;/li&gt;
&lt;/ul&gt;
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Strawberry&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;Wake up&lt;/li&gt;
&lt;li&gt;Eat breakfast&lt;/li&gt;
&lt;li&gt;Go to work&lt;/li&gt;
&lt;/ol&gt;</pre><br>
&lt;ol&gt;
&lt;li&gt;Wake up&lt;/li&gt;
&lt;li&gt;Eat breakfast&lt;/li&gt;
&lt;li&gt;Go to work&lt;/li&gt;
&lt;/ol&gt;</pre><br>
</div>
</div>
</div>
@@ -219,9 +219,9 @@
<p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p> <p>On a side note, if you want to add captions to images, you can use a <code>&lt;figcaption&gt;</code> element, while wrapping both the image and it inside a <code>&lt;figure&gt;</code>.</p>
<h3>Sample code</h3>
<pre>&lt;figure&gt;
&lt;img src=&quot;...&quot;&gt;
&lt;figcaption&gt;Image caption&lt;/figcaption&gt;
&lt;/figure&gt;</pre><br>
&lt;img src=&quot;...&quot;&gt;
&lt;figcaption&gt;Image caption&lt;/figcaption&gt;
&lt;/figure&gt;</pre><br>
</div>
</div>
</div>

5
docs/v2/DEVLOG.md
View File

@@ -1044,3 +1044,8 @@
- Tested aforementioned changes, everything seems to work ok. Size of `default` flavor is now `6.71KB` compared to a `6.89KB` in previous release. Pretty sweet reduction.
- Built sidebar navigation into modules pages.
- Tweaked color of `button` elements slightly to look less terrible.
## 20170428
- Checked online if support for old `flexbox` syntax can be removed, but due to **UC Browser** (~9% of the market) it cannot. Shame really, because it's the only browser that needs it, all other legacy browsers have a low market share or are already deprecated due to other changes. Thus, we keep the old syntax, but a flag might come later down the line for people who don't care about legacy and UC. Also, the `-webkit` prefix for the newer syntax is still needed in many modern-ish browsers, so no changes in that department, either. At least, I checked.
- Fixed the extra tabbing in `core` module documentation.