• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

Alicunde/HTML: Set of simplified and stylized HTML elements

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

Alicunde/HTML

开源软件地址：

https://github.com/Alicunde/HTML

开源编程语言：

CSS 62.6%

开源软件介绍：

Crazy HTML just to play | DEMO

It is not a framework

Public Domain (give me a star, it makes me happy :D)

alt text

Defining this repository is tricky. It is not a framework. I hope you like it and if you can improve a component leave us an issue.

I really appreciate if you leave me a star, this repository is free and they don't have any kind of license. I have simply created it to play with the HTML.

Selector

HTML + CSS

This field is extremely attractive for any type of form. It consists of a simple set of radio type inputs together with labels. You can configure it to have backgrounds or descriptions. It makes use of Flex to give an attractive point to the widths of the options.

alt text

<div class="Selector">
    <input type="radio" title="Pablo"   name="selector">
    <input type="radio" title="Édouard" name="selector">
    <input type="radio" title="Gustave" name="selector">
</div>

Range

HTML + CSS

Okay, the native HTML Range is too basic. Reason why it is necessary to use any of the thousands of scripts that exist on the internet. We have included this Range due to its funny and convoluted CSS, I recommend you check how the vertical lines of it have been made. I know that many have tried and few have succeeded, basically I have not found it anywhere.

alt text

<div class="Range">
    <input type="range" min="0" max="10" step="1" value="5">
</div>

Div

HTML + CSS

The reason for this component is to demonstrate the capacity of the DIV pseudo-elements. Dynamic layouts oriented to customize.

alt text

<div></div>

Slide

HTML + CSS

It is my opinion, but this is the most simplified and elegant Slide on the market. It does not make use of duplicate HTML elements for functionality and elegantly resolves controls. It doesn't make use of finite number classes and, thank goodness, it doesn't make use of absolute positioning for dynamic content slides.

It is important to emphasize that this Slide does not offer a design, it offers a structure with the possibility of applying the design that you are interested in applying.

alt text

<div class="Slide">
    <a id="0" href="#0"></a>
    <div>
        <div>
            2
        </div>
    </div>
    <a id="1" href="#1"></a>
    <div>
        <div>
            1
        </div>
    </div>
</div>

Password

HTML + CSS + JS

Component to insert and validate a password. This component mixes JavaScript with CSS3 capabilities.

alt text

<div class="Password">
    <input type="password" autocomplete="off" placeholder="Escribe tu clave">
    <i></i>
    <p>A lowercase letter</p>
    <p>A capital letter</p>
    <p>A number</p>
    <p>Minimum 8 characters</p>
</div>

Checkbox

HTML + CSS

Native component customized with CSS and without the use of JavaScript. We have added a CSS to avoid selecting the component and thus avoid the problem of double clicks.

alt text

<div class="Checkbox">
    <input type="checkbox" name="example" id="example" />
    <label for="example">I have a bike</label>
</div>

Progress

HTML + CSS

This item does not offer anything new, it is simply a progress bar.

alt text

<div class="Progress">
    <b title="23.40 KB">File Name</b>
    <div style="width: 48%;">48%</div>
</div>

Dropdown

HTML + CSS

A Dropdown is a dropdown object with different fields inside it. They generally stick to selectors with different options and with the possibility of adding links inside as a list. I have included the option to have fields of type text with optional labels.

It is attractive to know that it does not offer duplication of fields, creating a clean and not convoluted HTML.

alt text

<div class="Dropdown">
    <input type="checkbox" id="pet" />
    <label for="pet">You have a pet?</label>
    <ul>
        <li>
            <input type="radio" id="dog" name="pet" value="dog" />
            <label data-title="Yes, I have a dog" for="dog"> Dog</label>
        </li>
    </ul>
</div>

Select

HTML + CSS

One of the most popular objects is the select fields. The proliferation of advanced JavaScript-based select fields has supplied the general need for them. On the other hand, in practically all cases the advantages of continuing to use a native select are greater than those of using a JavaScript-based select.

This component customizes the overall appearance of the select, adding a positioned icon using the Background tag and an SVG.

alt text

<div class="Select">
    <select>
        <option>This is a select</option>
    </select>
</div>

Rating

HTML + CSS

Field to define a valuation. It does not use JavaScript and the stars are Unicode. The component is built on radio type fields.

alt text

<div class="Rating">
    <b>Rating the App</b>
    <label for="rating-1">★</label>
    <input type="radio" id="rating-1" name="rating" value="1">
    <label for="rating-2">★</label>
    <input type="radio" id="rating-2" name="rating" value="2">
    <label for="rating-3">★</label>
    <input type="radio" id="rating-3" name="rating" value="3" checked="">
    <label for="rating-4">★</label>
    <input type="radio" id="rating-4" name="rating" value="4">
    <label for="rating-5">★</label>
    <input type="radio" id="rating-5" name="rating" value="5">
    <span></span>
</div>

Number

HTML + CSS + JS

The native number field is limited in certain browsers. Therefore, this component is built using JavaScript.

alt text

<div class="Number">
    <button></button>
    <input type="number" max="10" min="0" value="1">
    <button></button>
</div>

Textarea

HTML + CSS

Texting with padding and width 100%. Alternative design in case of being disabled.

alt text

<div class="Textarea">
    <textarea readonly placeholder="That is a placeholder...">Lorem ipsum...</textarea>
</div>

Input

HTML + CSS

Component with a field of type Text with the possibility of having a Label positioned absolutely. In turn it also offers a design when disabled by showing a lock.

alt text

<div class="Input">
    <input type="text" readonly="" placeholder="My name is...">
    <label>Name</label>
</div>

Submit

HTML + CSS

Submit with reset and optional link. Icons generated using CSS3 and without the use of icon fonts. It has responsive capabilities.

alt text

<div class="Submit">
    <button type="submit">Send</button>
    <a href="#delete">Delete</a>
    <button type="reset">Reset</button>
</div>

Radio

HTML + CSS

Component with CSS properties for customization and preserving all the native features of the field. The rendering of the icon is done purely with CSS and does not require fonts.

alt text

<div class="Radio">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male </label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female </label>
</div>

Choice

HTML + CSS

Component developed on checkbox type fields. We make use of pointer-events, to avoid the need to create new HTML objects.

alt text

<div class="Choice">
    <ul>
        <li><input type="radio" checked="" name="gender"/>Picasso</li>
        <li><input type="radio" name="gender" />Velázquez</li>
    </ul>
</div>

Track

HTML + CSS

Component similar to Range but showing a progress bar. We make use of the shadow of the thumb, giving enough play and making possible many design options. The use of Firefox progress has been avoided, due to errors regarding the size of the Thumb.

alt text

<div class="Track">
    <input type="range" min="0" max="1000" step="1" value="500">
</div>

Limit

HTML + CSS + JS

Field with letter limitation built using JavaScript.

alt text

<div class="Input">
    <input type="text" maxlength="20" placeholder="My name is Salbatore">
    <em>20</em>
</div>

Switch

HTML + CSS

Switch field based on a radio type field. Icons generated directly with CSS3.

alt text

<div class="Switch">
    <input type="checkbox" name="Switch" id="Switch">
    <label for="Switch">I have a bike</label>
</div>

Colored

HTML + CSS

Basic and stupid color picker using Radio fields.

alt text

<div class="Colored">
    <input type="radio" style="background-color:#f6d258" name="color" />
    <input type="radio" style="background-color:#efcec5" name="color" />
</div>

Search

HTML + CSS

Search type field with optional reset and submit button without using JavaScript.

alt text

<div class="Search">
    <form method="get" action="#test">
        <input type="input" name="q" required="" placeholder="Search...">
        <p>
            <button type="reset">
                <i class="las la-times"></i>
            </button>
            <button type="submit">
                <i class="las la-search"></i>
            </button>
        </p>
    </form>
</div>

Button

HTML + CSS

Set of buttons with icons built in CSS. Unfortunately the use of classes is necessary to define the types and colors. I recommend you consult the CSS and customize them. The icons are positioned absolutely on the object, basically to offer dynamic behavior towards custom fonts.

alt text

<button type="button" class="cancel">Cancel</button>

Grid

HTML + CSS (not valid, sorry)

We hate grids frameworks. The concept is the concept. The current situation of different screens requires clear and easy solutions to implement. Most of the existing grids on the market focus on combining classes, generating objects with multiple classes. Our strip focuses on the biggest problem of strips, their combination. Initially we developed a rule with thousands of classes, combined in 10 levels and allowing its application by the order of the classes, basically we used the selector ^ =. Unfortunately the result was a CSS that took up 300kb, which is unfeasible. For this reason, we have created a grid based on the attributes screen, desk, book, tablet and phone. By simply adding the phone = "five" attribute, we will have a box with 50% width on screens smaller than 480px. If we put desktop = "five" it will be 50% on desktop.

alt text

<div class="Grid">
    <div screen="100" book="80" desk="60" tablet="40" phone="20" ></div>
</div>

Background

HTML + CSS

Basically a DIV with a background with the possibility of adding a description based on the DIV title. Built to demonstrate the potential of pseudo-elements.

alt text

<div class="Background" title="This is a pseudo-element"></div>

Alert

HTML + CSS + ICON FONT

Set of simple alerts, selected by role and class. We use an icon font, although they are not icons using HTML tags. The reason is clear, an icon in an alert is not semantic. If you want to use another font, modify the CSS.

alt text

<div role="alert">That is a warning alert</div>

More+
上一篇：
codershiyar/html: Sources codes of the tutorial html 5 in arabic which provided ...发布时间：2022-06-17
下一篇：
Masterminds/html5-php: An HTML5 parser and serializer for PHP.发布时间：2022-06-17
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap