Responsive designs metas and tailwind

Today I picked up a  small responsive adaption for a program in GitHub,  this normally wouldn’t be a problem after all , but today I ended up jumping into a new framework- frankly this is  the reason I decided to  jump into this project.

You see  responsive grids and frameworks aren’t new they make our life easy and they are mostly a tool, that works for everyone, of course most of us work with our own frameworks -I used to have one I called Tetris by the name of the blocks, however nowadays  there is  several  frameworks that can fill your  niche and needs,

I am mostly familiar with  bootstrap and Zurb Foundation  but today I got into  a small tailwind  program.

Tailwind is a  framework for CSS same  as bootstrap and Zurb.  The reality of it is I never heard of it so in the  spirit of  figuring out  how to fix  the issues I began reading about it.

In reality there were not only issues with  grid but some other more mundane issues and others that I’m struggling and I find a bit beyond me without consent of the developer. ( and lack of knowledge of Vue)

so, lets go over what  is the main issue
When using responsive design, you need to tell the  browser  what you are doing,  and be prepared for it. Otherwise it assumes a standard size and non  responsive  design   so how do we tell it?

META TAGS OF COURSE!  This  usually goes on top of the  html file  , by default most “templates” give you one utf-8 (we are English speaking after all) but in order to  enable  responsive we need

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Now lets analyze what this tag is telling you
viewport, the  viewport is the size of your screen,
width=device-width this is setting the device width to your device screen size(whatever it may be)
initial-scale=1.0 this is to override any user scale functionality that  has been set up , please remember this can be ignored and  overridden

this is mostly to activate responsive,  the first issue of the program for more  details please visit w3 https://www.w3schools.com/css/css_rwd_viewport.asp

Now the next objective was   as I moved I noticed the   grids were not moving accordingly  this is an strange case where we need to   think the  flex  grid ma not  fully meet our needs what do I mean by that  Ill  go to my  Tetris example this would show you  how theoretically how the grid would work   that  is just standard issue and not modified for proper usage

<grid1>

Now let’s look at what I can do with tailwind, when using  tailwind,  I am able to create solutions like what a  custom solution would look like  depending viewports  we have  4 possible  viewports

  • 640px sm
  • 768px md
  • 1024px lg
  • 1280px xl

  Adding the abbreviation after the view ports example
xl:w-1/2
would  tell at 1280 use    width of  ½  grid
and at lg:w-1/3
we tell the system to use 1080 a   1/3rd   grid size this allows us to do   things like  this without custom work

However, in the program I’m using this capability for 2 uses,
1) the headers are being used    at size  w16  until we enter  a medium  viewport.
 then we change width to that of  w-full(  think  100%; if you are familiar with  that)

2) I’m using this also to manipulate the justify  flex aspects  to be able to move the orientation from center to   left.  So, the documents are seen using flex,  to center when we are on one  viewport   to another

3) control margins depending the viewport to have appropriate spacing.


you can see what I’m doing here

lg  viewport


sm  viewport

I’m impressed sincerely what I could do with tailwind in this small foray into it I don’t think it will replace bootstrap but some of the ideas  found here are really impressive and do save on work, perhaps  can be adapted to larger  frameworks and this males me  exited for the  future of  frameworks that will  help and   solve  tons of issues  that come from   custom work  meshing with  frameworks.

It has some downsides,  but you must know the html well to understand to an extent what they try to do- their tags  and class names aren’t exactly  pickup and go  being just abbreviations of what they contain but this can be fixed  if you know the language.

This seems made for advanced  devs to an extent syntax is friendly for them, but not exactly self-explanatory to newcomers with basic knowledge. So, a  framework for me  that’s nice.

For further  information on tailwind you can visit

https://tailwindcss.com/

 and give it a shot I think you will enjoy this framework.

to see this project go to

https://github.com/cagomezr/bjcp-ui

Quick asides of what I learned also about this project, I like Vue as a framework, I didn’t expect it to show up  here, and I did some quick bug  fixings, it was a quick fix that was mostly for me to work properly  and quite simple but it showed me  Vue is  JavaScript and I shouldn’t  be scared of it yet. I’m not sure but I see a future to  a new project there.

Who knows.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s