What is it

Magicssian is a CSS Boilerplate to head start a small web project by providing cross-browser consistent styles to default HTML elements with pure css trickery and a bit of design.

Magicssian is a forever-i-am-learning work in progress and relies on the following:

• The soon-i-hope-their-be-more-awesome CSS Custom Properties.

  I know it is fun to get Sassy but CSS Custom Properties are choosen here in favor of a more native aproach.

• The postcss-import, postcss-css-variables and postcss-color-function plugins from the PostCSS family

  There are a lot of plugins to choose from, depending on your needs.

• The Fast and efficient CSS optimizer Clean-CSS.

  All put together with:

• The easiest build tool Brunch.io.

  Initially Magicssian was build using npm scripts, and there are plans to add a build option using Gulp just for the fun of it.

Get into it

Download
Add the following tag to your html5 document

<link rel="stylesheet" href="./path/to/magicssian.min.css">

The base

Custom properties

All things avaliable for a custom setup is here, we use the relatively new CSS Custom properties

Reset

a.k.a css variables

The examples

Text

The examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

This is a simple paragraph block with some regular text-level markup, like Strong or Bold, Emphasis or Italics, also an example of using subscript₂ and superscript², del, ins or dfn, abbr for definition and abbreviation respectively. Now a <br />.

A new paragraph block with inline quotations a <code> tag: <a href="" title="title"> and his .variant class <a href="" title="title">.

Here is how a default link looks like followed by a color variant and the base color variant. Finally, a blockquote:

Abracadabra A magician

Preformated text & Code

    class Foo {
      public $publicVariable = 'A public variable';

      function functionName() {
        echo $publicVariable;
      }
    }

Variant

    class Foo {
      public $publicVariable = 'A public variable';

      function functionName() {
        echo $publicVariable;
      }
    }

Lists

Lists are almost untouched, beside font-size and line-height, everything else remains the same.

However, you can customize lists using combinations of the following classes:

.custom [.variant .outlined, .square, .diamond, .dash, .arrow, .no-decoration, .no-indent]

Tables

The examples

Striped

Buttons

The examples

Form items

The tricks

We like to call'em tricks...

(Flexbox) grid

The examples

Notification

Dropdown navigation

Simple dropdown menus using nested lists, mixed with custom list styles.

.dropdown [.inline]

<ul class="custom no-decoration no-indent dropdown">
  <li>item 1</li>
  <li>item 2 >
    <ul class="custom no-decoration no-indent">
      <li>item 2.1</li>
      <li>item 2.2 >
        <ul class="custom no-decoration no-indent">
          <li>item 2.2.1</li>
          <li>item 2.2.2</li>
          <li>and so on...</li>
        </ul>
      >/li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

The examples

Horizontal scroll container

Display elements horizontally in a constrained size container, scroll only works with mouse or touch gestures.

.container .scroll-h []

<div class="container scroll-h">
  <div class="content">
    <a href="javascript:;" title="Item start" class="">Item start</a>
    <a href="javascript:;" title="Item" class="">Item</a>
  </div>
</div>

The examples

Collapsible container

An accordion-like container, toggle content display using checkbox hack.

.container .collapse []

<div class="container collapse">
  <input type="checkbox" id="check-collapse" name="check-collapse" class="hidden">
  <label for="check-collapse" id="" title="" class="">
    <h5 class="heading">Heading</h5>
  </label>
  <div class="content">
    <li><a href="javascript:;" title="Item 1" class="item">Item 1</a></li>
    <li><a href="javascript:;" title="Item 2" class="item">Item 2</a></li>
  </div>
</div>

The examples

Collection

A collection is like a list, in a box.

.collection []

  <dl class="collection">
    <dt class="heading">
      <h5>Collection 1</h5>
    </dt>
    <dd class="content">
      <ul class="custom no-decoration no-indent">
        <li><a href="javascript:;">Item 1.1</a></li>
        <li><a href="javascript:;">Item 1.2</a></li>                    
      </ul>
    </dd>
  </dl>

The examples

Tabs

The examples