A set of small, responsive CSS modules that you can use in every web project.

Overview

Pure

Pure

A set of small, responsive CSS modules that you can use in every web project. https://purecss.io/

Build Status Gitter

This project is looking for maintainers to support and enhance Pure.css. If you are interested please leave a comment in the Github issue.

Features

Pure is meant to be a starting point for every website or web app. We take care of all the CSS work that every site needs, without making it look cookie-cutter:

  • A responsive grid that can be customized to your needs.

  • A solid base built on Normalize.css to fix cross-browser compatibility issues.

  • Consistently styled buttons that work with <a> and <button> elements.

  • Styles for vertical and horizontal menus, including support for dropdown menus.

  • Useful form alignments that look great on all screen sizes.

  • Various common table styles.

  • An extremely minimalist look that is super-easy to customize.

  • Responsive by default, with a non-responsive option.

  • Extremely small file size: 3.7KB minified + gzip.

Get Started

Check out the Get Started page for more information.

Build From Source

Optionally, you can build Pure from its source on Github. To do this, you'll need to have Node.js and npm installed. We use Grunt to build Pure.

$ git clone [email protected]:pure-css/pure.git
$ cd pure
$ npm install
$ grunt

Build Files

Now, all Pure CSS files should be built into the pure/build/ directory. All files that are in this build directory are also available on the CDN. The naming conventions of the files in the build/ directory follow these rules:

  • [module]-core.css: The minimal set of styles, usually structural, that provide the base on which the rest of the module's styles build.

  • [module]-nr.css: Rollup of [module]-core.css + [module].css + [module]-[feature].css from the src/[module]/ dir. This is the non-responsive version of a module.

  • [module].css: Rollup of [module]-nr.css + [module]-r.css from the build/ dir. This is the responsive version of a module.

  • *-min.css: A minified file version of the files of the same name.

  • pure.css: A rollup of all [module].css files in the build/ dir. This is a responsive roll-up of everything, non-minified. Note: does not contain responsive grids with @media queries.

  • pure-min.css: Minified version of pure.css that should be used in production.

  • pure-nr.css: A Rollup of all modules without @media queries. This is a non-responsive roll-up of everything, non-minified.

  • pure-nr-min.css: Minified version of pure-nr.css that should be used in production.

  • grids-responsive.css: Unminified version of Pure's grid stylesheet which includes @media queries.

  • grids-responsive-min.css: Minified version of grids-responsive.css that should be used in production.

Browser Support and Testing

Pure is tested and works in:

  • IE 10+
  • Latest Stable: Firefox, Chrome, Safari
  • iOS 12+
  • Android 6+

Docs and Website

Pure's website is located in the site directory. Please feel free to open issues or questions in the Issue tab.

Contributing

See the CONTRIBUTING file for information on how to contribute to Pure.

License

This software is free to use under the Yahoo! Inc. BSD-3-Clause license. See the LICENSE file for license text and copyright information.

Comments
  • grids spacing wrong without Arial on pure-g, pure-g-r

    grids spacing wrong without Arial on pure-g, pure-g-r

    This was reported on yui3 grids and still exists (http://yuilibrary.com/projects/yui3/ticket/2533215.) The summary is that the letter spacing = -0.31em hack placed on the pure-g[-r] class to make the grid units work well only works (well) if the font family is Arial. It may appear to work for other font families (pure sets the font family for the html tag to sans-serif), but the spacing is not perfect, and it breaks down in certain browsers (atm it fails on FF/Linux for me.) The general solution is ensure that the pure-g and pure-g-r divs get Arial, and that your own content within the pure-u-x-x divs get whatever font you want (so I guess that means resetting back to sans-serif for pure compatibility.) My interrim solution is to add css like this

    .pure-g, .pure-g-r {
        font-family: Arial;
    }
    

    in my own css file loaded after pure, and also either resetting the font for all the pure-u-x-x

    .pure-u-1, .pure-u-1-2, ...
        font-family: sans-serif;
    }
    

    or using a container (which I always do anyway) inside the pure-u-x-x which sets the font (and does other as well.)

    I think the best solution is to handle the pure-g, and pure-u stuff inside of pure.

    bug discussion urgent 
    opened by adapterik 153
  • Progress / Roadmap

    Progress / Roadmap

    I'm just curious about the current state and the maintenance of this project as the oldest issue is from 3rd of july 2013 with actually 85 open issues and 20 open pull requests - where the oldest ist from 23rd july 2013. is this project still relevant or did you guys give up against bootstrap?

    discussion 
    opened by krebbi 99
  • Add a preprocessor to enable reuse and customization

    Add a preprocessor to enable reuse and customization

    It seems clear that the project could benefit from using a CSS preprocessor in order to minimize redundant code and sync issues, and to give developers a clean way to customize and extend.

    The big question is which to choose?

    Short list of candidates:

    • Sass (http://sass-lang.com/)
    • LESS (http://lesscss.org/)
    • Rework/Styli (https://github.com/visionmedia/rework)

    Any others we should consider?

    discussion 
    opened by msweeney 56
  • Revamp Pure Menu

    Revamp Pure Menu

    This commit makes Pure Menu smaller, more responsive, and easier to customize. This change does break back-compatibility, as I have removed some classnames and some functionality.

    What's in this PR

    • Remove the close relationship with YUI's Y.Menu. This helps to get rid of a lot of CSS which wasn't needed 80% of the time.
    • Remove .pure-menu-open: This also helps to get rid of adjoining class selectors, which makes it easier to customize menus.
    • Add .pure-menu-responsive and .pure-menu-responsive-toggle to make responsive horizontal menus: Yay!
    • CSS-only dropdown support: This only supports one level of nesting but I think that should be fine for most use cases.
    • Make pure menus really easy to customize: More on this below

    Responsive Horizontal Menu

    This is something that I've been wanting for a while. You can now make responsive menus that can show and hide their links on small screens. Doing this is really easy, and the site will have JS snippets that you can copy/paste in to achieve the necessary behavior.

    This is done by adding two new classnames, .pure-menu-responsive and .pure-menu-responsive-toggle. Since you may not want every horizontal menu to be responsive, you have to add the .pure-menu-responsive class name. Responsive menus also need an <a> element with the .pure-menu-responsive-toggle class name so that it can show/hide menu items on small screens.

    HTML

    Here's the HTML for a responsive menu:

        <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
            <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
            <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
            </ul>
        </div>
    

    That'll give you something that looks like this on small screens:

    menu closed

    Open State:

    menu open

    Dropdown Menu

    Here's the HTML for a dropdown menu:

        <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
            <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
            <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                <li class="pure-menu-item pure-menu-has-children">
                    <a href="#" class="pure-menu-link">Blog</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link" href="/javascript">Intl Message Format</a></li>
                    </ul>
                </li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
            </ul>
        </div>
    

    Here's what it looks like:

    Customizing the menu

    The menu now has various child classes that you can hook into. Here they are:

    1. .pure-menu: Hook into this to style the menu's bounding box.
    2. .pure-menu-list: All <ul> tags within a menu should have this class.
    3. .pure-menu-item: All <li> tags within a menu should have this class.
    4. .pure-menu-link: All <a> tags within a menu should have this class.
    5. .pure-menu-has-children: A <li.pure-menu-item> tag that has a nested menu should have this class.
    6. .pure-menu-children: A <ul.pure-menu-list> tag that is a child of an <li.pure-menu-item> tag (nested menu) has this class.
    7. .pure-menu-heading: A <a> tag that is outside the <ul.pure-menu-list> and is the heading for the menu has this class.
    8. .pure-menu-responsive-toggle: A <a> tag in a responsive menu that sits outside the <ul.pure-menu-list> and is responsible for showing/hiding the toggle button has this class.
    9. .pure-menu-is-active: In a responsive menu, this class signifies when a menu is "open" (ie: showing its submenus).

    Menus were probably the hardest part of the library to customize. You would have to write a ton of messy CSS to do it. Not anymore! This is how you customize a menu now:

    HTML

    Here's the HTML for a responsive horizontal menu. I've added some classes with the -custom suffix to base my styles off of. I recommend doing the same when customizing any Pure component.

        <div class="menu-custom pure-menu pure-menu-horizontal pure-menu-responsive">
            <a href="#" class="heading-custom pure-menu-link pure-menu-heading">Title</a>
            <a href="#" class="toggle-custom pure-menu-responsive-toggle">Toggle</a>
            <ul class="list-custom pure-menu-list">
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Home</a></li>
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">About</a></li>
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Blog</a></li>
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Contact</a></li>
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">GitHub</a></li>
                <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Twitter</a></li>
            </ul>
        </div>
    

    CSS

    Here's what the CSS would look like. Notice how I've added my own class to the menu above to make it easier to style. However, I don't have to use any descendent selectors anymore.

            /* Update background on menu. */        
            .menu-custom {
                background: #111;
                padding: 0.8em;
                border-radius: 5px;
            }
    
            /* Make the heading white */
            .heading-custom {
                color: white;
            }
    
            /* Make links light-gray with a transition */
            .link-custom {
                color: #ddd;
                transition: color 0.5s;
            }
    
            /* Color links blue on hover and focus */
            .link-custom:hover,
            .link-custom:focus {
                color: #40a4ff;
            }
    
            /* Update the positioning of the toggle button 
            because we are modifying the menu's padding, and change its color. */
            .toggle-custom {
                margin-top: 6px;
                margin-right: 15px;
                color: white;
            }
    

    Looks like this:

    Responsive Behavior and overriding Media Queries

    To add the responsive behavior to menus, we obviously need to have a media query. I recommend doing the same thing that we did with Grids. Have pure-menu-responsive.min.css available on the CDN, with a sane media query default (I recommend 48em), but allow people to override this by not getting that file from the CDN, and instead adding the following CSS inside their app.css:

    @media (min-width: 48em) {
        /*At 48em and higher, the list becomes display:inline-block (from display:none)*/
        .pure-menu-responsive .pure-menu-list {
            display: inline-block;
        }
        /*At 48em and higher, we hide the toggle, because we just showed the .pure-menu-list*/
        .pure-menu-responsive-toggle {
            display: none;
        }
    }
    

    Responsive Behavior and JavaScript

    You need to have some JS on the page to toggle the responsive menu. This would be something that users can copy/paste from the Pure site.

    Example using YUI:

            YUI().use('node', function (Y) {
                //When you click on a .pure-menu-responsive-toggle, toggle the associated menu
                Y.one('document').delegate('click', function (e) {
                    e.preventDefault();
                    e.target.get('parentNode').toggleClass('pure-menu-is-active');
                }, '.pure-menu-responsive-toggle');
            });
    

    Tests

    I've tested this on Latest Chrome/FF/Safari, and iOS 7. Haven't tested this on Android or IE yet, so I'll do that and report back here (help would be appreciated :smile: ). The manual test page has been updated with the new menu.

    Next Steps

    • [ ] Verify tests in IE
    • [ ] Verify tests in Android 4.x
    enhancement discussion 
    opened by tilomitra 50
  • pure-hidden-* removed but not documented

    pure-hidden-* removed but not documented

    Looks like the helper classes pure-hidden-phone, pure-hidden-tablet and pure-hidden-dekstop appear to be removed - which should be mentioned in the release notes ... I guess :) Or is it a bug in the RC1?

    enhancement up for grabs docs tools 
    opened by SimonSteinberger 46
  • Pure Roadmap 2015

    Pure Roadmap 2015

    James Alley – Welcome to Pure!

    Pure Roadmap 2015

    During the latter part of 2014, Pure has cruised along. Pull requests have come in, people have filed issues, and in some cases we've taken the time to integrate the changes or comment. Meanwhile, we have focused on some exciting new efforts, quite separate from Pure, which will bear fruit in the coming year. But it's time to dive back into Pure, and to share with everyone our roadmap for Pure in 2015.

    The Scope and Vision for Pure

    We still intend to keep Pure small, focused, and useful to any web project. We intend to refine and maintain Pure, rather than radically expand its scope. Pointedly, Pure will not expand to become a library of drop-in UI components. Rather, it will remain a foundation with a "ridiculously tiny" footprint that developers use as a starting point for writing their own CSS.

    There has been some discussion on whether Pure should expand to become a component library, replete with segmented controls, drop-downs, tab-views, etc. We perhaps contributed to this perception by including a paginator component. Why do so, if Pure is more about smoothing the foundation than creating components?

    For inclusion in Pure, a construct must meet the following criteria:

    • Common (useful to the vast majority of websites, ~80%+)
    • Non-trivial

    In other words, we're looking for stuff that everyone needs and yet finds difficult to implement with the proper semantics, accessibility (including keyboard access), and browser support. In fact, for these reasons, in the upcoming 0.6 release, we're removing the Paginator component. Pagination is not common enough, many sites use infinite scrolling, and it's trivial to implement yourself using inlined button-styled anchors. But this can be a gray area. We don't scientifically evaluate the 80% rule; difficulty and triviality are obviously subjective. So we welcome suggestions and the discussions they will spark.

    About Those Pull Requests...

    Incidentally, we cannot merge some very good PRs due to a lack of a CLA (license) on file for the contributor. Please don't let this discourage you! To take care of the CLA, simply follow the link to sign electronically. (https://yahoocla.herokuapp.com)

    The Road to 1.0

    The community has battle-tested Pure and provided feedback. In addition to incorporating bug fixes into Pure, we wish to focus on five areas of refinement before we declare Pure ready for a 1.0 stamp, whereby we begin to guarantee backwards compatibility through all subsequent 1.x releases.

    1. New Pure Menus. The 0.6 release will include a new Menus component developed by Pure contributor Tilo Mitra to be more responsive and more easily customizable.
    2. Removal of Paginator. Paginator doesn't meet the 80% bar, and is trivial to implement as inlined button-styled anchors. Removed in 0.6.
    3. Revamped Forms which leverage Grids. Currently, Forms has some utility classes to aid with layout, but we plan to remove them in favor of letting users leverage Grids instead.
    4. Refinements to Grids. At the very least, we want to bring more browsers onboard to Grids' flexbox-based implementation. Some users have noted the font-family: sans-serif dependency as an annoyance, so that is worth re-examining. There may be takeaways from other grid constructs that we can apply.
    5. Removal of vendor-prefixing from source. While this does not affect end users of Pure, we plan to remove vendor-prefixing from the source code in favor of inserting them via post-processing in the build. You'll still see them in the finished CSS on the CDN.

    Of course, our backlog of issues and PRs may also surface important changes we'll want to incorporate into Pure as well. As the outline below illustrates, even without an ambitious expansion of Pure, plenty of tasks lay ahead 2015. Without further ado, then, here's our plan, organized into three-month quarters.

    Q1. Pure 0.6

    1. Merge new-pure-menu PR
    2. Refactor pure-site accordingly
    3. Release Pure 0.6 and pure-site
    4. Address open PRs and issues

    Q2. Servicing feature requests

    1. Complete the review and absorption of all outstanding pull requests
    2. Clean up pure-form to remove functionality duplicated by pure-grid
    3. Update Pure-site accordingly
    4. Release 0.7
    5. Revise Pure so that vendor prefixing can be accomplished with configurable post processing.
    6. Investigate supporting a CSS-driven approach (and possible Sass integration) for using Pure along with the current HTML-driven approach (annotating HTML with class names).

    Q3. Pure 1.0 Release, and Components

    1. Fix bugs surfaced by the 0.7 release.
    2. Release 1.0.

    Q4. Post 1.0

    Per semantic versioning, 1.0 will be our signal to the world that backwards compatibility will be assured in future 1.x versions. Should the need arise to break backwards compatibility with 1.0, we will increment to 2.x releases.

    And that's it! We hope you have found Pure to be useful and unobtrusive, and that you look forward to Pure's continued improvement. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.

    James Alley and the Yahoo Presentation Technologies team

    opened by jamesalley 44
  • Revamp Pure Grids

    Revamp Pure Grids

    This PR introduces is a pretty big change to how Grids work in Pure.

    Features

    • Mobile-first
    • Declarative, allowing you to specify how your grid behaves on phones, tablets, and desktops
    • Less verbose classnames: changes the grid classnames (pure-g => pure-grid, pure-u => unit, no need for .pure-g-r)
    • Fixes #41 with a font-size: 0 hack.
    • More responsive! Instead of just collapsing to 100% on small screens, you can specify separate behavior for tablets, phones, and desktops.

    The rules

    The rules for using the new grid is similar to the old one, with some minor differences:

    • Everything must be nested in a pure-grid (used to be either a pure-g or a pure-g-r)
    • All elements within a pure-grid need to atleast have the classname of unit (Same as the old pure-u).
    • There are 3 types of classnames that you can use: (a) default-* which is the default width of an element, tablet-* which is the width when viewed on 480px and higher, and desktop-* which is the width when viewed at 768px and higher. See below for more info on how these work.

    How it works

    The new grid syntax is more simplified and less verbose. Here's how you define the simplest grid. The grid below is a non-responsive grid with two 50% units.

    <div class="pure-grid">
            <div class="unit default-1-2">
                ....
           </div>
            <div class="unit default-1-2">
                ....
           </div>
    </div>
    

    Responsive Behavior

    One of the problems with the current grid system is that it's not really smart when it comes to responsive design. On phones, everything just collapses to 100% width, or stays the same as the desktop version. This new grid helps with that. Suppose you want something that is 25% on desktops, 50% on tablets, and 100% on phones:

    <div class="pure-grid">
            <div class="unit default-1 tablet-1-2 desktop-1-4">
                ....
           </div>
            <div class="unit default-1 tablet-1-2 desktop-1-4">
                ....
           </div>
            <div class="unit default-1 tablet-1-2 desktop-1-4">
                ....
           </div>
            <div class="unit default-1 tablet-1-2 desktop-1-4">
                ....
           </div>
    </div>
    

    The cool thing here is that you don't have to specify all 3 classnames. You only have to specify a classname when you want something to change. Suppose you have an element that you want to be 50% on phones and tablets, and only 20% on desktops:

    <div class="unit default-1-2 desktop-1-5">
    

    Unlike the old grids, you don't need a pure-g for non-responsive elements and a pure-g-r for responsive ones. Just use a pure-grid for everything.

    Offsets

    I also took this time to introduce offsets to grids. You can add offsets through the offset-* classname:

    <div class="unit default-3-5">
        <div class="l-box">
            default-3-5
        </div>
    </div>
    <div class="unit default-1-5 offset-1-5">
        <div class="l-box">
            offset-1-5
        </div>
    </div>
    

    Tested

    This has been tested on IE7+, Latest Chrome, Safari, FF, iOS6, Android 4.0.x. The new grids has separate *widths and *margin-left defined so that it works on old IEs. I had to fool around with a lot of values to get to ones that worked well.

    *width = width - 0.031%.
    
    enhancement 
    opened by tilomitra 36
  • pull right for horizontal menus

    pull right for horizontal menus

    Creating a flexible space using inline-blocks seems impossible and the justify trick seems not to work.

    I played around with the following code but it increases slightly the height of my fixed horizontal menu bar:

    .pure-menu-custom-pull-right {
      text-align: justify;
    }
    
    .pure-menu-custom-pull-right:after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 0;
      font-size:0;
      line-height:0;
      margin: 0;
      padding: 0;
    }
    

    Is there a way to add a pull-right for the menus, I think it could be a useful addition to the standard base?

    enhancement 
    opened by mseri 35
  • Roadmap

    Roadmap

    Description

    This is a catch all ticket for potential infrastructure changes to improve Pure.

    Items

    1. [x] (#787) Migrate website - Zeit v1 is EOL, current Node.js site doesn't support v2.
    2. [x] Upgrade Normalize - Version currently used is very old. We should upgrade to the latest version.
    3. [x] Remove old browser support - There are many browser hacks for old IE, Opera and Safari browsers. These are most likely unnecessary and just add bloat to the project.
    4. [x] Remove Bower - NPM has taken over as the FE package manager and bower use has declined over the years. Deprecating the https://github.com/pure-css/pure-release repository would be the first step.
    5. [x] Audit all existing styles to ensure latest CSS spec is met.
    enhancement task discussion up for grabs 
    opened by redonkulus 32
  • Add responsive grid classnames for new grid system

    Add responsive grid classnames for new grid system

    This pull request is primarily for discussion purposes around the new responsive units. The entire pull request for the new grid system that I'm proposing is here: https://github.com/yui/pure/pull/146

    opened by tilomitra 29
  • YUI is going away - what does this mean for Pure?

    YUI is going away - what does this mean for Pure?

    opened by grantmcconnaughey 27
  • Documentation improvement

    Documentation improvement

    Is your feature request related to a problem? Please describe. No problem here, just missing info from documentation.

    The docs give CDN links to the base and grid css, but I can't find the forms one, and the releases also don't include the built files, so if I want to download the minified files I have to find the CDN link and download from there.

    Describe the solution you'd like I suggest putting all available CDN links in one place, so it's easier for people that just want to include and start using them. Also include the minified files in the releases in case someone wants to download and serve the files them selves.

    Describe alternatives you've considered N/A

    Additional context N/A

    opened by regisin 4
  • Way to fit column to content?

    Way to fit column to content?

    Bulma has is-narrow CSS class to fit a column to its content, and then the other columns autosize.

    It would be great if Pure could have this too. Because Bulma breaks too many other things sadly.

    opened by RichardJECooke 1
Releases(v2.1.0)
  • v2.1.0(Mar 15, 2022)

  • v2.0.6(Apr 28, 2021)

  • v2.0.5(Apr 28, 2021)

  • v2.0.4(Apr 28, 2021)

  • v2.0.3(Apr 28, 2021)

  • v2.0.2(Apr 28, 2021)

  • v2.0.1(May 7, 2020)

    • refactor: remove usage of deprecated webkit-overflow-scrolling https://github.com/pure-css/pure/commit/da4bf6b46ae4d9419d07e17ac7ce79c518e45847
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 5, 2020)

    This is a major version bump that has the following changes:

    • Reduced overall size of Pure to 3.6kb (gzipped/min)
    • Updated Normalize to v8.
    • Removed bower
    • Removed old IE 8 hacks
    • Removed deprecated pure-help-inline form class

    Migration

    This major version should not include too many breaking changes for your app, but please check the following:

    • Normalize Upgraded from v3 to v8. Many things have changed, be sure to verify your site properly.
    • Normalize removed the default font-family, but we have added to the base.css for consistency and due to the fact that the grids system leverages the font-family for letter-spacing.

    New Browser support

    • Chrome
    • Edge
    • Firefox
    • Internet Explorer 10+
    • Safari 8+
    • Opera

    Deprecated support for < IE 10

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Jul 10, 2019)

    • Fix "selected" menu item labels in nested menus (#708)
    • Fix bug in pure-button active state's border color. (#729)
    • Fix horizontal scrollbars not appearing in IE11 and Chrome (#740)
    • Fix pure-table-bordered issues (#718)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Jun 5, 2017)

    The community has battle-tested Pure and provided valuable feedback. We are now at a place where we can guarantee backwards compatibility through all subsequent 1.x releases.

    We hope you have found Pure to be useful and unobtrusive.. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.

    Source code(tar.gz)
    Source code(zip)
  • v0.6.2(Jan 7, 2017)

    • Added proper module API for node users [#619]

    Buttons

    • Added Button Groups to Pure [#621]

    Menus

    • Reset style for horizontal dropdown separator [#620]
    Source code(tar.gz)
    Source code(zip)
  • v0.6.1(Dec 12, 2016)

    • Migrate to PostCSS for browser prefixes [#617]
    • Remove duplicate Firefox inner focus border [#457]
    • Fix grid inside table in IE 10/11 [#504]
    • Fix CSSLint issues [#609]
    • Upgraded grunt dependencies to 1.x [#609]
    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Feb 23, 2015)

    Nothing of substance has changed between the release of 0.6.0-rc-1 and this release, 0.6.0 proper. Most of the changes made in response to the release candidate were small edits to the Pure website, not changes to the Pure CSS library itself. Feedback has been very positive.

    Source code(tar.gz)
    Source code(zip)
  • v0.6.0-rc-1(Feb 6, 2015)

    Synopsis

    This release incorporates numerous small bug fixes and PRs. Its big new feature is a rewrite of Menus. Menus are now less opinionated and easier to customize. We hope this makes the Menu construct more practical.

    A caution regarding "upgrading"

    This 0.x release of Pure is not guaranteed to be 100% backwards compatible with previous releases; Menus in particular have changed a great deal. So while it's great to start a new project with Pure 0.6.0, you should be cautious about upgrading Pure on a site that's already finely tuned and quality-checked.

    Testing

    You can consume this Release Candidate (v0.6.0-rc-1) the same way you usually consume Pure, whether you pull it off the CDN or install it via NPM or Bower. Just reference the new version in your urls with this rc version. For example:

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    

    If you're interested in playing with the code, the pure-site repo has instructions for running the site locally in conjunction with a local copy of Pure. Or, you can visit the staging server to view the (revised website) [http://stage.purecss.io] working in concert with the new release.

    About the Pure website

    Pure has an accompanying website. While not bundled with Pure itself (it's in a separate repo), it is an important source of documentation and examples. You'll want to refer to it when checking out the new version of Pure, but since this is a pre-release, we're only publishing the website changes to our staging server, http://stage.purecss.io. There will be a slight delay between the time the Pure release hits GitHub and when the updating staging server goes live. Check the version number for Pure on the pure-site to be sure you're seeing the right version.

    Changes to look out for

    Base

    Pure now uses Normalize 3.0.2. Note that support for IE7 and below has been dropped.

    Grids

    Grids have not changed.

    Buttons

    Buttons have not changed much, but watch out for sizing issues. .pure-button now uses box-sizing: border-box so that whether you use an anchor tag or a button tag, they render consistently.

    Forms

    Forms has no major changes to the classes or markup structure, but does have some changes that could affect forms built using Pure 0.5.0. You'll need to do a little QA to be sure everything's OK, as some padding and alignment properties have been tweaked.

    Menus

    There's an all-new Menu construct. The markup is different, the classnames are different, and a new example script to enable drop-downs will be included on the Pure website. There are also new examples illustrating how to achieve some common menu design patterns.

    The pure-paginator construct has been removed from Menus, as it's trivial to create your own construct using inlined pure-button links.

    Ye Olde IE

    With the move to Normalize 3.0.x, we're dropping support for IE7 and below. Most of the IE6/7 specific rules have been removed from Pure. (There were not very many.)

    IE8 is still supported.

    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(May 28, 2014)

    We've collected some useful feedback from the Pure 0.5.0 Release Candidate and are pleased to be shipping Pure 0.5.0 today.

    You can get it off the CDN with the following <link> tag:

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    

    Be sure to try out our brand new Get Started Page.

    What's Changed

    If you had a chance to test out the Pure 0.5.0 Release Candidate, then you already know what to expect in this release! If you didn't get a chance to check that out, then read on!

    Mobile-first Grid System

    The primary focus of this release was to improve Pure Grids. Pure's grid system is now mobile-first, and lets you declaratively create highly responsive layouts. This is best demonstrated with an example.

    You can create a layout that takes up a single column on small screens, 2 columns on med-sized screens, and 4 columns on large screens:

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    

    Since these mobile-first grids prescribe certain CSS Media Queries, they aren't part of Pure's core. Instead, they can be pulled in by adding the following <link> tag on your page:

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    <!--<![endif]-->
    

    If you want to customize the mobile-first grid by adding your own Media Query breakpoints or class names, you can take a look at our brand new Get Started Page. It lets you customize and generate a set of Grids that is perfectly suited for your next project, all in the browser. More on that below!

    The Grids documentation has more information about the new grid system. It received a lot of love prior to this release as well.

    Removing .pure-g-r

    With the addition of the new grid class names, .pure-g-r and its associated CSS Media Queries were no longer needed, so we removed it from the library. If you were using .pure-g-r, it's easy to migrate to the new grid system:

    Before

    <div class="pure-g-r">
      <div class="pure-u-1-2">...</div>
      <div class="pure-u-1-2">...</div>
    </div>
    

    Now

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-2">...</div>
      <div class="pure-u-1 pure-u-md-1-2">...</div>
    </div>
    

    Fluid Images

    Images that are used with a responsive grid system need to scale with the grid. Just add the new .pure-img class to your <img> elements to make them scale proportionally.

    Site Updates

    Our site also received a lot of love for this release, specifically the new Get Started Page.

    Get Started Faster

    Whether you're trying Pure for the first time, or you've used it before, we hope that the Get Started page will help you get started with your next web project quicker. The new Get Started page lets you:

    • Understand the basics of Pure Grids, which is a key building block for building responsive layouts.
    • Customize Pure Grids to fit your web project, by modifying Media Queries, columns and class names.
    • Make sure your responsive design works well in older browsers that don't support CSS Media Queries.
    • Download an HTML and CSS Starter Kit to get started faster.
    • Save your work and come back to it later, since all the changes that you make are reflected in the URL. It's also back-button friendly.

    Share and Save

    Here's an example of a 12-column responsive Pure Grid with custom classnames (.col-* instead of .pure-u-*) that we made, to show you how easy it is to customize and share Pure Grids.

    The Get Started page works great on all modern browsers, including mobile browsers! We hope you like it, along with the rest of this Pure release. If you run into any issues, please file an issue on GitHub.


    View 0.5.0 Changelog

    Source code(tar.gz)
    Source code(zip)
    pure-0.5.0.tar.gz(58.70 KB)
  • v0.5.0-rc-1(Mar 10, 2014)

    Today, we're releasing Pure 0.5.0-rc-1, our first release candidate leading up to the Pure 0.5.0 release. Pure 0.5.0 brings a mobile-first responsive grid system to the library, and we're very excited to share it with you.

    You can get it off the CDN with the following <link> tag:

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">
    

    We encourage everyone to try out this release candidate, and to file any issues that they encounter, so we can fix them before releasing Pure 0.5.0.

    Mobile-first Grid System

    The primary focus of this release is to improve Pure Grids. Pure's grid system is now mobile-first, and lets you declaratively create highly responsive layouts. This is best demonstrated with an example.

    You can create a layout that takes up a single column on small screens, 2 columns on med-sized screens, and 4 columns on large screens:

    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
    

    Since these mobile-first grids prescribe certain media queries, they aren't part of Pure's core. Instead, they can be pulled in by adding the following <link> tag on your page:

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
    <!--<![endif]-->
    

    If you want to customize the mobile-first grid by adding your own media query breakpoints or class names, you can take a look at our brand new Get Started Page. Take a look at the Grids documentation for more information about the new grid system.

    Removing .pure-g-r

    With the addition of the new grid class names, .pure-g-r and its associated media query were no longer needed, so we removed it from the library. If you were using .pure-g-r, it's easy to migrate to the new grid system:

    Before

    <div class="pure-g-r">
      <div class="pure-u-1-2">...</div>
      <div class="pure-u-1-2">...</div>
    </div>
    

    Now

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-2">...</div>
      <div class="pure-u-1 pure-u-md-1-2">...</div>
    </div>
    

    Fluid Images

    Images that are used with a responsive grid system need to scale with the grid. Just add the new .pure-img class to your <img> elements to make them scale proportionally.

    Site Updates

    Our site also received a lot of love for this release, specifically the new Get Started Page.

    It's the easiest way to get started with Pure. You can customize a grid for your next project and download a .zip file that contains all the HTML and CSS assets that you need. Check it out and let us know what you think!

    Thanks for trying out the release candidate. If all goes well, we should have Pure 0.5.0 up very shortly!


    View 0.5.0-rc-1 Changelog

    Source code(tar.gz)
    Source code(zip)
    pure-0.5.0-rc-1.tar.gz(58.89 KB)
  • v0.4.2(Feb 14, 2014)

    This is a patch release to fix some minor bugs that were reported and fixed by contributors.

    As we move forward making it easier for developers to build on Pure we're trying to provide the minimal set of CSS declarations needed to provide a solid base foundation. The goal with Pure is to solve the common and hard CSS problems that most web projects face.

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
    

    Bower Package Improvements

    @stevenvachon added main to Pure's bower.json file to allow easier integration with build processes and tooling. (#286)

    Forms Improvements

    We've removed some of the font-size declarations in Forms to allow the defaults to apply and make it easier for developers to customize. This may affect your app, and you can easily handle this by setting the font-size you want for form <input>s.

    @jpetto and @kwando contributed some fixes for some minor bugs in Forms. The changes improve the extensibility of the Forms' styles, making it easier for developers to customize. (#265, #283, #295)


    View 0.4.2 Changelog

    Source code(tar.gz)
    Source code(zip)
    pure-0.4.2.tar.gz(51.51 KB)
  • v0.4.1(Feb 6, 2014)

    Note: We released Pure 0.4.0, but the CSS selector order was corrupted. We encourage everyone to upgrade directly to Pure 0.4.1.


    Today, we're excited to ship Pure 0.4.1. This release consists of enhancements and bug fixes that makes it easier to work with the library. We've also done a good deal of work on Pure's website to prepare for an upcoming enhancement to Pure's grid system.

    You can grab this release of our CDN:

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.1/pure-min.css">
    

    What's changed?

    We've made enhancements to most of the Pure components for this release.

    • You can now use non-reduced fraction class names when laying out a grid. This means that we have rules for classes such as .pure-u-12-24 as well as .pure-u-1-2.
    • You can now add a hidden attribute to your element to hide it.
    • Buttons now have visually uniform default padding on all four sides, so they look a little nicer.
    • <input> buttons now have the same height as non-input buttons.
    • <textareas> within .pure-form-aligned look better, thanks to a vertical alignment fix.

    You can check out the HISTORY.md for a full list of changes.

    A special shout-out to everyone who contributed to this release: @achalv, @albertosantini, @andrewwakeling, @AurelioDeRosa, @dougdavies, @ItsAsbreuk, @mike-engel, @narcis-radu, @stevenvachon, and @rictorres.

    Tooling and Pure's website

    Over the last few months, we've been working on tools to solve some common CSS pain points:

    • Writing mobile-first responsive CSS, while supporting old IE browsers
    • Dealing with media queries
    • Prefixing and manipulating class names to suit your coding convention
    • Customizing Pure

    While we haven't officially launched these tools yet, we've been using some of them in Pure's source code as well as its website.

    For instance, this release of Pure removes grid-units.css and replaces it with a Grunt task that generates grid units on-the-fly. This is done through the rework-pure-grids plugin. We've also been using it on Pure's website, which now uses a mobile-first responsive grid system.

    To celebrate this mobile-first relaunch of the website, we went through and gave all the layouts a face-lift. Make sure to check them out!

    layouts

    We're really embracing tooling in order to keep Pure's code-base small while offering developers ways to customize the library. We're really excited to show everyone what we've been working on, and you can expect to hear more about it soon!


    View 0.4.1 Changelog

    Source code(tar.gz)
    Source code(zip)
    pure-0.4.1.tar.gz(51.65 KB)
  • v0.3.0(Sep 9, 2013)

    Say hello to Pure 0.3.0, the latest and greatest version of Pure!

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
    

    Improved Grids Support

    The focus of this release was to improve support for Grids across OS/browser combinations, and its ability to withstand the use of non-default fonts when set by either the person in their browser settings or by the developer using custom fonts. We've been working with the developers in Pure's community to address issues with Grids — notably:

    • In old IE, grid units sometimes flowed to a new line. (#154)
    • For people who have customized their browser fonts, or developers using custom fonts with Pure Grids, grid units sometimes flowed to a new line (#41)

    Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting a negative letter-spacing — the fallback for older browsers. Grids also now uses a specific font stack on .pure-g and .pure-g-r classes to ensure the greatest OS/browser compatibility when non-default fonts are being used. By default grid units will now have font-family: sans-serif; applied — this is the default font stack Pure's Base module (Normalize.css) applies to the <body>.

    This is a breaking change if you are using any non-default fonts in your web project. Fortunately, it's quite easy to make sure your custom font stacks apply to content within Pure Girds. Instead of applying your custom font to only the <body> element, apply it to the grid units as well. More on this below.

    Using Grids with Non-Default Fonts

    A lot of folks have run into an issue with grids and custom fonts not working well together. We gave this issue a lot of thought, and while it was important to fix it, we didn't want a fix that makes Pure Grids harder to use for people who aren't using custom fonts.

    Pure 0.3.0 contains a breaking API change to the way that grids work. If you are using any non-default font in your project (anything apart from sans-serif), you will need to modify your project's CSS and add the following in:

    body,
    .pure-g [class *= "pure-u"],
    .pure-g-r [class *= "pure-u"] {
        /* Set you're content font stack here, for example: */
        font-family: Georgia, Times, "Times New Roman", serif;
    }
    

    We recommend you add the .pure-g [class *= "pure-u"] and .pure-g-r [class *= "pure-u"] selectors to wherever you've defined your custom content or body font stack.

    The benefit of making this change is that Pure grids should now work everywhere. Apart from our usual supported environments, the community helped us by literally testing this on multiple browsers on Ubuntu, Arch Linux, and Chrome OS. We want to make sure that Grids doesn't break your web project's UI, regardless of what OS/browser people are using.

    We have more information regarding using fonts with Pure Grids directly on the Pure website, so head on over and give it a quick read.

    Other Changes

    • Pure now requires the Base module (which is Normalize.css) to be on the page. Pure has essentially always required the styles provided by Normalize.css via the Base module, and this now makes it a firm requirement. The pure-min.css and pure-nr-min.css rollup files already include the Base module.
    • Removed forms-core.css. This was a copy of Normalize.css' form related styles. Now that Pure requires the Base module (which is Normalize.css) to be on the page, the Forms Core submodule is no longer needed.
    • We added back :focus styles to [readonly] input elements.
    • Added a height: auto rule to images within a .pure-g-r so that their aspect ratios are maintained when the page is resized.

    View 0.3.0 Changelog

    As always, if you have questions about this release, ask us on the Pure Blog. Keep submitting bugs and pull requests so we can build and improve Pure together!

    Source code(tar.gz)
    Source code(zip)
    pure-0.3.0.zip(74.52 KB)
  • v0.3.0-rc-3(Sep 6, 2013)

  • v0.3.0-rc-2(Aug 29, 2013)

  • v0.3.0-rc-1(Aug 27, 2013)

  • v0.2.1(Jul 18, 2013)

    Over the last few weeks, we have been working with folks in the community to iron out bugs, and improve code quality. Today, we're thrilled to announce that these fixes have resulted in a new release, Pure 0.2.1!

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
    

    What's New

    This release is focused exclusively on fixing bugs. In all, we fixed 16 issues between Pure 0.2.0 and 0.2.1. Some of the notable fixes include:

    • Updating pure-u-1 to be display: inline-block, instead of display: block [#94]
    • Fix the pure-input-rounded class so that it actually rounds input elements [#109]
    • Fixing an issue in grids that caused elements to overlap [#95]

    You can find a full changelog in Pure's HISTORY.md.

    View 0.2.1 Changelog

    Thanks for contributing!

    You guys have been awesome at filing bugs, sending pull requests, and offering your opinions on discussions. Please continue to do that, as your use-cases really help us figure out what to focus on next. Notably, we'd like to give a shout-out to @aurelioderosa who has tirelessly commented and fixed numerous issues for this release. Thanks Aurelio!

    Coming Down the Pipeline

    We have some exciting things coming down the pipeline for Pure 0.3.0 and beyond. We are thinking of revamping our grid system with a simpler mobile-first implementation. We also have a new version of Pure Menu in the works that lets you code responsive menus and makes it trivial to style menus. Stay tuned for these pull requests!


    As always, if you have questions, feel free to submit issues or reach out to us on Twitter at @tilomitra and @ericf.

    Source code(tar.gz)
    Source code(zip)
    pure-0.2.1.zip(51.55 KB)
  • v0.2.0(Jul 2, 2013)

    Two short weeks after initially launching Pure, we're excited to release Pure 0.2.0, the next version of Pure! You can start using it today by pasting this <link> element into your <head>, or pulling it from GitHub.

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
    

    What's new?

    We fixed our :focus issues, improving the accessibility that Pure gives your web project out of the box. We added :focus rules to our existing :hover rules, and removed outline where applicable. The Pure website has also been updated to be more accessible to keyboard users and screen-readers.

    In addition, we applied improvements to most of the components within Pure based on people's feedback and by tackling low-hanging bugs and enhancements. A full list of the changes in this release can be found in Pure's HISTORY.md.

    View 0.2.0 Changelog

    Improved Developer Workflow

    We also put a lot of work into improving the workflow for people working on Pure. The goal was to make it easier for people to contribute to the project (and the make our lives easier) by improving our tooling and integration with Pure's website code base.

    Testing and CI

    We wanted to add some basic tests to at least sanity check our code, and did this by integrating CSSLint into our Gruntfile. The cool thing is that we hooked up Travis CI so anytime someone issues a pull request it will be linted to make sure there's no typos or crazy code.

    Auto Building with Grunt

    To save your fingers from The Developer Konami Code: ⌘⇥ ↑ ⏎ use can now use the grunt watch task to build Pure anytime a CSS file changes!

    Testing Pure's Site with Pure Served Locally

    Pure's website dogfoods Pure making it a natural place to test the latest changes, especially during development. We added a feature to support running the website with Pure served locally. When you combine this with auto building Pure via grunt watch your day becomes bright, filled with sunshine!

    Formalized Contributing Guidelines

    We created a CONTRIBUTING.md for Pure, which explains how you can contribute to the project. Give it a quick read before sending your pull requests!

    Thanks to the Community

    We've been overwhelmed by the feedback and the support that we've received since launching Pure. Although Pure is very young, it already has a vibrant community building up around it. Thanks to everyone who has been opening issues and sending pull requests. And a special shout-out to @dannytatom, @rcbdev, @codepb, and @mseri whose contributions were merged into the 0.2.0 release. Keep 'em coming!


    If you have questions regarding Pure, get in touch with @ericf and @tilomitra.

    Source code(tar.gz)
    Source code(zip)
    pure-0.2.0.zip(50.29 KB)
  • v0.1.0(Jul 2, 2013)

Owner
Pure CSS
A set of small, responsive CSS modules that you can use in every web project.
Pure CSS
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
A simple Node.js package that helps you not to look up JavaScript promise syntax every time you use it.

A simple Node.js package that helps you not to look up JavaScript promise syntax every time you use it. Simple: Provides abstraction of the promise sy

Saad Irfan ⚡️ 8 May 26, 2022
It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@skynexui/responsive_stylesheet You don't need to be worried just because you have to support multiple screens ?? ?? ?? ?? It's a set of common utilit

SkynexUI 39 Sep 25, 2022
A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them, and have your user authentication feature thanks to Firebase.

Features Here's the feature's included in this project ??‍??‍??‍?? Login Page ?? Products Page ?? Cart and Checkout Page ?? Sign up function with Goog

Murad Rahmanzada 16 Aug 22, 2022
A NestJS module that allows you use Prisma, set up multiple Prisma services, and use multi-tenancy in each Prisma service.

NestJS Prisma Module Installation To use this package, first install it: npm i @sabinthedev/nestjs-prisma Basic Usage In order to use this package, yo

Sabin Adams 5 Sep 11, 2022
This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Daniel Yerimah 6 Jun 7, 2022
SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

Benjamin Piper 2 Sep 5, 2022
This project refactors awesomebooks project to use ES6 modules,classes and arrow functions

AwesomeBooksWithES6 Project Description. Project created using HTML and JAVASCRIPT, user can add and delete the author and the BOOk titles from the lo

Mumenya Nyamu 7 Sep 5, 2022
Small example showing how you can make game sprite animations using CSS with Javascript movement.

Hi there, I'm Björn Hjorth ?? I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twit

Björn Hjorth 14 Sep 21, 2022
Emem Ekpo 7 Sep 9, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo ?? https://jsfiddle.net/torrobin

Tor 7 Jul 31, 2022
A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

Devang Joshi 1 Mar 1, 2021
A small (~600B gzip), useful set of methods for lazy iteration of iterables.

@ricokahler/lazy · A small (~600B gzip*), useful set of methods for lazy iteration of iterables. Why this lazy lib? Do I even need a lazy lib? Install

Rico Kahler 11 Sep 10, 2022
(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

MatoCSS Transform CSS Modules to enable Atomic CSS benefits Please note that it is still experimenting. I do not recommend using this in production. U

Huy Nguyen 5 Sep 5, 2022
A SPA (Single Page Application) that can track your books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

Awesome-Books-project Recreate awesome book app using ES6 syntax and modules. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link G

Youta Lactio Christabelle 7 Jul 14, 2022