Introducing Micro – A microscopic Ajax and CSS framework

So, I have finally done it! I have created an alternative to Bootstrap CSS, which is order of magnitudes smaller in size and bandwidth usage – Without really losing any of the main features from Bootstrap. This project is called Micro. Its total CSS size ticks in at roughly 10KB. There is no additional JavaScript, and still it does most of the things Bootstrap does.

Although Micro was built for Phosphorus Five, it is still easily used as a stand alone CSS framework, for anyone wanting a smaller footprint than that which Bootstrap provides. If you wish to use it as a stand alone CSS framework, you can include the “main.css” file from the media folder. However, its true magic only surfaces when combined with Phosphorus Five.

In the video below, I am introducing Micro, to demonstrate some of its capabilities. In addition, I am comparing it towards one of my main competitors; ExtJS or Sencha. ExtJS is more than 100x larger in bandwidth size, and still arguably, Micro does most of the things that ExtJS does.

Micro is still not released in a stable release, but already ready for action. Click here to download micro. Below is the sample code I created in the above YouTube video.

p5.web.include-css-file:@MICRO/media/main.css
create-widget
  class:container
  widgets
    container
      class:row
      widgets
        container
          class:col
          widgets
            button
              innerValue:Click me
              onclick
                create-widgets
                  micro.widgets.modal:our-modal
                    class:micro-modal
                    widgets
                      h3
                        innerValue:Header of modal
                      p
                        innerValue:Content of modal
                      div
                        class:right
                        widgets
                          button
                            innerValue:Close
                            onclick
                              delete-widget:our-modal
        container
          class:col
          widgets
            label
              innerValue:Check box
              for:my-check-1
            input:my-check-1
              type:checkbox
        container
          class:col
          widgets
            label
              innerValue:Radio 1
              for:my-rdo-1
            input:my-rdo-1
              type:radio
              name:rdo-group-1
            label
              innerValue:Radio 2
              for:my-rdo-2
            input:my-rdo-2
              type:radio
              name:rdo-group-1
create-widget
  class:container
  widgets
    container
      class:row
      widgets
        container
          class:col
          widgets
            micro.widgets.tab
              class:micro-tab micro-tab-border
              view
                name:Tab view 1
                widgets
                  h3
                    innerValue:This is tab view 1
                  p
                    innerValue:This is content of tabview 1
              view
                name:Tab view 2
                widgets
                  h3
                    innerValue:This is tab view 2
                  p
                    innerValue:This is content of tabview 2
              view
                name:Tab view 3
                widgets
                  h3
                    innerValue:This is tab view 2
                  p
                    innerValue:This is content of tabview 2
                  button
                    innerValue:Click me
                    onclick
                      create-widgets
                        micro.widgets.modal:our-modal
                          class:micro-modal
                          widgets
                            h3
                              innerValue:Header of modal
                            p
                              innerValue:Content of modal
                            div
                              class:right
                              widgets
                                button
                                  innerValue:Close
                                  onclick
                                    delete-widget:our-modal

Since Micro does not integrate with Bootstrap, it is important that you set your template to “empty” in System42’s CMS, and that you consume it by creating a new CMS “lambda” page.

Micro has its own responsive grid system, based upon the “flexbox model”, which allows you to declare as many columns as you wish. It also features explicit columns sizes, which are percentages of the main row you declare your columns within – Such as “col-10”, which becomes 10 percent of the available width.

It automatically resize all columns to 100% width, when the resolution of the client goes below 800px, which makes it a perfect match for responsive websites, built around the “mobile first” design.

Below are the downloads I use in the video.

Below is a screenshot of what the above code will produce for you.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s