Skip to content

Instantly share code, notes, and snippets.

View amelieykw's full-sized avatar

amelieykw amelieykw

8 followers · 39 following
  • Sophia Antipolis, France
View GitHub Profile
@amelieykw
amelieykw / 0 - Introduction.md
Last active March 21, 2018 17:06
[A Complete Guide to Grid]#Grid #CSS #Bootstrap #Layout #Design #UI

Original Article

CSS Grid Layout CSS Flexbox Layout
2-dimensional system (handle both columns and rows) largly a 1-dimensional system
apply CSS rules both to a parent element (Grid Container) + that elements' children (Grid Items)

Content

  • Basic and Browser Support
  • Important Terminology
@amelieykw
amelieykw / 01 - Grid.md
Last active March 22, 2018 14:45
[Bootstrap - 01 Layout - 01 Grid]#Bootstrap #CSS #Grid #Layout #Content #Component

Grid System

  • 12 column system
  • 5 default responsive tiers
  • Sass variables and mixins
  • dozens of predefined classes

How it works

  • uses a series of containers, rows and columns to layout and align content
  • fully reponsive
@amelieykw
amelieykw / demo.css
Last active March 25, 2018 16:21
[timeline.js] #jquery #css #js #timeline.js
.section-list-box:not(:last-child) {
border-bottom: 1px solid #dddddd;
margin: 3rem 0;
padding-bottom: 5rem; }
.timeline-theme-2 {
width: 600px;
margin: 70px auto auto; }
@amelieykw
amelieykw / 00 - Introduction.md
Last active March 25, 2018 19:42
[Horizontal Timeline]#timeline #css #js #jquery
@amelieykw
amelieykw / 01 - Adding jQuery to Your Web Pages.md
Last active March 28, 2018 13:40
[jQuery tutorial - w3school] #jQuery #tutorial #w3school

There are several ways to start using jQuery on your web site. You can:

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google

jQuery CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

@amelieykw
amelieykw / 01 - The most basic Examples.md
Last active March 28, 2018 14:53
[Bootstrap - 02 Content - 05 Tables] #Bootstrap #Content #Table

opt-in

Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

the most basic table markup + .table-based tables look in Bootstrap

Bootstrap table ex01

@amelieykw
amelieykw / pagination.css
Last active March 29, 2018 07:13
[Bootstrap - How to change bg color of a selected li of pagination] #Bootstrap #CSS #pagination #li #selectedli #.active
.example .pagination>li>a,
.example .pagination>li>span {
border: 1px solid purple;
}
.pagination>li.active>a {
background: purple;
color: #fff;
}
@amelieykw
amelieykw / 00 - About.md
Last active March 29, 2018 07:45
[Bootstrap - 03 Component - 06 Card] #Card #Component #Bootstrap #html #CSS

A card = a flexible and extensible content container.

It includes :

  • options for headers and footers
  • a wide variety of content
  • contextual background colors
  • powerful display options
@amelieykw
amelieykw / result.md
Created March 29, 2018 08:45
[Html table - vertical/horizontal headings] #html #table #verticalHeading #horizontalHeading

table_verticalHeading

@amelieykw
amelieykw / pagination-pageitem.html
Last active March 29, 2018 12:46
[Bootstrap Pagination PageItem Click-Change-ActiveItem Event] #Bootstrap #Pagination #pageItem #jquery #html #.active
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
<ul class="pagination">
<li class="prev">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a>