govuk_elements - GOV.UK Elements form the building blocks from which all pages are made.

  •        3

http://govuk-elements.herokuapp.com/. Installation and usage instructions can be found in the govuk-elements-sass README.

https://govuk-elements.herokuapp.com/
https://github.com/alphagov/govuk_elements

Dependencies:

body-parser : ^1.14.1
del : ^3.0.0
express : ^4.15.2
govuk_frontend_toolkit : ^7.1.0
govuk_template_jinja : 0.23.0
gulp : ^3.9.1
gulp-cssnano : ^2.1.2
gulp-mocha : ^4.3.1
gulp-nodemon : ^2.2.1
gulp-rename : ^1.2.2
gulp-sass : ^3.1.0
gulp-util : ^3.0.8
node-sass : ^4.5.3
nunjucks : ^3.0.0
run-sequence : ^2.1.0
standard : ^10.0.2
supertest : ^3.0.0

Tags
Implementation
License
Platform

   




Related Projects

frontend - Serves mainstream formats, the homepage, and search on GOV.UK

  •    Ruby

Application to serve some mainstream formats and the homepage for GOV.UK. A Ruby on Rails application that renders the citizen-facing part of formats stored in the Content Store. It looks up the passed-in slug in the Content Store.

govuk_frontend_toolkit - Generic tools and helpers for building GDS front-end apps

  •    Javascript

A collection of Sass and JavaScript files for using as part of your application's frontend. This project is not tied to a specific language and is designed to be used as a dependency in as many different languages as needed.

Front-End-Design-Checklist - 💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers

  •    

The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development. The Design Checklist for Front-End Developers is an exhaustive list of elements which Web Designers and Front-End Developers need to take into consideration to facilitate their collaboration. The following elements are a mix between known practices and new elements based on a long experience analysing web designs.

bel - :dragon: A simple library for composable DOM elements using tagged template strings.

  •    Javascript

A simple library for composable DOM elements using tagged template strings. If you're looking for a higher level front end framework, try yo-yo. Or even higher than that, try choo.

HEAD - A list of everything that *could* go in the head of your document

  •    

Valid <head> elements include meta, link, title, style, script, noscript, and base. These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.


frontend-guidelines - Some HTML, CSS and JS best practices.

  •    

HTML5 provides us with lots of semantic elements aimed to describe precisely the content. Make sure you benefit from its rich vocabulary. Make sure you understand the semantics of the elements you're using. It's worse to use a semantic element in a wrong way than staying neutral.

layerJS - layerJS: Javascript UI composition framework

  •    Javascript

layerJS is an open source Javascript UI/UX library allowing intuitive, visually intense, mobile app-like experiences for web apps and websites. layerJS follows the idea that any kind of interactive web content is composed of media elements on moving layers. Unlike existing UI frameworks, layerJS does not provide various UI elements (use your favorite framework for that) but focusses on how larger blocks are put together to form websites and apps and how these blocks will behave upon user interaction.

oriDomi - Fold up DOM elements like paper

  •    CoffeeScript

Visit oridomi.com for examples, documentation and notes. Read the annotated source for a detailed look.

supler - Rapid Form Development library. Use your favourite JS frontend & Scala backend frameworks.

  •    Scala

Supler is a library which makes writing complex form easier. It has server-side (Scala) and client-side (JavaScript) components. Supler does not define or mandate how the objects/entities backing the forms should work, how are they persisted, how are sessions managed or how you handle requests. It is also agnostic to other JS frameworks and libraries. The generated HTML has elements with predictable names, which can be easily customized.

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

  •    TypeScript

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

Front-End-Performance-Checklist - 🎮 The only Front-End Performance Checklist that runs faster than the others

  •    

Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional). For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

material-dashboard - Material Dashboard - Open Source Bootstrap 4 Material Design Admin

  •    CSS

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements. Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

material-kit - Free Bootstrap Material Design UI Kit

  •    CSS

Material Kit is a Free Bootstrap 4 UI Kit with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project. Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.

react-stripe-elements - React components for Stripe.js and Stripe Elements

  •    Javascript

React components that help you quickly add Stripe Elements to your React app.This project is a thin React wrapper around Stripe.js and Stripe Elements. It allows you to add Elements to any React app, and manages the state and lifecycle of Elements for you.

webapp.rs - A web application completely written in Rust.

  •    Rust

Target of this project is to write a complete web application including backend and frontend within Rust. The app consist of a frontend and a backend. For getting started with hacking, the backend can tested via make run-backend, whereas the frontend can be tested with make run-frontend. You can adapt the application configuration within Config.toml if needed.

html-as-custom-elements - HTML as Custom Elements

  •    CSS

A demo is available, which shows implementation efforts for a number of fairly simple elements, and outlines the missing platform features each of them highlights. Even these simple elements have highlighted one major area of missing functionality in custom elements, which has been written up in the document "Gap Analysis: Accessibility". One of the axioms of the extensible web project is that high-level, declarative APIs should be able to be explained in terms of lower-level, imperative APIs. Not just lower-level algorithms, but APIs: the capabilities that we encapsulate inside a given HTML element should also be exposed directly to JavaScript authors. And those APIs should be factored into small, composable pieces, that build on each other to eventually produce the declarative edifice that is HTML. In this way, authors can reuse these platform capabilities without jumping through hoops (like instantiating a HTMLAnchorElement just to parse a URL) or rebuilding large parts of the platform for themselves (like creating their own scrolling logic just to get pull-to-refresh behavior).

document-register-element - A stand-alone working lightweight version of the W3C Custom Elements specification

  •    Javascript

A stand-alone lightweight version of Custom Elements V1 based on top, and compatible with, the battle-tested Custom Elements V0, already used in production with projects such Google AMP HTML ⚡ and others. If you specify noBuiltIn property as true, the V1 API will be polyfilled where needed, but no extra checks and patches will be applied to make custom elements built-in working, since no browser is currently shipping this part of the specification.

ui5-webcomponents - UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice

  •    Javascript

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design. Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.

wired-elements - Collection of elements that appear hand drawn. Great for wireframes.

  •    Javascript

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

frontend-dev-bookmarks - Manually curated collection of resources for frontend web developers.

  •    

Manually curated collection of resources for frontend web developers.You are viewing a browseable version, split by category in many small files. There is also a really huge file with every single resource on one page. Proceed to the totally gigantic file if you are into this kind of thing.