Play around with Micro CSS on my server

In my previous blog, I wrote about Micro CSS, a flexbox based CSS framework which is much smaller than Bootstrap. If you want to play around with Micro CSS, before downloading it, you can visit this link, and create your own HTML files (in the “test” folder). If you want to see some “hello world” code using Micro, and how to include it on your own page, you can see some example code here.

On my server, you can actually create HTML, CSS and JavaScript files in my “test” server. This allows you to play around with micro, before even downloading it. The basic idea is to include micro.css, create a container/row/col HTML wireframe, and add your content into your “col” elements as you see fit.

If you want to, you can download Micro (without Phosphorus Five) here.

Advertisements

Outperforming Bootstrap CSS with a modern layout

I have just created an example that is using the Micro CSS framework to create a couple of responsive columns. The total bandwidth usage of that link is ~10Kb. The Bootstrap CSS examples are using jQuery, hundreds of Kb of font files, and a JavaScript file also in the hundreds of Kbs. In total, Bootstrap’s CSS examples are more than one order of magnitude larger, without accomplishing much more than that which Micro is accomplishing. And this is before I have even minified Micro!

Bootstrap CSS is created and maintained by Twitter, which is famous for consuming megabytes of bandwidth, to display a couple of 160 characters long messages in your browser. Check out the difference below, first Micro.

The Bootstrap CSS (notice Google seems to be down at the moment, at least from my home, so there are several crucial files served over their CDN which aren’t loaded).

However, unless my memory plays tricks with me, Bootstrap CSS is at least 30 times as large in total as Micro.

The problem with Bootstrap CSS (and why you should never use it on new projects), is that it is built upon an archaic and ancient technology. And upgrading it to use the new “flexbox model”, is impossible, due to “legacy problems”. Making Bootstrap become a modern CSS framework, would basically make every single webpage out there consuming it break. So Bootstrap is cornered, and cannot upgrade their code to become modern, without creating breaking changes, making it impossible to update from older versions of Bootstrap to their new version.

There are hundreds of interesting CSS frameworks out there, besides Bootstrap. Milligram being one for example. The one I am using is called Micro, and is Open Source and integrated into the main download of Phosphorus Five. And yes, I created it. If you want to use it in commercial projects though, you’ll need a valid proprietary license for Phosphorus Five.

Here is my example code. And here is the example output. Hint, try to resize your browser such that it becomes less than 800px in width, to see the responsive features of Micro.

Micro a tiny CSS framework

I have seen some pretty tiny CSS framework before. Milligram comes to mind for instance. However, even though CJ Patoilo did some pretty kick ass cool things with only 2Kb of CSS, it simply isn’t enough, at least not for me – So I created my own CSS framework, and I called it Micro.

Even though Micro is created for my own needs in regards to Phosphorus Five, it easily stands on its own legs today. In the latest release, I completely refactored Micro, and I seriously cleaned it up, and I was able to tick it in on 6.4Kb. In addition, there’s a couple of font files (IcoMoon) and an (optional) skin file. All in all, we’re talking about ~50Kb, give or take. If you exclude the fonts, it’s less than 10Kb, and it’s not even minified. Not too bad if you ask me. Minified and zipped, without fonts, it probably wouldn’t be more than ~5Kb. Still it gives you arguably “everything” you need. Below is a screenshot of Micro and how it is used in Hyper IDE.

However, “what’s in it for me” you may ask? After all, a CSS framework is pretty useless unless it solves your needs, right? Well, Hyper IDE and the entirety of Phosphorus Five is using Micro. You can try out Hyper IDE here. So obviously you get a treeview, modal windows, tab controls, buttons, grid layout, and tons of other goodies. In fact, everything in Phosphorus Five, one way or another, is built around Micro.

In addition, it is extremely easy to skin. It is built around the axiom of CSS variables, which allows you to “inject” your own features into its core, without having to fiddle with what selectors to use for some particular type of element. Check out the code for the Graphite skin here. Which is what Hyper IDE is using. Then realise that by simply exchanging some few CSS variables, I can make the above “graphite” skin look like the following. The skin below is called “Bubble Gum” btw, and doesn’t necessary represent my taste in colours for the record … 😉

You can check out the skin file for “Bubble Gum” here. Yet again, besides the font inclusions for “Roboto”, only a few lines of CSS, and you get the above.

Below you can see the same app using the “serious” skin, which probably is a better fit for most people. You can see the code for “serious” here. Besides from the font import, there are no more than 5 changes required to create a CSS skin resembling the following screenshot.

Notice, these two last screenshots are of the exact same application, only with different skins. Not too bad if you ask me …

I still have some work to do in regards to documentation. The docs over at the main GitHut page is hopelessly outdated for the record. But if you use it in combination with Hyper IDE, the docs are “starting to get there”. Below is a screenshot of one of the doc pages which you can find by opening Hyper IDE and clicking the “?” button in the top right corner.

Below I have a small video, where I demonstrate some of its features.

All in all, not too bad for ~5Kb of CSS 🙂

If you want to reproduce what I did in the video, you can download Phosphorus Five here.

Creating a million Ajax datagrids in 20 minutes – Aphrodite KISS

Most Ajax libraries with respect for themselves have a datagrid component. And therein lies the problem; *A DATAGRID COMPONENT*! It doesn’t matter how flexible and configurable these datagrids are. Regardless of how many parameters you can modify, there is still some minute feature lacking, which you can’t create, and which you’d like to create for some reasons.

Micro is different, since it instead of having a datagrid, features a “generic grid”, which simply allows you to create an HTML table element, from where you can modify every single aspect of it yourself, and extend it, to end up with the exact specific datagrid as you need. This feature of Micro, is as far as I know completely unique to Micro (and Phosphorus Five). It basically allows you to create any HTML/DOM structure you wish, while still having the grid help you put things into the correct “tbody”, “tr”, etc, elements on your page.

In the video below, I am walking through the most important features of the [micro.widgets.grid] extension widget from the latest v3.2 Aphrodite release. First watch the viddi, then scroll down on page to find the code I am using.

First example, statically creating items during creation of grid.

p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
  class:container
  widgets
    container
      class:row air-top
      widgets
        div
          class:col-100
          widgets
            div
              class:bg air-inner shaded rounded
              widgets
                micro.widgets.grid
                  columns
                    Name
                    Email
                    Phone no
                  rows
                    item
                      Name:Thomas Hansen
                      Email:thomas@gaiasoul.com
                      Phone no:12345678
                    item
                      Name:John Doe
                      Email:john@doe.com
                      Phone no:99887766
                    item
                      Name:Johhny Two-Times
                      Email:johhny@two-times.com
                      Phone no:67676767
                    item
                      Name:Jane Doe
                      Email:jane@doe.com
                      Phone no:99118822
                    item
                      Name:Peter Fisher
                      Email:peter@fisher.com
                      Phone no:91919191

Second example, dynamically populating grid after creation.

p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
  class:container
  widgets
    container
      class:row air-top
      widgets
        div
          class:col-80
          widgets
            div
              class:bg air-inner shaded rounded
              widgets
                micro.widgets.grid:my-grid
                  columns
                    Name
                    Email
                    Phone no
        div
          class:col-20
          widgets
            button
              class:fill
              innerValue:Populate grid
              onclick
                micro.widgets.grid.databind:my-grid
                  item
                    Name:Thomas Hansen
                    Email:thomas@gaiasoul.com
                    Phone no:12345678
                  item
                    Name:John Doe
                    Email:john@doe.com
                    Phone no:99887766
                  item
                    Name:Johhny Two-Times
                    Email:johhny@two-times.com
                    Phone no:67676767
                  item
                    Name:Jane Doe
                    Email:jane@doe.com
                    Phone no:99118822
                  item
                    Name:Peter Fisher
                    Email:peter@fisher.com
                    Phone no:91919191

Third example, widgets inside of your cells.

p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
  class:container
  widgets
    container
      class:row air-top
      widgets
        div
          class:col-100
          widgets
            div
              class:bg air-inner shaded rounded
              widgets
                micro.widgets.grid:my-grid
                  columns
                    Name
                    Email
                    Phone no
                  rows
                    item
                      Name:Thomas Hansen
                      Email
                        widgets
                          a
                            href:"mailto:thomas@gaiasoul.com"
                            innerValue:thomas@gaiasoul.com
                      Phone no:12345678
                    item
                      Name:John Doe
                      Email
                        widgets
                          a
                            href:"mailto:john@doe.com"
                            innerValue:john@doe.com
                      Phone no:99887766

Fourth example, widgets inside of your column headers.

p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
  class:container
  widgets
    container
      class:row air-top
      widgets
        div
          class:col-100
          widgets
            div
              class:bg air-inner shaded rounded
              widgets
                micro.widgets.grid:my-grid
                  columns
                    Name
                    Email
                    Phone no
                      widgets
                        a
                          href:#
                          role:button
                          innerValue:Phone no
                          onclick
                            set-widget-property:x:/../*/_event?value
                              innerValue:I was clicked!
                  rows
                    item
                      Name:Thomas Hansen
                      Email:thomas@gaiasoul.com
                      Phone no:12345678
                    item
                      Name:John Doe
                      Email:john@doe.com
                      Phone no:99887766

Fifth example, changing your rows, and/or your actual table as a whole.

p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
  class:container
  widgets
    container
      class:row air-top
      widgets
        div
          class:col-100
          widgets
            div
              class:bg air-inner shaded rounded
              widgets
                micro.widgets.grid:my-grid
                  style:"background-color:rgba(128,128,255,.2);"
                  columns
                    Name
                    Email
                    Phone no
                  rows
                    item
                      .row
                        style:"background-color:rgba(128,255,128,.2);"
                      Name:Thomas Hansen
                      Email:thomas@gaiasoul.com
                      Phone no:12345678
                    item
                      .row
                        role:button
                        onclick
                          create-widgets
                            micro.widgets.modal
                              class:micro-modal
                              widgets
                                h3
                                  innerValue:The second row was clicked
                                p
                                  innerValue:This was a clickable row ...
                      Name:John Doe
                      Email:john@doe.com
                      Phone no:99887766

To test out the above examples, make sure you’re using the latest release of Phosphorus Five, Micro, and System42 – Which is the Aphrodite KISS version 3.2. Then create a lambda page in the CMS, and make sure you set its “template” to “empty” in its settings.

To explain what’s going on, the grid in Micro simply creates an HTML table, and really nothing more – Allowing you to populate its content, in regards to both its attributes, rows, headers and cells in general – By adding whatever widgets/properties/attributes you wish to add inside of these elements.

In fact, by applying the above principle, I don’t think there exists a single “datagrid” on this planet, you couldn’t easily create yourself, and by creating your datagrid as an extension widget, making it reusable, you would end up with extremely “DRY” code.

Hence, the [micro.widgets.grid] instead of being a datagrid, becomes a 100% generic “datagrid framework”, allowing you to easily create your datagrids exactly as you see fit!

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.