SHAPING IDEAS INTO

GREAT SOFTWARE PRODUCTS

SASS - Responsive
Design

Jaime Bernales
Javier Vargas
Index
1. Introduction to Responsive Design / Responsive vs Adaptive
- Browsers and Media Queries (HTML5 Tags / Respond.js)

2. Components & SASS

- Frameworks CSS and SASS + Project SASS (working together or separate)

3. Defining Media Queries

- Maps and defining resolution

4. Global @include file

- Ordering Include files

5. Indexing a SASS file

- Utils / helpers
- Transitions, Shadows, Keys and Main CSS3 Features
1.Responsive Design
Responsive vs Adaptive
Responsive is fluid and adapts to the size of the screen no matter what the target device.
Responsive uses CSS media queries to change styles based on the target device such as display
type, width, height etc., and only one of these is necessary for the site to adapt to different
screens.

Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t
respond once they’re initially loaded. Adaptive works to detect the screen size and load the
appropriate layout for it – generally you would design an adaptive site for six common screen:

● 320
● 480
● 760
● 960
● 1200
● 1600
The latter in particular has created a lot of discussion over the past few years as it’s been the
case that many sites deliver the full desktop model which, even if it’s not loading on the mobile
device, slows sites down considerably. To get around this, you can use media queries–but there
will be a few tradeoffs since a responsive site is never going to be as quick as a dedicated
mobile site.

Responsive doesn’t offer as much control as adaptive, but takes much less work to both build
and maintain. Responsive layouts are also fluid and whilst adaptive can and does use
percentages to give a more fluid feel when scaling, and avoid horizontal scroll in not defined
resolutions.

Speed vs. Maintenance

Browsers and Media Queries
HTML5 / Respond JS
RespondJS

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to
enable responsive web designs in browsers that don't support CSS3 Media Queries

This script's focus is purposely very narrow: only min-width and max-width media queries and
all media types (screen, print, etc) are translated to non-supporting browsers.

Visit CDN
2.Components and SASS
Frameworks - Angular-ui-bootstrap - Angular-material
Bootstrap 4 scss folder contains separate mixins, utils and
components for this framework.

dist contains final css and js files

Angular-ui-bootstrap Angular Material
Working with this Angular feature npm is required, npm install angular-material
for then run:

Component that contains all ripples and

material components.

npm install angular-ui-bootstrap Angular material grid system

Once the component get installed, you will be able

to locate angular-ui-bootstrap folder under:

(angular-ui-bootstrap JS must be invoked after

JQuery and Angular dependencies)
Components
Grid System:
bootstrap.min.css
Basic Bootstrap (v3/v4) bootstrap.min.js
Fonts

Grid System / Angularized components

Angular-ui-bootsrap Invoke JS

Material Design:
Angular Material Invoke JS / SASS

Material Design:
Materialize CSS Invoke JS / SASS
Fonts
Working together
Everything is up to the project and their needs, but it’s clear that different components can work
fine together, for instance:

Project needs 12 column grid (Bootstrap / Foundation - Angular-material)

Project needs Material Design (Angular-material / MaterializeCSS)
3.Defining Media Queries
Maps and defining resolutions
Bootstrap 4 & SASS
Bootstrap 4 defines media queries breakdowns under SASS lines (.scss files). If you aren’t using V4
of Bootstrap, You will need to define breakdowns in a separate way. Check V4 documentation

bootstrap.scss
Bootstrap 4 defines media queries breakdowns under SCSS lines

_variables.scss
Defining breakdown resolutions
We’ll set breakdown resolutions in a new .scss file, based on our current framework: Bootstrap 4
or Bootstrap 3. Also you will need to define media screens (all, screen, print). If you work with V4
of Bootstrap you’ll be able to import bootstrap.scss directly in your global file.
global.scss
On this way you are reducing server calls,
invoking just one css file that contains
bootstrap and your custom styles.
Defining Media Queries
responsive.scss
4.Global @include file
Ordering include files
One by one (responsive)
When you’re part of a medium/big size team of devs a common
scenario is get more than one dev working in the same file. For this
reason we want to divide styles/responsive styles on many parts as
possible in order to get a fluid work.

This feature will depend on the structure project. Let’s work on the
following project structure:
Structure 1
Structure 2
Structure 2 - option b
5.Indexing a SASS File
Utils and helpers
Indexing
Creating a commented index in your .scss global file will provide you
an easy way to sort your components, and prioritize the overlapping

General styles, they are composed by libraries,

common and shared components, and finally by
app modules or views. Any kind of utils / mixins
should be invoke after libraries and before
components and responsive.

Responsive styles, they are composed by different

resolutions breakdowns, starting from smaller
resolutions (XS) to the biggest (XL).
Indexing
Shared components, they could be handled
in two files (1 general + 1 responsive). In
order to avoid too much files working, this is
up to the development team.
HTML Import
.min.css
Compress libraries, utils, custom styles and responsive in just one css file it’s a really
good practice to apply in production. Now, at the moment to work with it you won’t
have sweet access to the css lines using the web browser tool.
Mixins
Utils
SCSS Hierarchy
Keep @include sentence at top of
attributes in order to make them
easy to handle.

Collapse/Expand and comment

sections headers in your files
(indexing).
Thanks