CSS has been amazingly fruitful in last decade due to its simplicity, and often in spite of its quirks and the browser implementations. The evolution from document-based content with straightforward organizing and design necessities have advanced to the point where the web has a good claim to being the most pervasive app platform available.
CSS allows to present content on a large number of devices in a simplistic way but contains many characteristic restrictions which a web designer has to be aware of when designing and implementing an application or website while ensuring a solid experience across various browsers and device versions.
Ever attempted to center content in CSS? There are plenty of astounding strategies and techniques, for example, flexbox, table display, inline-block, transforms & so on. In any case, why are they so hard to acquire centering? The appropriate answer is cyclic dependencies that normally emerge in relative format rationale and arithmetic. That implies if you have three boxes and each box relies on upon the width of the past one you end up in a never-ending loop. This is the reason you still have media queries that only respond to the screen size.
As a solution to this Grid Style Sheet (GSS) follows the Cassowary Layout Algorithm. An interesting thing about Cassowary layout algorithm is the ways that it can really resolve these cyclic dependencies which normally occur regardless of the pro-active efforts made to avoid them. A cassowary can also remove the requirement for a deep understanding of parent/child relationships among DOM nodes. This implies genuine source order independence plus the ability to detect the relation of one element to another in a specific design.
Grid Layout is a two-dimensional grid-based layout system that plans to completely change the way you design UIs. CSS has always been used to design a layout your web pages. In CSS you have to use tables, floats, positioning and inline-block to develop a website, but all of these techniques were basically hacks and missed out on important functionality such as vertical centering.
Grid is the main CSS module made particularly to tackle the design issues you’ve all been facing. With Grid Style Sheets (GSS), you can reinterpret CSS Layout & it replaces the browser’s layout engine with one that use the Cassowary Constraint Solver — a similar algorithm Apple uses to compute native layout.
A Grid imposes constraints on a layout, which lessens the endless number of potential outcomes to a manageable few. In developing a grid you make decisions about where content will and won’t be located. The grid through organizing a massive content into equally distributed columns and rows makes a compact arrangement with its own visual rhythm.
Such consistent guidance permits users to easily follow the layout, develop familiarity with a project and rapidly absorb the information; in addition it also facilitates the content successive updates when there arises a specific place to replenish the content.
How to Install GSS
For installing GSS you need to add the following line of code into HTML file to add the GSS engine script:
<!– GSS engine script –>
<script src=”gss.js”></script>
Next you’ll need to add the following code under the GSS reference script the line that you just added above code to pass GSS the document object.
<!– Giving GSS the document object –>
<script type=”text/javascript”>
window.engine = new GSS(document);
</script>
For vertically centering element, you need to create a div and enclose some text in span tag in the GSS layout and add this to the HTML:
<div id=”center-box”>
<span>Hello from GSS</span>
</div>
After adding some basic styling, you can get into adding some GSS to create the layout. The #center-box element inside the viewport, despite its size, and be able to keep the same alignment in place even if the size of the element changes.
Here are the constraints that will apply to achieve this goal:
- Use the ::window selector to center the element with the visible part of the page in the browser.
- Use ::[intrinsic-height] attribute to get a relative value of the height of the element which will be used to determine the relative width.
First, you need to add a <style> block to the HTML with the type attribute set to text/gss:
<styletype=”text/gss”>
</style>
A <style> block is necessary to define the GSS. Because by adding the following code inside the <style> tags you can position the element in the center of the screen:
<styletype=”text/gss”>
#center-box {
center: ==::window[center];
height: ==::[intrinsic-height];
width: ==150;
}
</style>
What’s more, that is all that you required. The element is now centered with dynamic height vertically using GSS.
Constraint programming is a characteristic fit for declarative languages such as CSS. GSS basically takes CSS layout and rebuilds it with a new paradigm constraint where web designers can focus on declaring the “what” in a program and rely on a mathematical solver to figure out “how.”
CSS grids are pretty good layouts that have decent characteristics like authoring simplicity, maintainability, separation of content and layout – qualities that play important role with responsive design. Front end development is become richer day by day with several technologies like Angular, HTML5, SASS, LESS and much more
