mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-06 22:06:30 +02:00
Card basic syntax partial documentation
This commit is contained in:
Angelos Chalaris
@@ -564,3 +564,4 @@
|
||||
- Basic documentation for `alert`s.
|
||||
- Documented `animated` `alert`s. Documentation of `contextual` seems to be complete.
|
||||
- Added `card` doc page.
|
||||
- Added some basic info on `card`s in doc page.
|
||||
|
||||
@@ -45,12 +45,12 @@
|
||||
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
||||
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
||||
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
@media (max-width: 1279px){
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
}
|
||||
@@ -105,11 +105,11 @@
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p><!-- Card description --></p><br>
|
||||
<p>The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,19 +122,40 @@
|
||||
<h2>Basic syntax</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="card"><div class="section"><h3>Card 1</h3><p>This is a basic card with some sample content.</p></div></div>
|
||||
<div class="card"><div class="section"><h3>Card 2</h3><p>This is another card with some sample content.</p></div></div>
|
||||
<div class="card"><div class="section"><h3>Card 3</h3><p>This is one more card with some sample content.</p></div></div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<p>To start using cards in your layout, you need to first create a <code><div class="row"></code> element (you can learn more about that in the <a href="grid.html"><strong>grid</strong></a> module's page). After doing that, you can easily add cards inside the element using <code><div></code> elements with the <code>.card</code> class. Add your content inside the cards, splitting it in <code>.section</code>s using <code><div></code> elements. Cards will respond to screen changes, realigning themselves as necessary to fit on the page. Due to this property, the example showcased here might not make it immediately apparent that cards normally display side by side in order to fill their parent container.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="row">
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Check below for section!!!!</li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
@@ -159,10 +180,10 @@
|
||||
<h2>Sections & media</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
@@ -196,10 +217,10 @@
|
||||
<h2>Fluid Cards</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
@media (max-width: 1279px){
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
|
||||
@@ -76,6 +76,13 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container" style="padding-top: 20px;">
|
||||
<br><br>
|
||||
<h4>card demo</h4>
|
||||
<div class="row">
|
||||
<div class="card"><h3>Card</h3><p>Content of a card</p></div>
|
||||
<div class="card"><h3>Card</h3><p>Content of a card</p></div>
|
||||
<div class="card"><h3>Card</h3><p>Content of a card</p></div>
|
||||
</div>
|
||||
<br><br>
|
||||
<h4>Contextual tests</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer <mark class="inline-block">took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularisedin the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
||||
Why do we use it?
|
||||
|
||||
Reference in New Issue
Block a user