JSFiddle

  • Snazzy links

    DN CSS Challenge 2: https://news.layervault.com/click/stories/41990

    <p class="snazzy-links">Pellentesque habitant <a href="#0">morbi tristique senectus</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget ...</p>
  • Using numbers for classes. #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <!--
      - Valid HTML.
      -->
    <div class="1">Foo</div>
  • Pure CSS accordion #24 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

    <h1>Pure CSS accordion</h1>
    
    <!--
      - By using different combinations of `type="radio"`, `type="checkbox"`,
      - `name`, and `checked`, we can create accordions that only allow one
      - item to be open at once; accordions that can have any number of items
      - open at once; accordions that have specific items open by default.
      -->
    
    <h2>One item open at once</h2>
    
    <ul class="accordion">
    
        <li class="accordion__item">
            <label class="accordion__trigger" for="toggle-01">Lorem ipsum</label>
            <input type="radio" class="accordion__toggle" name="accordion-01" id="toggle-01" checked />
            <div class="accordion__target">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ...</p></div></li></ul></!--
    >
  • Pack

    Pack items into equal spaces.

    <div class="pack  pack--large  pack--middle  pack--rev">
        <div class="pack__item">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
        
        <div class="pack__item">
            <p>Pellentesque habitant morbi tristique senectus et netus ...</p></div></div>
  • Block #12 is the latest revision

    Stacked image-and-text block

    <div class="block  block--center  block--small">
        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" alt="" class="block__img" />
        <p class="block__body">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p></div>
  • Pure CSS modals #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>HTML Ipsum Presents</h1>
    	       
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat ...</p>
  • 1000 classes vs 1 ID #163 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p id="id" class="class-0 class-1 class-2 class-3 class-4 class-5 class-6 class-7 class-8 class-9 class-10 class-11 class-12 class-13 class-14 class-15 class-16 class-17 class-18 class-19 class-20 class-21 class-22 class-23 class-24 class-25 class-26 class-27 class-28 class-29 class-30 class-31 class-32 class-33 class-34 class-35 class-36 class-37 class-38 class-39 class-40 class-41 class-42 class-43 class-44 class-45 class-46 class-47 class-48 class-49 class-50 class-51 class-52 class-53 class-54 class-55 class-56 class-57 class-58 class-59 class-60 class-61 class-62 class-63 class-64 class-65 class-66 class-67 class-68 class-69 class-70 class-71 class-72 class-73 class-74 class-75 class-76 class-77 class-78 class-79 class-80 class-81 class-82 class-83 class-84 class-85 class-86 class-87 class-88 class-89 class-90 class-91 class-92 class-93 class-94 class-95 class-96 class-97 class-98 class-99 class-100 class-101 class-102 class-103 class-104 class-105 class-106 class-107 class-108 class-109 class-110 class-111 class-112 class-113 class-114 class-115 class-116 class-117 class-118 class-119 class-120 class-121 class-122 class-123 class-124 class-125 class-126 class-127 class-128 class-129 class-130 class-131 class-132 class-133 class-134 class-135 class-136 class-137 class-138 class-139 class-140 class-141 class-142 class-143 class-144 class-145 class-146 class-147 class-148 class-149 class-150 class-151 class-152 class-153 class-154 class-155 class-156 class-157 class-158 class-159 class-160 class-161 class-162 class-163 class-164 class-165 class-166 class-167 class-168 class-169 class-170 class-171 class-172 class-173 class-174 class-175 class-176 class-177 class-178 class-179 class-180 class-181 class-182 class-183 class-184 class-185 class-186 class-187 class-188 class-189 class-190 class-191 class-192 class-193 class-194 class-195 class-196 class-197 class-198 class-199 class-200 class-201 class-202 class-203 class-204 class-205 class-206 class-207 class-208 class-209 class-210 class-211 class-212 class-213 class-214 class-215 class-216 class-217 class-218 class-219 class-220 class-221 class-222 class-223 class-224 class-225 class-226 class-227 class-228 class-229 class-230 class-231 class-232 class-233 class-234 class-235 class-236 class-237 class-238 class-239 class-240 class-241 class-242 class-243 class-244 class-245 class-246 class-247 class-248 class-249 class-250 class-251 class-252 class-253 class-254 class-255 class-256 class-257 class-258 class-259 class-260 class-261 class-262 class-263 class-264 class-265 class-266 class-267 class-268 class-269 class-270 class-271 class-272 class-273 class-274 class-275 class-276 class-277 class-278 class-279 class-280 class-281 class-282 class-283 class-284 class-285 class-286 class-287 class-288 class-289 class-290 class-291 class-292 class-293 class-294 class-295 class-296 class-297 class-298 class-299 class-300 class-301 class-302 class-303 class-304 class-305 class-306 class-307 class-308 class-309 class-310 class-311 class-312 class-313 class-314 class-315 class-316 class-317 class-318 class-319 class-320 class-321 class-322 class-323 class-324 class-325 class-326 class-327 class-328 class-329 class-330 class-331 class-332 class-333 class-334 class-335 class-336 class-337 class-338 class-339 class-340 class-341 class-342 class-343 class-344 class-345 class-346 class-347 class-348 class-349 class-350 class-351 class-352 class-353 class-354 class-355 class-356 class-357 class-358 class-359 class-360 class-361 class-362 class-363 class-364 class-365 class-366 class-367 class-368 class-369 class-370 class-371 class-372 class-373 class-374 class-375 class-376 class-377 class-378 class-379 class-380 class-381 class-382 class-383 class-384 class-385 class-386 class-387 class-388 class-389 class-390 class-391 class-392 class-393 class-394 class-395 class-396 class-397 class-398 class-399 class-400 class-401 class-402 class-403 class-404 class-405 class-406 class-407 class-408 class-409 class-410 class-411 class-412 class-413 class-414 class-415 class-416 class-417 class-418 class-419 class-420 class-421 class-422 class-423 class-424 class-425 class-426 class-427 class-428 class-429 class-430 class-431 class-432 class-433 class-434 class-435 class-436 class-437 class-438 class-439 class-440 class-441 class-442 class-443 class-444 class-445 class-446 class-447 class-448 class-449 class-450 class-451 class-452 class-453 class-454 class-455 class-456 class-457 class-458 class-459 class-460 class-461 class-462 class-463 class-464 class-465 class-466 class-467 class-468 class-469 class-470 class-471 class-472 class-473 class-474 class-475 class-476 class-477 class-478 class-479 class-480 class-481 class-482 class-483 class-484 class-485 class-486 class-487 class-488 class-489 class-490 class-491 class-492 class-493 class-494 class-495 class-496 class-497 class-498 class-499 class-500 class-501 class-502 class-503 class-504 class-505 class-506 class-507 class-508 class-509 class-510 class-511 class-512 class-513 class-514 class-515 class-516 class-517 class-518 class-519 class-520 class-521 class-522 class-523 class-524 class-525 class-526 class-527 class-528 class-529 class-530 class-531 class-532 class-533 class-534 class-535 class-536 class-537 class-538 class-539 class-540 class-541 class-542 class-543 class-544 class-545 class-546 class-547 class-548 class-549 class-550 class-551 class-552 class-553 class-554 class-555 class-556 class-557 class-558 class-559 class-560 class-561 class-562 class-563 class-564 class-565 class-566 class-567 class-568 class-569 class-570 class-571 class-572 class-573 class-574 class-575 class-576 class-577 class-578 class-579 class-580 class-581 class-582 class-583 class-584 class-585 class-586 class-587 class-588 class-589 class-590 class-591 class-592 class-593 class-594 class-595 class-596 class-597 class-598 class-599 class-600 class-601 class-602 class-603 class-604 class-605 class-606 class-607 class-608 class-609 class-610 class-611 class-612 class-613 class-614 class-615 class-616 class-617 class-618 class-619 class-620 class-621 class-622 class-623 class-624 class-625 class-626 class-627 class-628 class-629 class-630 class-631 class-632 class-633 class-634 class-635 class-636 class-637 class-638 class-639 class-640 class-641 class-642 class-643 class-644 class-645 class-646 class-647 class-648 class-649 class-650 class-651 class-652 class-653 class-654 class-655 class-656 class-657 class-658 class-659 class-660 class-661 class-662 class-663 class-664 class-665 class-666 class-667 class-668 class-669 class-670 class-671 class-672 class-673 class-674 class-675 class-676 class-677 class-678 class-679 class-680 class-681 class-682 class-683 class-684 class-685 class-686 class-687 class-688 class-689 class-690 class-691 class-692 class-693 class-694 class-695 class-696 class-697 class-698 class-699 class-700 class-701 class-702 class-703 class-704 class-705 class-706 class-707 class-708 class-709 class-710 class-711 class-712 class-713 class-714 class-715 class-716 class-717 class-718 class-719 class-720 class-721 class-722 class-723 class-724 class-725 class-726 class-727 class-728 class-729 class-730 class-731 class-732 class-733 class-734 class-735 class-736 class-737 class-738 class-739 class-740 class-741 class-742 class-743 class-744 class-745 class-746 class-747 class-748 class-749 class-750 class-751 class-752 class-753 class-754 class-755 class-756 class-757 class-758 class-759 class-760 class-761 class-762 class-763 class-764 class-765 class-766 class-767 class-768 class-769 class-770 class-771 class-772 class-773 class-774 class-775 class-776 class-777 class-778 class-779 class-780 class-781 class-782 class-783 class-784 class-785 class-786 class-787 class-788 class-789 class-790 class-791 class-792 class-793 class-794 class-795 class-796 class-797 class-798 class-799 class-800 class-801 class-802 class-803 class-804 class-805 class-806 class-807 class-808 class-809 class-810 class-811 class-812 class-813 class-814 class-815 class-816 class-817 class-818 class-819 class-820 class-821 class-822 class-823 class-824 class-825 class-826 class-827 class-828 class-829 class-830 class-831 class-832 class-833 class-834 class-835 class-836 class-837 class-838 class-839 class-840 class-841 class-842 class-843 class-844 class-845 class-846 class-847 class-848 class-849 class-850 class-851 class-852 class-853 class-854 class-855 class-856 class-857 class-858 class-859 class-860 class-861 class-862 class-863 class-864 class-865 class-866 class-867 class-868 class-869 class-870 class-871 class-872 class-873 class-874 class-875 class-876 class-877 class-878 class-879 class-880 class-881 class-882 class-883 class-884 class-885 class-886 class-887 class-888 class-889 class-890 class-891 class-892 class-893 class-894 class-895 class-896 class-897 class-898 class-899 class-900 class-901 class-902 class-903 class-904 class-905 class-906 class-907 class-908 class-909 class-910 class-911 class-912 class-913 class-914 class-915 class-916 class-917 class-918 class-919 class-920 class-921 class-922 class-923 class-924 class-925 class-926 class-927 class-928 class-929 class-930 class-931 class-932 class-933 class-934 class-935 class-936 class-937 class-938 class-939 class-940 class-941 class-942 class-943 class-944 class-945 class-946 class-947 class-948 class-949 class-950 class-951 class-952 class-953 class-954 class-955 class-956 class-957 class-958 class-959 class-960 class-961 class-962 class-963 class-964 class-965 class-966 class-967 class-968 class-969 class-970 class-971 class-972 class-973 class-974 class-975 class-976 class-977 class-978 class-979 class-980 class-981 class-982 class-983 class-984 class-985 class-986 class-987 class-988 class-989 class-990 class-991 class-992 class-993 class-994 class-995 class-996 class-997 class-998 class-999">Foo bar baz</p>
  • Style file inputs as buttons #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <!--
      - By attaching our button styles to a class, rather than a selector
      - like `button {}`, we can do things like this:
      -->
    
    <label class="btn">    
        Upload a fileā€¦
        <input type="file" class="hidden" />
    </label>
  • en dash madness #20 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p class="foo-bar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p>
  • Selectable tags #15 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

    <form action="#0">
    
        <h2>Filter by:</h2>
    
        <ul class="list-inline">
        
            <li>
                <label class="check-tag">
                    <input type="checkbox" class="check-tag__input" />
                    <span class="check-tag__text">Lorem</span>
                </label>
            </li>
        
            <li>
                <label class="check-tag">
                    <input type="checkbox" class="check-tag__input" />
                    <span class="check-tag__text">Ipsum</span>
                </label>
            </li>
        
            <li>
                <label class="check-tag">
                    <input type="checkbox" class="check-tag__input" />
                    <span class="check-tag__text">Dolor</span>
                </label>
            </li>
        
            <li>       
                <label class="check-tag">
                    <input type="checkbox" class="check-tag__input" />
                    <span class="check-tag__text">Sit Amet</span>
                </label>
            </li>
        
        </ul>
        
        <p><button>Filter</button></p>
    
    </form>
    
    <h3>View all tags:</h3>
    
    <ul class="list-inline">
    
        <li>
            <a href="#0" class="tag">Lorem</a>
        </li>
    
        <li>       
            <a href="#0" class="tag">Ipsum</a>
        </li>
    
        <li>       
            <a href="#0" class="tag">Dolor</a>
        </li>
    
        <li>       
            <a href="#0" class="tag">Sit Amet</a>
        </li>
    
    </ul>