Framework Wordpress de fácil entendimento para a criação de temas como foco em performace e otimização.
- Leonardo Pereira
- E-mail: leonardo@leowpdeveloper.com.br
- Site: https://leowpdeveloper.com.br
- PHP
- HTML5
- CSS3
- SASS ( BEM )
- Gulp
Baixe o framework no formato .zip e após extrair, arraste para dentro da pasta wp-content/themes dentro do seu Wordpress
npm installpara a instalação dos pacotes necessários para o funcionamento do gulpgulppara compilar os arquivosgulp watchpara deixar o gulp rodando enquanto o projeto está sendo desenvolvido Os arquivos da pasta dev são compilados e enviados para a pasta dist já minificados
leowp-buttonclasse para o botāoleowp-button leowp-button__redclasse para o botāo com cor definida.leowp-button leowp-button__red leowp-button__mediumclasse para o botāo com cor e tamanho.
leowp-button leowp-button__redleowp-button leowp-button__blueleowp-button leowp-button__greenleowp-button leowp-button__yellowleowp-button leowp-button__purpleleowp-button leowp-button__orange
leowp-buttonleowp-button leowp-button__smallleowp-button leowp-button__mediumleowp-button leowp-button__large
<a href="#" class="leowp-button">Button</a>
<a href="#" class="leowp-button leowp-button__small">Button Small</a>
<a href="#" class="leowp-button leowp-button__medium">Button Medium</a>
<a href="#" class="leowp-button leowp-button__large">Button Large</a>
<a href="#" class="leowp-button leowp-button__red">Button Red</a>
<a href="#" class="leowp-button leowp-button__medium leowp-button__red">Button Medium Red</a> leowp-gridClasse pai do grid
leowp-grid__oneleowp-grid__twoleowp-grid__threeleowp-grid__fourleowp-grid__fiveleowp-grid__six
<div class="leowp-grid">
<div class="leowp-grid__one"></div>
</div>
<div class="leowp-grid">
<div class="leowp-grid__two"></div>
<div class="leowp-grid__two"></div>
</div>
<div class="leowp-grid">
<div class="leowp-grid__three"></div>
<div class="leowp-grid__three"></div>
<div class="leowp-grid__three"></div>
</div>
<div class="leowp-grid">
<div class="leowp-grid__four"></div>
<div class="leowp-grid__four"></div>
<div class="leowp-grid__four"></div>
<div class="leowp-grid__four"></div>
</div>
<div class="leowp-grid">
<div class="leowp-grid__five"></div>
<div class="leowp-grid__five"></div>
<div class="leowp-grid__five"></div>
<div class="leowp-grid__five"></div>
<div class="leowp-grid__five"></div>
</div>
<div class="leowp-grid">
<div class="leowp-grid__six"></div>
<div class="leowp-grid__six"></div>
<div class="leowp-grid__six"></div>
<div class="leowp-grid__six"></div>
<div class="leowp-grid__six"></div>
</div>leowp-formclasse para o formulárioleowp-form__labelclasse para a label do formulário.leowp-form__inputclasse para o input do formulário.leowp-form__textareaclasse para o textarea do formulário.leowp-form__selectclasse para o select do formulário.
<form class="leowp-form">
<label class="leowp-form__label">
<span class="leowp-form__text">Name:</span>
<input class="leowp-form__input" type="text" placeholder="Your Name:" />
</label>
<label class="leowp-form__label">
<span class="leowp-form__text">Email:</span>
<input class="leowp-form__input" type="email" placeholder="Your E-Mail:" />
</label>
<label class="leowp-form__label">
<span class="leowp-form__text">Message:</span>
<textarea class="leowp-form__input" type="text" placeholder="Your Message:"></textarea>
</label>
<button class="leowp-button leowp-button__medium leowp-button__blue">Submit</button>
</form>