molinajg / r4initpack

R4 framework with boilerplate

R4 Framework

PHP, JS e CSS de um framework leve e pequeno que pode ajudar no seu projeto

CSS

/* CORES */
.primary
.info
.danger
.success
.warning
.fancy
.grey
.light
.white
.black

.bgPrimary
.bgInfo
.bgDanger
.bgSuccess
.bgWarning
.bgFancy
.bgGrey
.bgLight
.bgWhite
.bgBlack

/* POSIÇÕES */
.center
.right
.left
.hidden
.onCenter
.onRight
.onLeft
.clearer
.clearfix

/* BOXES */
.corner
.paspatur
.panel

/* EFEITOS */
.transition

/* GRID */
.container
.row
.hidden-xs

.col-1
.col-2
(...)
.col-11
.col-12

.col-xs-1
.col-xs-2
(...)
.col-xs-11
.col-xs-12

.flexBox
.flexBox.wrap
.flex1
.flex2
(...)
.flex11
.flex12

/* BOTÕES */
button.R4

/* TABLES */
table.R4

Exemplo:

<button class="R4 bgSuccess white">Exemplo</button>

<table class="R4">
	<thead>
		<tr>
		(...)
		</tr>
	</tfoot>
</table>

JS

//Declare uma função com o nome R4Init no código
//e ela será executada assim que a tela arregar.
const R4Init = () => {
	console.log('Essa linha foi escrita pela função R4Init')
}

//Warning joga mensagens flutuantes na tela.
//Tipo toast em outros frameworks.
Warning.show('Exemplo de warning', 'Linha debaixo');

Effects.slideDown(elem, [callback]);
Effects.slideUp(elem, [callback]);
Effects.fadeIn(elem, [callback, duration, display]);
Effects.fadeOut(elem, [callback, duration]);

CAMPOS

Criar campos é uma mistura de HTML e JS
<div id="prefix_fieldText">Input</div>
<div id="prefix_fieldSelect">Select</div>
<div id="prefix_fieldSwitch">Switch</div>
<div id="prefix_fieldPass">Password</div>
<div id="prefix_fieldButton">Button</div>

Fields.create([
	{ id: 'fieldText',   type:'text'   },
	{ id: 'fieldSelect', type:'select', options: ['', 'Um', 'Dois', 'Três'] },
	{ id: 'fieldSwitch', type:'switch' },
	{ id: 'fieldPass',   type:'password' },
	{ id: 'fieldButton', type:'button' }
], 'prefix')

DIALOGS

<div id="formDialog" class="hidden" title="Exemplo Dialog Simples">
	Conteúdo do dialog
</div>

//Jeito rápido
$('#formDialog').dialog('open');

//Jeito completo
Dialog.create({
	id
	title
	html
	classes
	style
	onOpen
	onCreate
	open
	ephemeral
	onClose
	beforeClose
	buttons
});