Walking through creating a page in 

I tested the responsive for the home page of barterbay.ca using Framer. You can see my prototype here (intended to be viewed on a laptop/desktop computer), and resize the window to test its responsiveness.

Import design elements

First, I created each design element for the home page in Sketch. They are all wireframes at this point, because I wanted to test the behaviours, not the content. For repeating elements such as the category buttons and the items, I just created one of them, and duplicated them in the code in Framer. These are all my design elements imported into Framer:

Select “Canvas” for the prototype

Framer has different sizes for different types of devices. Always go for “Canvas” for responsive .

Change default cursor and hide hints

Next, the default cursor for Framer is a transparent circle, to emulate mobile interactions. I needed to change that into a normal cursor for web interactions. I also hid interaction hints to make it a more seamless experience.

# Function change cursor
Cursor = (style) ->
document.body.style.cursor = style
# Set the cursor to normal
Cursor(“auto”)
Framer.Extras.Hints.disable()

Declare variables for screen sizes and other elements

At this point, you need to have determined how many breakpoints you want, and the screen widths for the breakpoints. I put these as variables, so that later on, it will be easy to change the breakpoints just by playing with these numbers. Also, I store measurements from the design elements into variables — these will be used for mathematical calculations later. Not all of these measurements need to be stored and prepared right from the start. If you miss something out, you can always come back here later and declare more variables.

#-------------------- set up variables -----------------------------
widthSmall = 992
widthMedium = 1200
widthMax = 2322
catMinPadding = 20
itemSmallOriginalWidth = item_small.width
itemMediumOriginalWidth = item_medium.width
itemLargeOriginalWidth = item_large.width
bannerOriginalWidth = banner_image.width
bannerOriginalHeight = banner_image.height
#1 = small, 2 = medium, 3 = large 4 = max
screenType = 0

Create a page component and add all elements

Next, I create a page as a parent to hold all other components. I’ll create a scrollComponent for the whole page later on.

#----------------put everything into a page-------------------------
browsePage = new Layer
backgroundColor: null
height: 3000

Next, remember that I mentioned that I’ll create duplicates of my design elements? This is where I do it. First, I create a layer for the element, for example, a layer to hold the category buttons. I specify the page as this layer’s parent. Next, I then specify the layer to be the parent of the category button that I imported. Finally, I duplicate the category. I do the same for the items. Essentially, I am building a hierarchy that looks something like this —

#create all the categories
categoryBar = new Layer
backgroundColor: null
parent: browsePage
category1.parent = categoryBar
for index in [2..12]
category = category1.copy()
category.parent = categoryBar

Create a scrollComponent

Even though the positioning of my elements is not done yet (They’re just kind of floating around right now), I want to make my page scrollable, but only vertically. This is why everything was parented to my page — so that I just need to specify that the page is scrollable.

#---------------create Scroll Component for page--------------------
scrollBrowse = new ScrollComponent
scrollHorizontal: false
mouseWheelEnabled: true
browsePage.parent = scrollBrowse.content

Recalculating the screen size

I need to tell Framer to do things. In this instance, I want things to happen when I resize the screen, i.e. calculate the positions of all my elements. I want to do this on startup too, and that is why I run my recalculateScreen() function first. Note that due to how Framer code is parsed line by line, these two lines of code have to come right at the end of the code.

#-------------------------- RUN ----------------------------------#
recalculateScreen()
Screen.onResize ->
recalculateScreen()

Here’s my recalculateScreen function, i.e. the steps to calculate the layout of each element. Each one of these is a function that I’ve written.

#function that runs to recalculate all elements
recalculateScreen = ->
selectScreenType()
drawBanner()
drawCategories()
drawFilters()
drawItems()
resizePageWrap()

I specify the screen size in numbers so that it will be easy to use them as cases in a switch statement.

#function to select screen size type
selectScreenType = ->
if Screen.width <= widthSmall
screenType = 1
else if Screen.width <= widthMedium && Screen.width > widthSmall
screenType = 2
else if Screen.width <= widthMax && Screen.width > widthMedium
screenType = 3
else
screenType = 4

For example, specifying the size of the banner depending on the screen size:

#draw banner
drawBanner = ->
banner.x = 0
banner.width = Screen.width
switch screenType
when 1
banner.height = 260
when 2
banner.height = 260
when 3
banner.height = 350
when 4
banner.height = 350
banner.width = widthMax
banner.x = (Screen.width - widthMax) / 2
banner_image.width = banner.width
banner_image.height = banner.height

I continue to use switch statements to position the elements according to the screen size — for the categories, filters and items.

Finally, there is a step that is easily missed, but very important. You will need to resize the page component and scroll component to the new size of the window, or things will not work right. This is the code to do that:

resizePageWrap = ->
browsePage.width = Screen.width
scrollBrowse.width = Screen.width
scrollBrowse.height = Screen.height



Source link https://blog..io/-responsive-web-layout-using-framer-1822c4c2b441?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here