Are there an open source code for css grid layout, am aware of the existence of frameworks such as bootstrap and masonry,
am wondering if there are any way of getting grid layout without using these frameworks?
Sure there are many just grid frameworks without the overhead of full ui css framework, really just google css grid frameworks
old classic
http://960.gs/
responsive
http://getskeleton.com/
http://www.responsivegridsystem.com/
Sass
http://susy.oddbird.net/
Newer Flexbox based grid frameworks
http://flexboxgrid.com
http://studio51.github.io/gridlecss/
http://fclaussen.github.io/Flexbox-Framework/
Newest is the Css Grid Layout spec, from what I have read all major browser makers are committed to this spec, Chrome Canary has a good working implementation, Firefox is working on it. Webkit is also working on it.
See these resources for Css Grid Layout
Rachael Andrews site
http://gridbyexample.com/
Pollyfill
https://github.com/FremyCompany/css-grid-polyfill
Igalia shows how to enable in different browsers plus other examples
http://igalia.github.io/css-grid-layout/
With the Grid Layout spec you will no longer need a framework to layout a grid, hopefully by 2016 it will be in all major browsers
Also see flexbox based grids above as they seem to be gaining popularity.
But I am really excited about the Css Grid Layout Spec and having grid capabilities built right into the browsers
Related
I recently started using Tailwind CSS and I notice it states (and recommends) to use unprefixed classes for mobile and prefixed classes for larger screens.
This is in contrast to Bootstrap which does the exact opposite.
What are the pros and cons of those mobile-first approach?
Quoting bootstrap 5.0 official documentation here
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Pretty much all the CSS frameworks use that kind of approach nowadays.
It's always easier to have some basic layout for smaller screen resolutions and bigger one adapted w/ some additional styling.
Also, this website is saying that 55.73% of the web traffic is mobile. Even the 41.46% of desktop stats do have some small enough resolutions to fit styling considered as "mobile" (like the 1280x720 one).
TLDR: make your website look good for the biggest amount of users possible with as less styling as possible, then apply specific CSS for wider resolutions.
I don't know any specific cons of starting by a mobile version but maybe the case in which your webapp is targeted towards an admin kind of layout, who will be used 95% of the time on a desktop.
I am currently working on a reactjs web app. I was wondering how do I make it responsive? Whenever I change the size of my browser, all my components get messed up and flow onto each other. How do I stop that from happening in an easy way?
"Responsive Design" is huge part/topic in development. In my opinion its a long term process to learn. The more you build projects, the more you can learn.
But there are lots of UI libraries/frameworks are available to make it easier. And fortunately every of them have a React Version. Here are some of them -
ReactStrap
Semantic UI React
Material UI
Chakra
Tailwind CSS
BaseWeb
If you have time to learn more about responsive design, you can check out the official guidelines from Responsive web design basics.
Some common techniques you can follow -
Try to set width and height of your layout with percentage(%) value or vw & vh.
Use flexbox or grid.
Use css media query and follow the standard breakpoints.
If possible give your component max-width / max-height when necessary.
You can build a BaseLayout component which has max-width: 1920 and wrap other widgets with it. So, in a very big screen your app contains always width of 1920px.
Hope this will helpful.
Responsive is a design technique - No libary or tool will do it for you, because you need to choose which elements get hidden or resized etc. Having said that, a framework such as Bootstrap will make responsive design easier.
But you'll have to look around and learn the ropes - its a different methodology of web design.
I'm designing a new internal web app that has to support IE11 (as well as Chrome and Firefox). I love doing layouts in Grid, but having to figure out how to make any but the simplest work in IE11 can be a pain. Should I use CSS Grid and ms- prefixes, or avoid the headache and just pass on Grid for this one?
In short, it highly depends on how your application looks like. This article describes the problems you might face quite well - and I fully agree with the summary:
If you are using Grid in a very simple way, and positioning items
rather than using auto-placement then the fact that grid exists in
Internet Explorer from version 10 could turn out very useful. You
could certainly use this in order to create a simpler layout for IE10
and up, once Grid is shipped in other browsers.
However be aware that this is going to require some additional testing
and work, you are unlikely to be able to simply rely on Autoprefixer
to run and do the work for you. For example, if you have used auto
placement for any item and then don’t set a position using the -ms
properties, that item is going to stack up with any other unpositioned
items in the first grid cell.
I was talking to someone about Flexbox, and he said Flexbox is a library/light-framework which sounds a bit weird to me and now I'm confused.
Is it a framework or not?
Flexbox is just pure CSS, not a framework
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents
Flexbox is a commonly used term that refers to the CSS Flexible Box Layout, which is a CSS technology. It is just plain CSS.
Of course, in the same way jQuery is derived from JavaScript, there are various frameworks that have been derived from flexbox (e.g., Angular, React Native, Bulma, Flexbox Grid, Basis, etc.)
I don't think so. According to wikipedia, a framework is software used to alleviate a lot of the work associated with web development (source). I would not consider flex a framework simply because it is default/native/included browser behavior. No external software is needed to use flex in your website.
I don't think there is one definition for what a framework is, but I have never considered default html/css behavior to be a framework. To me, a framework is code that I have to install or download to be able to use in my website.
CSS3 (unlike its predecessors) is a collection of specifications.
CSS Flexible Box Layout (or Flexbox) is one of these CSS specifications.
Others include:
CSS Color Level 3
CSS Selectors Level 3
CSS Media Queries
CSS Multi-column Layout
CSS Shapes Level 1
CSS Grid Layout Level 1
CSS Writing Modes Level 3
and so on.
For the entire range of CSS Specs currently completed or in development, see:
Descriptions of all CSS specifications
CSS Current Work (summary)
I am familiar with the popular 960 Grid System setup and it's been very helpful - but I am looking for other popular/heavily-adopted solutions with the following abilities:
Larger base resolution (1280px rather than 1024px)?
Makes use of HTML5 semantic layout tags: ASIDE, NAV, etc.
Clean CSS: few "tricks/quirks" as possible... CSS3 would be a bonus.
Thank you.
Twitter Bootstrap features a grid system as well. It is kind of based on the 960 one but you can also modify it to roll your own. And it has a bunch of other shiny features (including HTML 5 and CSS 3).
Not sure if many people are still using the 960px layout since many people are into responsive design now. Check out html5boilerplate, tutorial from tutsplus(html5/css3 starter), cssgrid, fluid base grid(targets any resolution). Not sure if those helped but should give you an idea. I would go with fluid or used one of these as a boilerplate for new projects.