INSTALL

Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.

If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework

HOW INSTALL \ BASIC SETTINGS

Where to find the files and how to set the head of the document.

FILE DEPLOYED

You can easily retrieve the files needed to run the framework through these three systems.

These files only concern the latest version. All previous versions can be found in the Deployed list or in the releases

░░ Core system files

Local file installation:

You can download the files and include them manually and permanently through the following links
Consider to use and download the dev mode for make secure minified custom branch
It is stable, but burdens on the system and you have to update everything manually

[Downloadable deployed dev pack]	[Downloadable deployed row pack]

url with locked Cdn version:

You can link files via a static cdn. These links will remain valid also for the selected version.
It's stable across versions but you will have to update them manually

from	css	js	flow
by Github	⍫ core.row.css	⍫ core.row.js	`for download only`
by hack	⍫ core.row.css	⍫ core.row.js	`locked cdn version`

latest only via Cdn: not raccomended

You can link files via a dynamic cdn. These links will refer only to the latest version
they will be updated automatically, convenient ... but you will have to update your designs very quickly

from	css	js	flow
by Gitcdn	⍫ core.row.css	⍫ core.row.js	`auto update`
by Staticaly	⍫ core.row.css	⍫ core.row.js	`auto update`

Install via NPM Package:

System to include the framework directly from the console. Currently not available.

[ ⍢ under costruction comingsoon...]

░░ basic theme download

download the basic theme to understand, installed everything, how everything would be seen.

[Velvet - Basic Theme HTML for test]	[ All themes deployed ]

░░ layout blueprint download

A set of valid examples in order to understand and build new things when you are an expert. Currently not available.

web pack comingsoon	app pack comingsoon	desk pack comingsoon

Once you have the files, you will need 3 steps:

A) creates a web based document (html or php) and sets the head as per passage: LINK

B) in the body sets a viewport according to your needs. More information here: LINK

C) The framework is useful but, without a theme, it is not understandable ... create or download a theme following the guidelines: LINK

HEAD OF DOCUMENT

Knowing where to find the files is now to build a first basic layout by correctly setting up a document.
Ps.In these examples we have used the pack locally, but it is obvious that you can also use cdn or other sources.

first we set the meta-viewport:

<meta name="viewport" content="target-densitydpi=150, width=device-width, height=device-height, initial-scale=1, user-scalable=no, minimal-ui">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

NOTE: "target-densitydpi=150" It's a useful parameter for targeting dimensions if you use the framework for app development. If you don't set it you may see the textual and design elements very small. A common PC screen on which you will probably build your app has about 72/150 ppi so set something similar for the app too.

░░ set all via standard html

At this moment the installation of the framework does not require command lines. The basic style, from version 2.8, is provided directly in css-4-draft.

However, even in this case, compilers such as less, sass (or other) can still be used.

<head>

  <!-- K core :: wiki > https://git.io/Jv9u1 -->
  <link rel="stylesheet" href="./k-core/core.row.css"> <!-- or cdn -->
  <script type="text/javascript" src="./k-core/core.row.js"></script> <!-- or cdn -->

  <!-- K theme :: core overriding n styling -->
  <link rel="stylesheet" href="./k-theme/theme.css"> 

</head>

Less tips from Node
commandline: npm install -g less
commandline: lessc ./www/k-theme/theme.less ./www/k-theme/theme.css

cli & tips for sass.

░░ set all via standard using less js for theme

<head>

  <!-- less compiler :: wiki > https://git.io/Jv9ux -->
  <link rel="stylesheet/less" type="text/css" href="./k-theme/theme.less" />
  <script> less = { env: "production", compress: true, async: true } </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/4.1.1/less.min.js"></script>

  <!-- K core :: wiki > https://git.io/Jv9u1 -->
  <link rel="stylesheet" href="./k-core/core.row.css">
  <script type="text/javascript" src="./k-core/core.row.js"></script>

  <!-- K theme :: core styling override -->
  <link rel="stylesheet" href="./k-theme/theme.css">

</head>

Less is magnificent but, via script, compile the css directly in the head. This causes a huge wait with a significant drop in performance. Kimera will understand that you are trying to use the Less.Js dynamic compilation and will warn you that, almost certainly, something will go too slow.

To avoid the slowness it will tell you that less has finished compiling, so it will shoot you the minify code of the theme that can be saved in a css (possibly theme.css, a classic)

To recap:

Enter the Less scripts in the head
The popup appears where you can find the compiled code
Copy the code into css file and upload it to the head
Comment on the Less scripts

Done.

*note: the client-side version determines a probable flicker and delay of the framework loader. Using such client-side resources is highly discouraged!

░░ set all via php using less php for theme - [ download less php ]

<head>

  <?

	//less css compiler > https://git.io/Jv9ud

	$lesspath = "/yourlibspath/lessc.inc.php";
  	$inputFile =  "/k-theme/theme.less";
  	$outputFile =  "/k-theme/theme.css";

        require_once $lesspath;
        $less = new lessc;
        $less->setFormatter("compressed");
        $less->compileFile($inputFile,$outputFile);

  ?>

  <!-- K core :: wiki > https://git.io/Jv9u1 -->
  <link rel="stylesheet" href="./k-core/core.row.css"> <!-- or cdn -->
  <script type="text/javascript" src="./k-core/core.row.js"></script> <!-- or cdn -->

  <!-- K theme :: core styling override -->
  <link rel="stylesheet" href="./k-theme/theme.css"> 


</head>

Tips: be careful if you don't use php short tags ... use <?php ...?>
Tips: if you use worpress use get_parent_theme_file_path()."mypath"
Tips: remember that it is not mandatory to put the framework on www

░░ And sass??

Sass is supported by the theme but the core does not do any checks on it. We still recommend less.
There is not much difference, in the practical introduction, between less and sass.
We give you, for now, some references

Sass in js here
Download Sass in php here

Remember: Sass is supported by the theme but the core does not do any checks on it. We still recommend simple css4 for now.