/Framework

Framework CSS+JS

Primary LanguageCSS

Framework CSS+JS

A new CSS and JavaScript framework for responsive front-end web development.

Requirements:

  • jQuery
  • FontAwesome
  • Google Code Prettify
  • Google Code Prettify Dark Theme
  • Google Code Prettify CSS Extension

Easy Setup

Just put this into your head tag:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Start Styling Code-->
    <!--Framework CSS Stylesheet-->
    <link rel="stylesheet" href="/css/framework.css">
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!--Framework CSS JavaScript Code/Framework JS main code-->
    <script src='/js/framework.js'></script>
    <!--FontAwesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--Code Syntax Highlighting by Google-->
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <!--Syntax Highlighting Dark Theme-->
    <link rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night-bright.min.css"></link>
    <!--Add CSS Syntax Highlighting-->
    <script src="https://raw.githubusercontent.com/google/code-prettify/master/src/lang-css.js"></script>
    <!--End Styling Code-->
   

CSS Classes

  • card - create a card-styled div.
  • rightitem - align text within the div to the right in the navbar
  • subcard - a card inside a card
  • sitename - website name in the navbar

Theme Classes

Place in body tag

  • theme-default - light theme
  • theme-dark - dark theme
  • theme-blue - blue theme
  • theme-orange - orange theme

Other Info

Framework CSS+JS also includes pages through custom tags, redirects in buttons, an AngularJS-like dynamic content management system, and a responsive navbar with more features coming soon!