Framework.js r1

Warning


Your browser don't supports sites built with PEHTML. This means that this site could not be shown completly in your current browser.
Download the Internet Boat browser to enjoy the whole power of PEHTML and all the features of this site.

Don't know what is PEHTML? Learn here.

Framework.js

Easy, lightweight, adaptive and beauty framework for sites/apps of future.

Hello ZeroNet users_

FrameworkJS have exclusive features to power-up your project on ZeroNet.

We detected that you are visiting this site in ZeroNet. This site is also available on clearnet, but on clearnet you can't see this message. How we can detect it? See the FrameworkJS's features for ZeroNet:

  • Detect when site visitor is on ZeroNet or clearnet, and change the site display accourding to ZeroNet/clearnet (Putting elements inside <zeronet> or <clearnet> tags - thanks to Daniell and Nofish).
  • ZeroFrame API
  • ZeroPage API
  • ZeroDevLib (thanks to Imachug)
  • Can prompt user to clone your site (thanks to Daniell and Imachug)
  • Supports hashes on the URL (thanks to Krixano and Daniell)
  • Get rid of jQuery (thanks to ZeroLSTN)
  • Detect if ZeroNet theme is dark or light (thanks to ZeroLSTN)

Proxies are on clearnet, but we consider as ZeroNet when detecting the platform.

Likes this font? Just put <link href="Fonts/Text Me One/font.css" rel="stylesheet"> on your HTML and font-family: 'Text Me One'; in your CSS.

info What is Framework.js

Its a modern and responsive framework/template/theme thought for apps and sites of the future. A unique framework with the same code, both for apps and sites.

This idea came after I started creating PEHTML in 2012, so I changed the design and I liked it so much, then I thought: "I'll use it in other sites". Also, Universav Poké app helped me to have this.

Because I believe that for the future the tendence is apps and sites being the same thing. Kickly start your site/app with the already-done ideas and be inspired for more with the technology and design metaphor of Framework.js, or reformulate your current work with a little taste of the future.

bookmark_border Principles

layers Material

With borders and shadows, the elements looks more natural.

book Smooth reading

With good typography and flat elements, all this minimalism is combined to give a comfortable reading.

touch_app Responsible

From a hover to a clicked effect, all elements responds and are adaptated to any device: since smartwatches to televisors. Also, if user wants, all elements can respond with sounds.

dashboard Glass

In your app, elements looking like glass gives a more beauty experience.

info Meanings

All the effects of the elements gives a message to simplify the usage making it more intuitive.

chat Communicable

Say better using Material Icons.

format_paint Customizable

With tutorials and code variables, easily change the theme as you please.

add_circle Multiplatform

Works in versions for Web/Cordova/Electron, Blogger, Wordpress, Tumblr, phpFox, CometChat and others! We have tutorials, so anyone can port Framework.js to other platforms.

description With huge libs

Framework.js comes in versions with Pure-FrameworkJS, Bootstrap, AngularJS, React and VueJS.

highlight Easy to implement

With built-in tutorials and a lovely community, anyone can start using Framework.js and do amazing things with it!

file_download Downloading

create Starting

First, download it or add_circle create a new project.

Warning: The EXTRACT step isn't needed on ZeroNet. Unless you downloaded FrameworkJS zip file and want to implement it on your current project.

archive Extract

Open framework.zip and extract all the files from the /upload folder, to your site root.

code Add to HTML

Warning: Only follow the bellow steps if you're implementing FrameworkJS on your current ZeroNet project. If you want to create a new project, just click add_circle Create your own zite!.

settings_applications Javascript

Add this after the <head> tag:

Note: the jQuery tag needs to be in top of any other javascript link.

And in any other part of the <head> tag, add the following:

format_paint Stylesheets

Designs, Roboto font and Material Icons.

Add this in any place of the <head> tag:

Warning: Only follow the above steps if you're implementing FrameworkJS on your current ZeroNet project. If you want to create a new project, just click add_circle Create your own zite!.

check_circle Done!

Then you will see your site working with Framework.js and his design.

Note: if you want to do it from scratch, extract the /blank folder from the framework.zip file.

add_circle To see sample codes and elements to insert in your project:

view_compact Note: Bootstrap Material Design components and elements are also usable!

format_paint Personalize

Use a custom .css file to use your own style.

Inside your /css folder, there are two files: the page-custom.css and app-custom.css.

Open those files and, according to the type of style (if is for page or for app), insert the CSS classes with your modifications.

Note: Don't forget to use the !important after every value.

space_bar Navbar

This is like the hat of your app/site. Let's match it to your theme?

Open the page-custom.css file and insert the following:

Then change #00A185 to your background color.

photo_size_select_actual Logo

This is the brand of your project.

If you want to use a image as your logo, open the page-custom.css file and insert the following:

Then change ../img/logotype.svg to your file path/name. and 315px to your logo width.

touch_app Selection

If you want to personalize the colors of the selection, open the page-custom.css file and insert the following:

Then change #00A185 to your background color and/or #fff to your text color.

format_color_text Heading 1

As the most important of all text headings, <h1> have the theme color in FrameworkJS.

If you want to personalize it, open the page-custom.css file and insert the following:

Then change #00A185 to your text color.

menu Menu

If you want to personalize the icon/text color and the hover effect background, open the page-custom.css file and insert the following:

Then change #00A185 to your text color.

Note: you can also change the menu's background and use different colors in icon/text and in the hover/active effects.

menu Tab menu

If you want to personalize the selected tab and active effect color in tab menus, open the page-custom.css file and insert the following:

Then change #00A185 to your color.

Note: in the :active state, there is a 80 after the #00A185. Please don't remove it if you want the transparency effects.

color_lens .color

Open the page-custom.css file and insert the following:

Then change #00A185 to your color.

space_bar Footer

Open the page-custom.css file and insert the following:

Then change #00A185 to your color.

add_circle Other customizations

color_lens Change tab/bar color

Thanks to our support to Progressive Web Apps, you can customize the color that will appear in your site's tab/bar/others. This is called theme-color.

Open the manifest.json of your project, so you will find "theme_color": "#00A185". Change #00A185 to your theme color.

Note: you can also change the "background_color": "#efefef", changing #efefef by the color you use in your project's background.

code Personalize the PEHTML of your project

Change things such as your brand new favicon, tab title's color, and others.

tag_faces Use icons

Framework.js includes Material Icons. You can use them by inserting HTML tags.

view_list Using Framework.js

web Sites

    apps Apps

      receipt Seals and badges

      Seal


      Badge


      Page address: 1Fmwk685eaX7GjoQ7JKo3QvywizGfnYRCB
      - Peers: 70
      - Size: 6710422
      - Modified: Thu Dec 06 2018 13:19:45 GMT+0000 (Coordinated Universal Time)

      comment Comments Loading...

      ZeroNet doesn't have a commenting system yet.
      Last update in 11/11/2018 at 17:37
      (c) 2014-2018 Plasnerd. Thanks to Jesus, our Lord.
      This page is a snapshot of ZeroNet. Start your own ZeroNet for complete experience. Learn More