Giter VIP home page Giter VIP logo

scripturaframework's Introduction

Scriptura

Interface for web apps. A framework Pug/Stylus/jQuery.

About

Eng

Scriptura is a framework html/js/css light that aims to simplify the layout. Here, no supperflu adding html tags or index in the flow of web pages in order to support a script or a visual effect, priority is given to content, the HTML code is clean and respects the logic of the flow Datas.

The idea is to start from a properly structured text and to surround it with a parent element with a class. The part of the target document will be transformed as tabs or accordion menu, or anything else as appropriate. For examples see our (StyleGuide).

The framework allows for (complex layouts) through a grid system based on the modules css FlexBox and calc() function.

Their scripts sides are based on the Web Storage rather than cookies.

These technologies imply a limitation of backward compatibility with older browsers, bias on our part that allows us the use of the latest technologies without compromise web.

Fr

Scriptura est un framework html/js/css léger dont le but est de simplifier la mise en page. Ici, pas d'ajout supperflu de balises html ou d'index dans le flux des pages web dans le but de soutenir un script ou un effet visuel, la priorité est donnée au contenu, le code html reste propre et respecte la logique du flux des données.

L'idée est de partir d'un texte correctement structuré et de l'entourer d'un élément parent comportant une classe. La partie du document ainsi ciblée sera transformée en menu onglets ou accordéon, ou encore autre chose selon les besoins. Pour voir des exemples consultez notre (StyleGuide).

Le framework permet des (mises en page complexes) grâce à un système de grille basé sur les modules css flexbox et la fonction calc().

De leurs côtés les scripts s'appuient sur le Web Storage plutôt que sur les cookies.

Ces technologies impliquent une limitation de la rétrocompatibilité aux navigateurs récents, un parti pris de notre part qui nous permet l'utilisation des dernières technologies du web sans compromis.

Get Started

Scriptura uses (Gulp) to compile its code, so it is necessary to work under a (Node.js).

First stage

Work with the workflow by running this command with your terminal to the file in the root:

$ yarn install

And monitoring of the folder:

$ gulp

Second stage

Create an .html.pug or an .php.pug file in the folder.

With in the file's header:

link(rel='stylesheet' href='./Public/Styles/Main.css' media='screen')

And in the file's footer:

script(src='./Scripts/Vendors/JQuery.js')
script(src='./Public/Scripts/Main.js')

Third stage

That's all! You can start creating with pug syntaxe.

Folder tree and key files

├── Gulpfile.js
├── node_modules/
├── package.json
├── Readme.md
└── Root/
    ├── Fonts/
    ├── Images/
    ├── index.html.pug
    ├── index.html
    ├── Public/
    │   ├── Scripts/
    │   │   └── Main.js
    │   └── Styles/
    │       ├── Main*.css
    │       ├── Print.css
    │       └── Expanded/
    ├── Scripts/
    │   ├── Sources/
    │   │   └── Main.js
    │   └── Vendors/
    └── Styles/
        ├── Main*.styl
        └── Partial/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.