1 files changed, 29 insertions, 0 deletions
diff --git a/files/th/archive/apps/design/ui_layout_basics/index.html b/files/th/archive/apps/design/ui_layout_basics/index.html
new file mode 100644
index 0000000000..e9b9d4c5a4
--- /dev/null
+++ b/files/th/archive/apps/design/ui_layout_basics/index.html
@@ -0,0 +1,29 @@
+---
+title: UI layout basics
+slug: Archive/Apps/Design/UI_layout_basics
+tags:
+  - Design
+  - Layouts
+  - NeedsTranslation
+  - TopicStub
+  - UI
+translation_of: Archive/Apps/Design/UI_layout_basics
+---
+<div class="summary">
+<p>Guides and theory behind implementing effective layouts for Open Web Apps.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/responsive_design_building_blocks">The building blocks of responsive design</a></dt>
+ <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design">Responsive design versus adaptive design</a></dt>
+ <dd>Demystifying the terms "responsive" and "adaptive", and how they relate.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Mobile_First">Mobile first</a></dt>
+ <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt>
+ <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_Navigation_Patterns">Responsive navigation patterns</a></dt>
+ <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd>
+ <dt><a href="/en-US/Web/Guide/CSS/Flexible_boxes">Flexible boxes</a></dt>
+ <dd>Flexbox is a very useful CSS feature for flexible, responsive layouts.</dd>
+</dl>