martedì 29 Settembre 2020

Download in corso

Softwareone.it

11-01-2019

Amazium 3.5

Amazium è un piccolo framework per la creazione di pagine web in responsive tramite dei fogli di stile in CSS.

Responsive Design Amazium è un ottimo framework semplice facile da gestire.

Pubblicità

Contiene al suo interno pochi file per la gestione e creazione di pagine in responsive che si adattano a qualsiasi dispositivo Mobile o Desktop.

Con Amazium abbiamo la possibilità di creare degli elementi div, Article, Section, Button, Table ecc..

Si adattano al tipo di dispositivo che si sta visualizzando che sia uno smartphone o un notebook, grazie a delle classi in CSS già preimpostare.

Possiamo pure andare a creare un form per esempio per la pagina contatti cosi’ che si adatti pure su smartphone.

Ovviamente se abbiamo la necessità di andare a modificare per esempio la grandezza del carattere usato o il tipo di font possiamo farlo.

Amazium contiene tre cartelle suddivise in CSS, JS e img.

La prima cosa è richiamare i file necessari per la creazione della nostra pagina.

<!-- CSS -->
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/amazium.css">
   <link rel="stylesheet" href="css/form.css">
   <link rel="stylesheet" href="css/layout.css">
<!-- JS -->
    <script type="text/javascript" src="js/jquery-1.8.0.min.js">
    <script type="text/javascript" src="js/amazium.js">

Il file base.css contiene al suo interno tutte le classi necessarie per la gestione di Link, Testo, Tabelle, Button, Immagini, Blockquotes, gestione liste,il reset delle classi come margin o padding.

Da questo file possiamo andare a modificare per esempio il colore link al passaggio del mouse, la grandezza del titolo.

amazium.css contiene tutte le classi per la gestione dei selettori ovvero tutti quei tag che devono adattarsi al dispositivo di visualizzazione.

Il file form.css ovviamente ci servirà per andare a modificare l’aspetto dei form creati come label, input, checkbox, textarea, select.

layout.css ci servirà qualora dovessimo andare ad aggiungere una larghezza di visualizzazione diversa o aggiuntiva di un dispositivo.

In fine troviamo i file jquery.min.js e amazium.js file che servono per la corretta visualizzazione e adattamento degli elementi creati.

Amazium è impostato per avere una larghezza massima di 960px, negli ultimi tempi è stato aggiunto un’altra query per consentire di scalare a 1200px

Un piccolo esempio di elementi che si possono creare.

  <section class="row grid-highlight">
    <article class="grid_1">1</article>
</section>
 
<section class="row grid-highlight">
    <article class="grid_2">2</article>
    <article class="grid_2">2</article>
</section>
 
<section class="row grid-highlight">
    <article class="grid_4">4</article>
</section>
 
<section class="row grid-highlight">
    <article class="grid_6">6</article>
    <article class="grid_6">6</article>
</section>
 
<section class="row grid-highlight">
    <article class="grid_12">12</article>
</section>

Buttons

<p>
<a href="#" class="btn">Normal Button</a>
<a href="#" class="btn red">Normal Red Button</a>
<a href="#" class="btn blue">Normal Blue Button</a>
<a href="#" class="btn green">Normal Green Button</a>
<a href="#" class="btn white">Normal White Button</a>
</p>
<p>
<a href="#" class="btn small">Small Button</a>
<a href="#" class="btn red small">Small Red Button</a>
<a href="#" class="btn blue small">Small Blue Button</a>
<a href="#" class="btn green small">Small Green Button</a>
<a href="#" class="btn white small">Small White Button</a>
</p>

Tables

  <table summary="This is an example of a table">
    <thead>
        <tr>
            <th scope="col">#ID:</th>
            <th scope="col">First Name:</th>
            <th scope="col">Last Name:</th>
            <th scope="col">Location:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#1</td>
            <td>Bruce</td>
            <td>Wayne</td>
            <td>Gotham City</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>Clarke</td>
            <td>Kent</td>
            <td>Metropilis</td>
        </tr>
        <tr>
            <td>#3</td>
            <td>Oliver</td>
            <td>Queen</td>
            <td>Star City</td>
        </tr>
        <tr>
            <td>#4</td>
            <td>Diana</td>
            <td>Prince</td>
            <td>Themyscira</td>
        </tr>
    </tbody>
</table>

Esempio

Per ulteriore modifiche potete consultare il sito ufficiale di Amazium

Scarica Amazium

Lascia un commento

Pubblicità