Skip to main content

Simplifying Life with CSS Frameworks

Simplifying Life with CSS Frameworks

Responsive Design, Mobile First, Material Design, UX, IxD... 

You can choke on technology. It's coming fast and furiously. The biggest challenge of the 21st century may be how to simplify life. How to do one thing at a time when you have five LCD screens blinking at you all the time each with multiple notifications, announcements, ticker tapes, breaking news and all the rest of it.

I can't solve all your life's problems but can share a little trick or two here and there. If you gather all these tricks, you could actually simplify life. 

Mobile First

 This is a recent approach to website design. In Kenya 97% of web users use their mobiles.  Few have computers, many have smartphones. Therefore, why make websites for computers when these are the minority? Why not make them for mobile first and adjust to fit the few who visit with computers.

The chart below shows the data from Google Barometer for Kenya:

Mobile access is at 97% compared to 17% for computers. 

One of the ways to handle this task of creating web pages for everyone is to use CSS (Cascading Style Sheets) frameworks or libraries. If you ask web developers what are the best CSS frameworks, you are likely to get a list such as the following:
  •     Bootstrap
  •     Materialize CSS
  •     Foundation
  •     Semantic UI
  •     UIKIT  
 For the gurus, these are probably fine. But for the one trying to do a page here and there or learning CSS and web design for the first time, I recommend W3.CSS. Its a beautiful new CSS Framework that can solve a web developer's nightmares with some elegant tricks. I will cite one example of such a nightmare I faced this very week.

The site was a placeholder page for a new savings cooperative called Mhadhiri.  The nightmare was that the logo on the home page displayed well in a PC screen but overflowed a smartphone screen. If you look for solutions online, you will see discussions about the CSS @media directive. The idea is to tell the browser:
  1. For devices with small screens, display the logo using this size
  2. For devices with medium screens, use this other size
  3. For devices with large screens, use the full size logo etc.

The logo was inserted using a standard <img > tag. Some of the traditional responsive code looks like this (click to enlarge):

 
But it did not work. The mobile still displayed a huge logo while the computer displayed a logo that was acceptable. What to do?

It turns out that W3.CSS has (simple)  tools to  handle this kind of thing. You can specify whether to display or not display some content depending on the screen size of the device used to access the web site. Examples (actually used in Mhadhiri):



 class="w3-hide-medium" applies a directive that means "do not show this item in medium-sized devices". What constitutes medium is defined by break points which are the screen sizes in pixels that define the boundaries as you move from one size to another. Google's Material Design recommends the following break points: 480, 600, 840, 960, 1280, 1440, and 1600dp. A dp (device-independent pixel) is related to a pixel though they are not identical.

In the code above, the logo file is called "Mhadhiri SACCO.jpg". In the first segment, the W3.CSS class directive says: w3-hide-large w3-hide-medium. There are only three categories: small, medium and large. It means this logo, set to display with a width of 320px, will not display in a medium and large screen but will display in a small screen.

The second segment of code will display the logo at 450px only in a medium screen while the last will display only in a large screen at 1000px. W3.CSS uses the break points 0 - 600 for small, 601 - 991 for medium  and 992+ for large.

In summary, the Mobile First web design philosophy takes the view that it is better to design for mobile access first then adjust for PC access simply because the majority of web users now access the web principally via mobile. In designing for such a scenario, responsive designs become mandatory. CSS frameworks provide a way to implement responsiveness without getting into complex code. It is analogous to the debate of declarative versus procedural programming that programming theorists sometimes engage in. The truth is that few want to get into complex code if a few libraries and APIs offer an easier, quicker and more elegant way to do the job. In conclusion, after messing around with CSS for quite some time, it did not work. But a couple of W.CSS directives did the job in less than a minute. The moral of the story: Simplify your life. John the Baptist had only one suit. He never ate a cooked meal. Yet he ushered in the Messiah. Simplify. 

And finally, I must tell you that this same John the Baptist, this same Elijah, is here crying again in the wilderness: The Messiah is coming! Prepare the way.  

Be most blessed today.



Comments

Popular posts from this blog

How to Install RIOT Plugin for GIMP

How to Install RIOT Plugin for GIMP:: Since this article was first written a stand-alone version of RIOT has been made available Download the plugin from  http://luci.criosweb.ro/riot/download/Select the download link titled "RIOT as plug-in for other applications"   Launch the Riot-plugin.exe file by double clicking.The installer installs all the files including Riot.exe, Riot.dll, and FreeImage.dll in the location where you installed GIMP  If GIMP is open, close it and re-launch it.To optimise an image, open it then save with menu File-&gt;Save for web with RIOT  You can set the target file size by selecting "Compress to size" button  on bottom right corner of optimised image pane and providing the size in kilobytes. Alternatively you can use a slider provided to allow you to change the quality while showing you a preview of the resulting image.


Enjoy.

How to Install Packet Tracer 6.0.1 for Linux

This article is intended to help me remember the installation process for Cisco Packet Tracer 6 details of which seems to be hard to come by on the web.

1. Log in in to your Cisco Netspace account. Yes, you need to be logged in.
2. The "Download PT 6.0.1" link on is on the NetSpace home page.
3. Click this "Cisco Packet Tracer" link shown below the folder icon as shown in the figure below:

4. Select Cisco Packet Tracer 6.0.1
5. Select download location.
6. After completion of download, use your file manager to open that folder and rename the file to something such as "CPT6". It is a shell script so no file extension is required.
7. Change the file permissions to executable using command: sudo chmod 777 CPT6from a terminal window opened in the download directory. This assumes your downloaded file is renamed CPT6
8. Launch the file with command: ./CPT6 from the terminal window. You will get the message:

Self extracting archive...

Welcome to Packet Tracer 6.0…

Connecting USB 3G Modem to Safaricom in Linux Mint

This particular modem is a ZTE HSUPA MF637U modem. Click on images to see enlarged view. Let's get started:
OS is Linux Mint version 15. Yours may be older or newer.Plug in the modem to a free USB port and check that it recognises the modem as a drive in the File Manager whose icon is shown below third from left and the File Manager view is also shown with the modem listed as the "MODEM-SDSK" drive: Fig. 1. Linux Mint Desktop Panel

Fig 2. Linux Mint File Manager view showing listed drives at left and Application Manu at top. Click on image to see enlarged view.















3. Go to the Applications Menu shown in Fig. 2 and select Settings>Network Connections


Fig. 3. Network Connections dialogue. Click on image to see enlarged view.










4.  Select Add > Mobile Broadband then click  "Create"
5. Follow the wizard to select the device, country, billing plan, service provider and deafult settings.

Fig. 4. Safaricom default settings in Linux Mint. Click on image to see enlar…