# Introducing Design Responsive

**URL:** <https://community.thunkable.com/t/introducing-design-responsive/2119788>\
**Category:** Off Topic\
**Created:** [November 7, 2022, 6:34pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788 "2022-11-07T18:34:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 7, 2022, 6:34pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/1 "2022-11-07T18:34:55Z")

</div>

Hello all!  
Hope ya’ll had a wonderfull day.

Let me introduce to you Design Responsive.  
It’s a Thunkable (DnD sizing) based libary it let’s you create a responsive layout that works accross all devices.

How does it work?

Simple make one layout for diffrent screens and devices.  
Got a bigger screen the elements will be bigger got a smaller screen the elements will be smaller.  
Font size is to big on mobile but too small on desktop?  
Design Responsive fixes this.

Don’t want to make multiple layouts for diffrent screen sizes, use Design Responsive.

Simply add the libary to your project and implement the resize function and everything will look the same on all your devices.

How do i get started?

Well first off all add this script tag to the head of your HTML.

`<script src="https://cdn.jsdelivr.net/gh/lukeplays33/Desing-Responsive@main/DesignResponsive.js" ></script>`

Then call:

```auto
resizeAllElements(getResizedElements());

```

in your JS file.

It’s that simple.

Want to know more?  
Visit this [link](https://lukeplays33.github.io/Design-Responsive/) for the full docs and home page.

Join [our server](https://discord.gg/YdTKedB5wQ)

And as always feel free to leave your feedback or suggestions.

NOTE: This is NOT a Thunkable project it’s a project for HTML,CSS and JS.  
You can use it in a iframe but it’s not recommended.

Cheers.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [November 8, 2022, 8:07pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/2 "2022-11-08T20:07:54Z")

</div>

Sounds useful! Do you have a sample Thunkable project you can share that demonstrates this?

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [November 9, 2022, 4:28am UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/3 "2022-11-09T04:28:24Z")

</div>

great idea, Luke!

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2022, 10:21am UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/4 "2022-11-09T10:21:39Z")

</div>

I’m afraid that’s not possbile thunkable does not support exstenions nor importing libaries and using them.  
Unless the thunkable team would implement this it’s not possible.

Either way since it’s based on DnD if you use the DnD builder you will have the same effect with your width/height automatically.  
(Without the responsive fonts,border-radius margin etc).

Besides the project was made to be used by people outside of thunkable to use it in their JS,CSS and HTML proejcts.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [November 9, 2022, 11:28am UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/5 "2022-11-09T11:28:59Z")

</div>

> [@sketch](#):
>
> Either way since it’s based on DnD if you use the DnD builder you will have the same effect with your width/height automatically.

Thanks for sharing this - looks very interesting.

What do you mean though that it’s “based on DnD”? Do you mean that DnD was the inspiration for your project, or is the project derived from DnD in some way?

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2022, 12:15pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/6 "2022-11-09T12:15:51Z")

</div>

DnD was my inspiration.  
Basicaly the way DnD sizes each element on diffrent screen sizes gave me the idea to make something that resizes every element to fit each screen dimension that exists.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [November 9, 2022, 4:10pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/7 "2022-11-09T16:10:12Z")

</div>

Okay, thanks for explaining. This was misleading as it made it sound like something that works with Thunkable:

> [@sketch](#):
>
> It’s a Thunkable (DnD sizing) based libary it let’s you create a responsive layout that works accross all devices.

But I understand what you meant now.

It might be good to clarify in your original post. I see that you posted it in “Off Topic” which is a clue that I missed. 😉

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2022, 4:11pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/8 "2022-11-09T16:11:22Z")

</div>

Oh haha I’m very sorry i thought i made it clear that it wasn’t in Thunkable 😅  
I’ll edit the post.

You can still load it in an iframe in Thunkable.  
But because it’s calculated different according to the window size and if it’s mobile,desktop or TV it may result in a different layout.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:12pm UTC](https://community.thunkable.com/t/introducing-design-responsive/2119788/9 "2024-11-08T13:12:42Z")

</div>