https://github.com/mikeztaylor/taylord-ui

The following repo will contain a full UI framework that is been built as my final year project in Multimedia Application Development at the Waterford Institute of Technology
https://github.com/mikeztaylor/taylord-ui

css css3 front-end-development html5 html5-boilerplate nunjucks partials sass template themes ui

Last synced: 25 days ago
JSON representation

The following repo will contain a full UI framework that is been built as my final year project in Multimedia Application Development at the Waterford Institute of Technology

• Host: GitHub
• URL: https://github.com/mikeztaylor/taylord-ui
• Owner: MikeZTaylor
• Created: 2017-01-06T14:07:07.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-07T14:54:26.000Z (over 7 years ago)
• Last Synced: 2024-12-07T21:14:56.745Z (about 2 months ago)
• Topics: css, css3, front-end-development, html5, html5-boilerplate, nunjucks, partials, sass, template, themes, ui
• Language: CSS
• Size: 9.31 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Taylor'd UI

### npm install taylord-ui

###### Kitchen Sink example: [Demo](http://project.michaeltaylor.ie)

###### Blog Template: [Demo](http://project.michaeltaylor.ie/templates/blog/index.html)

###### Product Template: [Demo](http://project.michaeltaylor.ie/templates/product/index.html)

###### Portfolio Template: [Demo](http://project.michaeltaylor.ie/templates/portfolio/index.html) -- uses custom theme also built for the project

_Taylor'd UI_ is a framework designed for entry level users to help them in their understanding of web development. Frameworks are a dime a dozen, However none of these frameworks are intended for entry level users like college students.

This is why I built _Taylor'd UI_, I wanted to build a non opinionated framework that college students or Coderdojo members could use as a teaching tool at the start of their web development journey. _Taylor'd UI_ only weighs 4kb and is responsive.

_Taylor'd UI_ based on the 960 pixel grid, and utilizes a 12 column system for the layout. _Taylor'd UI_ is kept as non opinionated as possible as it's intended for the user to manipulate (abuse) to gain a better understanding of web development. only contains components that I feel an entry level user should know, the rest is up to them to learn.

The components of _Taylor'd UI_ are:

- Typography

- Tables

- Buttons

- Button groups / Pagination

- Panels

- Labels

- Navigation

- Forms

- Alerts

- Jumbotron

The vocabulary in _Taylor'd UI_ is kept to simple english terms such as _"danger button"_, the main reason for keeping the vocabulary simple is that

_**if you can visualize it, you can build it**_. The vocabulary is an ever evolving entity so if you see any issues or think something can be clearer, please create an [issue](https://github.com/MikeZTaylor/Taylord-UI/issues).

To help the user in their understanding, I also built 3 template websites ranging from blogs, to portfolio websites. The template websites were created using Nunjucks so that they could be broken into partials, and remove the unnecessary repetition of code like navigation. The web is also moving this way, and by introducing these concepts at the start, the end user won't be surprised or confused when they see partials else where like Wordpress.

The user can either use the compiled template files found in each of the respective folders or edit the partials files also found in their respective folders.