Ascension is responsive from the start, adapting perfectly to any screen size. That's mostly because of a well thought out grid system.

Every element in Ascension is built in such a way that it adapts nicely to screen width changes. That means your landing page will look great no matter what device you're seeing it on.

Responsive grid system.

It all starts with the grid system. Because this is used for the majority of layouts, it's really important that it adapts accordingly to screen size. The grid classes are generated based on 4 breakpoints. These are width values that trigger layout changes. Here are the 4 default breakpoints:

						                
						                    $breakpoints: (
						                        'sm': 0,
						                        'md': 768px,
						                        'lg': 1280px,
						                        'xlg': 1920px    
						                    );
						                
						            

You will encounter these in the grid class names, like for example: sm-12 xlg-4. This basically means that an element with these two classes will span on 12 columns on small screens and above and will span on 4 columns on extra large screen and above (1920px and higher). You can create any combination and precisely control how big or small an element will be on different screen widths.

Making an element responsive is simply a matter of telling it how to behave in different screen widths. That's possible thanks to CSS media queries. A media query looks something like this:

						                
						                    .well {
						                        padding: 2rem;
						                        text-align: center;
						                        width: 100%;
						                        border-radius: 5px;
						                    }
						
						                    @media only screen and (min-width: 768px) {
						                        .well {
						                            padding: 4rem;
						                            text-align: left;
						                        }
						                    }
						                
						            

The example above basically tells the browser that by default, elements with the class of .well have a 2rem padding, text in the center and two other styles. However, when the minimum screen width is 768px, that same element will have a 4rem padding and left aligned text.

Now, because Ascension is built on Sass, it's using mixins to create media queries in a more efficient way.

						                
						                    .well {
						                        padding: 2rem;
						                        text-align: center;
						                        width: 100%;
						                        
						                        @include mq('md') {
						                            padding: 4rem;
						                            text-align: left;
						                        }
						                    }
						                
						            

The mq() mixin accepts a breakpoint name (from the ones you saw previously) and it automatically generates the required media query.

When making a page responsive there are 2 helper classes that will prove to be very useful: .hide- and .show-. These are followed by the name of the breakpoint and they basically allow you to selectly hide or show an element on specific breakpoint. Here's an example:

						                
						                    <nav class="cell shrink menu hide-sm show-lg" data-internal-nav>
						                        <ul>
						                            <li><a href="#features-v1">Features v1</a></li>
						                            <li><a href="#features-v2">Features v2</a></li>
						                            <li><a href="#testimonials-v1">Testimonials v1</a></li>
						                        </ul>                
						                    </nav>
						                
						            

The menu above will be hidden on small screens and above and be visible on large screens and above. What you need to understand and this is very important is that using the class of hide or show will apply the styling on that breakpoint and higher.