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
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
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
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
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
and give it a shot I
think you will enjoy this framework.
to see this project go to
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
future to a new project there.