CSS framework (Grid, Table, button, and more) for every website on htm.wiki

Blogs and websites created from htm.wiki use this CSS library.
Here, talking about CSS Framework for W3AMP & HTM.WIKI Pre-written CSS Classes, you can combine available classes with your own style="" to present the content page. Please see here
NOTE: REGULARLY CHECK RESPONSIVE: On phone devices, tablets, and computer screens and televisions
CARD

Card title

content inside card content inside card content inside card content inside card 

<div class="card">

  <header>

    <h4>Card title</h4>

  </header>

  <p>content inside card content inside 

  card content inside card content inside card </p>

  <footer class="is-right">

    <a class="button primary">Submit</a>

    <a class="button">Cancel</a>

  </footer>

</div>


HIDE ELEMENT
  • hidden - hides the element completely
  • hidden-xs - hides the element for screens <600px
  • hidden-sm - hides the element for screens >=600px and <900px
  • hidden-md - hides the element for screens >=900px and <1200px
  • hidden-lg - hides the element for screens >=1200px
  • hidden-pr - hides the element for printing


    • TAG & BADGE
    Badge.. 
    <span class=badge>Badge..</span>
    Tag.. 
    <span class=tag>Tag..</span>
    tag 
    <span class="tag" style="background:purple;color:violet">tag</span>


    TABLES Class: table,table-all,hoverable,bordered 
    <table class="table table-all hoverable bordered">
    
	<tr><td>Line1-Col1</td><td>Line1-Col2</td><td>Line1-Col3</td></tr>
    
	<tr><td>Line2-Col1</td><td>Line2-Col2</td><td>Line2-Col3</td></tr>
    
</table>
    Line1-Col1Line1-Col2Line1-Col3
    Line2-Col1Line2-Col2Line2-Col3


    BUTTON
    Default 
    <a class="button">Default</a>
    Primary 
    <a class="button primary">Primary</a>
    Secondary 
    <a class="button secondary">Secondary</a>
    Dark 
    <a class="button dark">Dark</a>
    Error 
    <a class="button error">Error</a>
    Success 
    <a class="button success">Success</a>
    Outline 
    <a class="button outline">Outline</a>
    Primary outline 
    <a class="button outline primary">Primary outline</a>
    Secondary outline 
    <a class="button outline secondary">Secondary outline</a>
    Dark outline 
    <a class="button outline dark">Dark outline</a>
    Clear 
    <a class="button clear">Clear</a>
    <button type="button" class="button primary icon">New file 
    
  <img src="https://icongr.am/feather/file.svg?size=16&color=ffffff">
    
</button>
    <button type=submit>Default button</button>


    TABS 
    <nav class="tabs is-full">
    
  <a>Tab 1</a>
    
  <a class="active">Tab 2</a>
    
  <a>Tab 3</a>
    
</nav>


    NAV 
    <nav class="nav">
    
  <div class="nav-left">
    
    <a class="brand" href="#">Brand</a>
    
    <div class="tabs">
    
      <a>Link 1</a>
    
      <a class="active">Link 2</a>
    
    </div>
    
  </div>
    
  <div class="nav-right">
    
    <a class="button outline">Button</a>
    
  </div>
    
</nav>
    
	
    <nav class="nav">
    
  <div class="nav-left">
    
    <a class="active">Link 1</a>
    
    <a>Link 2</a>
    
  </div>
    
  <div class="nav-center">
    
    <a class="brand">
    
      <img src="https://w3amp.com/logo-sm.png" alt="">
    
    </a>
    
  </div>
    
  <div class="nav-right">
    
      <a>Link 3</a>
    
      <a>L4</a>
    
  </div>
    
</nav>


    DETAIL
    Read more

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis. 

    <details>
    
    <summary>Read more</summary>
    
    <p>Lorem ipsum dolor sit amet, 
    
	consectetur adipiscing elit. 
    
	Donec viverra nec nulla vitae mollis.
    
    </p>
    
 </details>
    My Profile

    Edit

    Alerts 3

    Logout

    Login 
    <details class=dropdown>
    
<summary class="button outline">My Profile</summary>
    
<div class=card>
    
  <p><a href="#">Edit</a></p>
    
  <p><a href="#">Alerts <span class=tag>3</span></a></p>
    
  <hr/>
    
  <p><a href="#" class=text-error>Logout</a></p>
    
</div>
    
</details>
    
<details class=dropdown>
    
<summary class="button outline">Login</summary>
    
  <form class="card row">
    
   <input class=col-12 placeholder=username>
    
   <input class=col-12 placeholder=password type=password>
    
   <footer class=is-right>
    
    <a class="button clear">Sign up</a>
    
     <button type=submit>Sign in</button>
    
   </footer>
    
  </form>
    
</details>


    Responsive Grid

    Flexible grid

    A simple way to build flexible responsive columns:

    • Add a .row container
    • Add as many .col elements as you want

    Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

    <div class="row">
    
    <div class="col">
    
      <div class="card">.col</div>
    
    </div>
    
</div>
    

    
<div class="row">
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
</div>
    .col
    .col
    .col
    .col

    Sized

    You can also specify the size of the columns

    • Add a .row container
    • Add a .col-n child where n can be from 1 to 12

    Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use:
    .col-4.

    <div class="row">
    
  <div class="col-1"> .col-1 </div>
    
  <!-- repeat 11 times -->
    
</div>
    
<div class="row">
    
  <div class="col-4"> .col-4 </div>
    
  <!-- repeat twice -->
    
</div>
    
<div class="row">
    
  <div class="col-12"> .col-12 </div>
    
</div>
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-4
    .col-4
    .col-4
    .col-12

    Responsive grids:

    We now have responsive grids that work based on device width.

    • All columns are 100% for device width < 600px
    • .col and .col-N for all device sizes >= 600px
    • .col-N-md for >= 900px sizes
    • .col-N-lg for >= 1200px sizes
    
<div class="row">
    
<div class="col-12 col-6-md col-4-lg">
    
  <div class="card">.col-12.col-6-md.col-4-lg</div>
    
</div>
    
<div class="col-6 col-3-md col-4-lg">
    
  <div class="card">.col-6.col-3-md.col-4-lg</div>
    
</div>
    
<div class="col-6 col-3-md col-4-lg">
    
  <div class="card">.col-6.col-3-md.col-4-lg</div>
    
</div>
    
</div>
    
<div class="row">
    
<div class="col col-6-lg">
    
  <div class="card">.col.col-6-lg</div>
    
</div>
    
<div class="col col-3-lg">
    
  <div class="card">.col.col-3-lg</div>
    
</div>
    
<div class="col col-3-lg">
    
  <div class="card">.col.col-3-lg</div>
    
</div>
    
</div>
    .col-12.col-6-md.col-4-lg
    .col-6.col-3-md.col-4-lg
    .col-6.col-3-md.col-4-lg
    .col.col-6-lg
    .col.col-3-lg
    .col.col-3-lg

    Mix-n-Match

    You can use a combination of flexible and sized columns.

    When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

    <div class="row">
    
    <div class="col-2">
    
      <div class="card">.col-2</div>
    
    </div>
    
    <div class="col-2">
    
      <div class="card">.col-2</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
  </div>
    
  <div class="row">
    
    <div class="col-10">
    
      <div class="card">.col-10</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
  </div>
    
  <div class="row">
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="is-full-width"></div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
  </div>
    .col-2
    .col-2
    auto
    .col-3
    .col-10
    auto
    auto
    auto
    auto
    auto

    Reverse Direction

    Add .reverse to the .row to reverse the column direction. 

    <div class="row reverse">
    
    <div class="col-6">
    
      <div class="card">.col-6</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
</div>
    .col-6
    .col-3
    .col-3


    Example of how to combine class and style

    Sample: 
    <TAG class="class1 class2 classn" style="....">HTML-Content-inside</TAG>

    Explanation: Class names, found in the examples above. Or you can also write additional CSS for your website (in the CSS section on the left column of the admin page).
    Practical example At the top is a simulation of a card, with the default background color. Now we create a new card: width 1/2 of the large screen, blue background, yellow text, K2D font, font size 200%.
    This is an example, made by W3AMP.com 
    <div class=row>
    
	<div class="card col-6" style="background:blue; color:yellow; font-family:K2D; font-size:200%">
    
	This is an example, made by <a href=https://w3amp.com>W3AMP.com</a>
    
	</div>
    
</div>
    *Thanks to Jenil Gogari for letting us inherit this CSS code, based on CHOTA.
    Create Blog     Contact   Terms