Skip to content
Views Tools docs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Animations refactor: replace slack link with github issues Apr 24, 2019
Blocks feat: document List pass prop Apr 29, 2019
CompositionModel refactor: replace slack link with github issues Apr 24, 2019
Conventions refactor: replace slack link with github issues Apr 24, 2019
Logic refactor: clarify how logic files work and that you shouldn't touch .… Apr 24, 2019
Properties refactor: replace slack link with github issues Apr 24, 2019
ReactComponents refactor: replace slack link with github issues Apr 24, 2019
Scopes refactor: replace slack link with github issues Apr 24, 2019
SyntaxHighlighting feat: link to lsp for vscode May 3, 2019
UseViews refactor: replace slack link with github issues Apr 24, 2019
WhyNotViews refactor: replace slack link with github issues Apr 24, 2019
images adding css tricks Jan 26, 2019
.gitignore first commit Jun 9, 2017
DevEnvironmentSetup.md
KnownCSSTricks.md Update KnownCSSTricks.md Jan 26, 2019
README.md refactor: clarify how logic files work and that you shouldn't touch .… Apr 24, 2019
automated-ui-testing.js fix: pass file to automated tests Nov 12, 2017
map-fonts.js

README.md

Views

An effective framework for creating production quality interfaces

Views is an intuitive language to define and build complex user interfaces. Views syntax is clean, intuitive, and functional. Here's a sample:

Text
  color deepskyblue
  text Hello. Don't be a stranger!

There are no divs, classes or ids. We use styled blocks to compose interfaces. Blocks make the composition easy to understand even for non-technical professionals.

Views lets you build web, iOS, Android and Desktop applications from the same codebase by morphing to React and React Native in JavaScript. It doesn't add a runtime overhead to your application.

Views language and its morphers are open source. You can contribute here.

We're also working on a toolset to enhance the design and development process even more. It is currently in closed beta and we're expecting to release the public beta by Q3 2018. Email us at hi@views.tools and we'll let you know when its ready.

Here is a quick (2:44s) overview

Join conversations:

How can you benefit from it?

Views make teams productive. Designers contribute directly to the production build.
Views improve build quality. Designers can tweak styling without wasting dev time.
Views compile to React and React Native. No manual work is required in the compilation process.
Views come with a creative toolset. For designers who prefer tweak over building from scratch.

You can speed up your development.
Perform faster revision loops.
Test innovative ideas.
Reduce the cost of design iterations.

Who is using it successfully?

  • A strategic partner to deliver their core application to their 50 million users in the USA. Web app.
  • Views toolset. Electron Desktop app.
  • 2BFIT. Mobile native app AppStore GooglePlay
  • Classuite. Mobile native app. AppStore GooglePlay

Table of Contents

  1. Use Views in your project
    Open source (code driven)
    Using Views Tools (code and WYSIWYG editor for designers)
  2. Compose Views
    Atomic Design pattern
    Containers and content blocks
  3. Examples of basic blocks
    Text, Image, Captures, Svgs
    Button, List of cards
  4. Use properties to style blocks
    Internal (CSS)
    External (slots)
  5. Use scope properties
    Control states of blocks
    Control when blocks are rendered
  6. Animate scopes
  7. Custom logic
  8. Integrate React components Google Map example
    Loaders example
  9. Useful Conventions
  10. Why not Views?

Views is a knowledge transfer platform!

The value of cross-functional teams is very well known to Growth Hacking community and it's explained well in this book Hacking Growth: Fastest Growing Companies Breakout

Cover of the mentioned book

Views helps build fast experiments that can be expanded to fully featured products and don't end up thrown away after testing, like it's in a case of prototypes.

Every team that introduced non-technical members using Views on an early stage of product development noticed massive spikes in productivity, motivation, and cross-domain knowledge transfer.

We learn the best from each other and on the job

Because Views syntax, composition, state and logic concepts are much easier to grasp than in a typical HTML, CSS, JS stack, non-technical team members have fewer barriers to start writing code.

We think that the code we write should be beautiful, meaningful, and simple

As a collaboration platform Views removes silos and brings down the walls between development and the rest of the organisation.

We cherish openness, learning, and frequent shipping

😍 How can I help?

We're thrilled you want to help us make better UIs together 😀. Guidelines on contributions to the Morphers

Thank you to our main contributors ⊃━☆゚. * ・ 。゚

Amy https://github.com/amymc
Larrisa https://github.com/callogerasl
Dario https://github.com/dariocravero
Tom https://github.com/tomatuxtemple

All Morpher contributors
All Docs contributors

License BSD-3-Clause.
Copyright 2017 by UXtemple Ltd.

You can’t perform that action at this time.