untitled-framework.md

Untitled frontend framework

Goals in mind

• Emphasis on static sites and simplicity
• Catered to newer frontend developers, with aspirations of being a useful tool to the broader frontend community as well
• Remove the implied necessity of js in frontend development

---

Base project structure

app/
 components/
   Table.untitled
   Box/
    Box.html
    Box.css
    Box.js
  document/
    Head.html
    Body.html
    Body.css

Usage

As a user of untitled, there are two major usage patterns that you can follow. While mixing the patterns at a project-level is possible and encouraged, mixing the two at a component-level can introduce unexpected behavior and can confuse the clarity of your project.

Both patterns provide identical functionality and exist to help split html, js, and css either within component files or between a component directory.

Pattern 1: File-level separations

In the base project structure section above, the Box/ directory is an example of the file-level separations pattern.

Each component can be composed of an html, css, and js file which will be bundled and scoped to that component, which is named by the directory they are in.

Pattern 2: Component API

In the base project structure section above, the Table.untitled is an example of the Component API pattern.

When using the component API, be sure to use the .untitled file extension so that untitled can build your component correctly.

css()

Each component file can contain component-scoped styles by using the css helper.

ExampleComponent.html

css(
  .class {
    background: blue;
  }
  #id {
    font-size: 2rem;
  }
)

js()

Each component file can contain component-scoped JavaScript by using the js helper

ExampleComponent.html

js(
 document.getElementnById(‘example-id’);
);

html()

Each component file can contain html that will automatically be available as an html-like element in other components, or document/

ExampleComponent.html

html(
 <div class=“box”>
  <p id=“title”>Hello, World!</p>
 </div>
)

Current functionality

• split head and body into separate files, build into single index.html
• Scan components/ directory for list of components
• Scan components/ directory for css and build into single styles.css
• ‘Minify’ css by default
• CLI option for minify-css
• Scan Body component for list of components used
  • For each custom component used, scan components directory and find component
  • If no components are used in found component, insert html into body
  • Else, recurse, until only html is returned and then insert html into body
  • Keep track of inspected components to avoid cyclical import
    • Enforce unique component names
• Investigate component-scoped styles
  • Since components are unique, that’s a promising way to do it
• Scan components directory for list of components
  • Needed to enforce unique component names